web-dev-qa-db-fra.com

Appel d'un 'WebMethod' avec jQuery dans ASP.NET WebForms

J'ai défini un point d'arrêt dans la variable suivante WebMethod mais je ne l'atteins jamais.

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>
jqueryasp.netajaxwebformswebmethod
22
marknery

Assurez-vous que vous avez activé les méthodes de page dans votre élément ScriptManager:

<asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" />

et que vous avez annulé l'action par défaut du bouton en renvoyant la valeur false dans le gestionnaire onclick, sinon la page effectue une publication complète et votre appel AJAX risque de ne jamais avoir le temps de se terminer. Voici un exemple de travail complet:

<%@ 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>

Une autre possibilité consiste à s'abonner au gestionnaire de clics de manière discrète:

<button id="btnSearch">Search</button>

puis dans un fichier javascript séparé:

$('#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;
});

Vous remarquerez peut-être également l'utilisation de la propriété msg.d dans le rappel de réussite utilisé par ASP.NET pour envelopper la réponse entière, ainsi que l'utilisation de la méthode ResolveUrl pour générer correctement l'URL vers la méthode page au lieu de la coder en dur.

28
Darin Dimitrov

Un appel plus optimisé sera

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);
        }
    });
}

Pas besoin de fournir un asp:ScriptManager du tout. 

Ressources: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

5
naveen

Votre bouton actuel provoque une publication complète . Ajoutez simplement un type = "bouton" à votre bouton pour éviter cela.

 <button id = "btnSearch" type="button" onclick = "search()" >Search</button>

-Shazzam yo

1
HeavyMerlin