example - Llamar a un ''WebMethod'' con jQuery en ASP.NET WebForms
jquery ajax aspx webmethod (4)
¿Cómo implementar el método web ASP.Net usando JQuery AJAX?
Página HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery.min.js"></script>
<script>
function SubmitData() {
var name = ''Ram'';
var gender = ''Male'';
var age = ''30'';
$.ajax({
type: "POST",
url: "ajaxcall.aspx/SaveData",
data: ''{"name":"'' + name + ''", "gender":"'' + gender + ''", "age":"'' + age + ''"}'',
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$(''#loader'').show();
},
success: function (data) {
alert(data.d);
$(''#loader'').hide();
},
error: function (msg) {
//alert(''3'');
msg = "There is an error";
alert(msg);
$(''#loader'').hide();
}
});
}
</script>
</head>
<body>
<div id="loader" style="display: none;">
<img src="ajax-loader.gif" />
</div>
<a href="#" onclick="SubmitData();">Submit</a>
</body>
</html>
Código detrás:
[WebMethod]
public static string SaveData(string name, string gender, string age) {
try {
return "OK";
} catch (Exception ex) {
return ex.Message;
} finally { }
}
Recurso: http://www.sharepointcafe.net/2016/10/how-to-call-aspnet-web-method-using-jquery-ajax.html
Establecí un punto de interrupción en el siguiente WebMethod pero nunca voy a llegar al punto de interrupción.
cs:
[WebMethod]
public static string search()
{
return "worked";
}
aspx:
function search() {
$.ajax({
type: "POST",
url: "ProcessAudit/req_brws.aspx/search",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert(msg)
}
});
}
<button id = "btnSearch" onclick = "search()" >Search</button>
Asegúrese de haber habilitado los métodos de página en su elemento ScriptManager :
<asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" />
y que ha cancelado la acción predeterminada del botón devolviendo false dentro del controlador onclick; de lo contrario, la página realiza una devolución de datos completa y su llamada AJAX puede que nunca tenga tiempo de finalizar. Aquí hay un ejemplo completo de trabajo:
<%@ Page Language="C#" %>
<script type="text/c#" runat="server">
[System.Web.Services.WebMethod]
public static string search()
{
return "worked";
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" />
<button id="btnSearch" onclick="search(); return false;" >Search</button>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function search() {
$.ajax({
type: ''POST'',
url: ''<%= ResolveUrl("~/default.aspx/search") %>'',
data: ''{ }'',
contentType: ''application/json; charset=utf-8'',
dataType: ''json'',
success: function (msg) {
alert(msg.d)
}
});
}
</script>
</body>
</html>
Otra posibilidad es suscribirse al controlador de clics discretamente:
<button id="btnSearch">Search</button>
y luego dentro de un archivo javascript separado:
$(''#btnSearch'').click(function() {
$.ajax({
type: ''POST'',
url: ''<%= ResolveUrl("~/default.aspx/search") %>'',
data: ''{ }'',
contentType: ''application/json; charset=utf-8'',
dataType: ''json'',
success: function (msg) {
alert(msg.d)
}
});
return false;
});
También puede observar el uso de la propiedad msg.d dentro de la devolución de llamada msg.d que utiliza ASP.NET para incluir toda la respuesta, así como el uso del método ResolveUrl para generar correctamente la url en el método de página en lugar de codificarla.
Su botón actual está causando una devolución de datos completa. Simplemente agregue un tipo = "botón" a su botón para evitar esto.
<button id = "btnSearch" type="button" onclick = "search()" >Search</button>
-Shazzam yo
Una llamada más optimizada será
function search() {
$.ajax({
type: "POST",
url: ''<%= ResolveUrl("~/ProcessAudit/req_brws.aspx/search") %>'',
data: "{}",
contentType: "application/json",
success: function (msg) {
msg = msg.hasOwnProperty("d") ? msg.d : msg;
alert(msg);
}
});
}
No es necesario proporcionar un asp:ScriptManager en absoluto.
Recurso: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/