ASP.NET jQuery Ajax chamando o método de código por trás

Question

ASP.NET jQuery Ajax chamando o método de código por trás

Eu sou Muito novo no desenvolvimento da web, mas tenho muita experiência no desenvolvimento em geral. Eu tenho uma página ASP que tem alguns campos de entrada e um botão enviar. Este botão enviar apenas chama $.ajax, que eu pretendia ter chamado um método no código atrás do arquivo. No entanto, notei duas coisas interessantes. Primeiro, a chamada ajax tem sucesso independentemente dos dados que lhe são fornecidos. Em segundo lugar, o campo responseText é a fonte html da página inteira.

Eu li. este e outros artigos que apontam para o webconfig, mas estas soluções não parecem resolver o meu problema.

Aqui está a página 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>

o código por trás:

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

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

}

Agora, eu notei que eu posso mudar a propriedade url para qualquer coisa que eu quiser e o método de erro nunca é chamado, e o status é sucesso, com o Text de resposta sendo toda a página html. O meu webconfig tem todas as secções apropriadas (incluindo o htmlModule) seccao). Estou a trabalhar no. net 3.5. Agradeço qualquer ajuda e, mais uma vez, sou nova nisto, por isso o que é óbvio para os outros não é óbvio para mim. E se houver uma maneira melhor de fazer isso asp.net código - por trás de métodos de JavaScript, ou seja) por favor, sinta-se livre para postar isso. Obrigado!!!

11

c#javascript jquery ajax asp.net

Author: Community, 2013-08-14

Source

2 answers

5

Author: user3824922, 2014-07-10 10:23:50

score 16 · Accepted Answer

Em primeiro lugar, você provavelmente quer adicionar um retorno falso; para o fundo do seu método Submit() em JavaScript (para que ele pare o submit, uma vez que você está lidando com ele em AJAX).

Estás a ligar - te ao evento Completo, não ao evento de sucesso - há uma diferença significativa e é por isso que os teus resultados de depuração não são como esperado. Além disso, eu nunca fiz os métodos de assinatura coincidirem com os seus, e eu sempre providenciei um tipo de contentType e dataType. Por exemplo:

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