web-dev-qa-db-fra.com

ASP.NET jQuery Ajax appelant la méthode code-behind

Je suis très nouveau dans le développement web, mais j'ai beaucoup d'expérience dans le développement en général. J'ai une page ASP qui a quelques champs de saisie et un bouton d'envoi. Ce bouton d'envoi appelle purement $ .ajax, que j'avais l'intention d'appeler une méthode dans le fichier code-behind. Cependant , J'ai remarqué deux choses intéressantes. Premièrement, l'appel ajax réussit quelles que soient les données qui lui sont fournies. Deuxièmement, le champ responseText est la source html de la page entière.

J'ai lu this et d'autres articles qui pointent vers la configuration Web, mais ces solutions ne semblent pas résoudre mon problème.

Voici la page asp:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="TesScript.js"></script>
    <link rel="Stylesheet" type="text/css" href="TestStyle.css" />
</head>
<body>
    <div>
        <ul class="tempList">
            <li>Name:
                <input id="nameText" type="text" />
            </li>
            <li>Attending:
                <input id="yesButton" type="radio" name="attending" />
                Yes
                <input id="noButton" type="radio" name="attending" />
                No </li>
            <li>Return Address:
                <input id="returnAddressText" type="text" />
            </li>
            <li>
                <input id="submitButton" type="button" onclick="submit()" value="Submit" />
            </li>
        </ul>
    </div>
    <ul id="errorContainer" class="errorSection" runat="server" />
    <ul id="messageContainer" class="messageSection" runat="server" />
</body>
</html>

Le code derrière:

using System;
using System.Web.Services;
using System.Web.UI;

namespace TestAspStuff
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }


        [WebMethod]
        public static string OnSubmit(string name, bool isGoing, string returnAddress)
        {
            return "it worked";
        }
    }
}

Et le JavaScript:

function submit() {

    var name = "my name";
    var isAttending = true;
    var returnAddress = "[email protected]";

    SendMail(name, isAttending, returnAddress);
}

function SendMail(person, isAttending, returnEmail) {

    var dataValue = { "name": person, "isGoing": isAttending, "returnAddress": returnEmail };

    $.ajax({
        type: "POST",
        url: "Default.aspx/OnSubmit",
        data: dataValue,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        },
        complete: function (jqXHR, status) {
            alert("complete: " + status + "\n\nResponse: " + jqXHR.responseText);
        }
    });

}

Maintenant, j'ai remarqué que je peux changer la propriété url en tout ce que je veux et la méthode d'erreur n'est jamais appelée, et l'état est réussi, avec le responseText étant la page html entière. Mon webconfig a toutes les sections appropriées (y compris la section htmlModule). Je travaille dans .Net 3.5. J'apprécie toute aide et, encore une fois, je suis vraiment nouveau dans ce domaine, donc ce qui est évident pour les autres ne l'est probablement pas pour moi. Et s'il y a une meilleure façon de le faire (en appelant les méthodes de code asp.net à partir de JavaScript, c'est-à-dire), n'hésitez pas à le poster. Merci!!!

c#javascriptjqueryasp.netajax
15
Will Custode

Premièrement, vous voudrez probablement ajouter un retour faux; au bas de votre méthode Submit () en JavaScript (donc cela arrête la soumission, puisque vous la gérez dans AJAX).

Vous vous connectez à l'événement complete, pas à l'événement success - il y a une différence significative et c'est pourquoi vos résultats de débogage ne sont pas comme prévu. De plus, je n'ai jamais fait correspondre les méthodes de signature à la vôtre, et j'ai toujours fourni un contentType et un dataType. Par exemple:

$.ajax({
        type: "POST",
        url: "Default.aspx/OnSubmit",
        data: dataValue,                
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        },
        success: function (result) {
            alert("We returned: " + result);
        }
    });
19
wilso132

Cela n'a pas résolu mon problème aussi, j'ai donc légèrement modifié les paramètres.
Ce code a fonctionné pour moi:

var dataValue = "{ name: 'person', isGoing: 'true', returnAddress: 'returnEmail' }";

$.ajax({
    type: "POST",
    url: "Default.aspx/OnSubmit",
    data: dataValue,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
    },
    success: function (result) {
        alert("We returned: " + result.d);
    }
});
7
user3824922