Creo que tienes que tener en cuenta una cosa. Si utilizas AJAX no vas a tener acceso a repo1
ni repo2
ya que la llamada AJAX tiene que hacerse en el ámbito de un [WebMethod]
(método estático) y dicho ámbito queda fuera del ciclo de vida de la página. Es decir, en el momento de la llamada al [WebMethod]
los controles de tu página repo1
y repo2
no existen y por tanto no puedes acceder a ellos.
El flujo sería más bien así:
- Tu
javascript
llama a un WebMethod
del servidor a través de AJAX
.
- El
WebMethod
no modifica nada, sólo devuelve una serie de datos.
- El
javascript
modifica el DOM
de tu página con los datos obtenidos.
Volviendo a tu ejemplo, imagina que quieres cambiar el texto de repo1
por un dato obtenido de servidor (te pongo un ejemplo utilizando jQuery
que te facilita mucho las cosas):
[WebMethod]
protected static string MySql()
{
return "PHP";
}
Y en tu Javascript
:
$.ajax({
type: "GET",
url: "tuPagina.aspx/MySql",
data: '', //Parámetros a enviar al método si los tuviera
contentType: "application/json; charset=utf-8",
dataType: "json", //Tipo de datos enviados
success: function(response) {
//En caso de que todo vaya bien obtienes aquí la respuesta (string "PHP")
});
De todas formas, visto tu código, no necesitas llamar al servidor. Con hacer esto valdría (siguiendo con jQuery
):
$(".active").on("click",function(){
//Llamamos a la función parent para obtener el "li" anterior y ocultarlo.
$("#repo1").parent().hide();
$("#repo2").html("PHP");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fa fa-truck"></i>
Transportistas
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li> <a href="#" id="repo1" runat="server" onclick="MySql"> <i class="glyphicon glyphicon-list"></i>Reporte 1</a></li>
<li> <a href="#" id="repo2" runat="server" onclick="MySql"> <i class="glyphicon glyphicon-list"></i>Reporte 2</a></li>
<li> <a href="#" id="repo3" runat="server" onclick="MySql"> <i class="glyphicon glyphicon-list"></i>Reporte 3</a></li>
</ul>
</li>