ASP.NET jQuery Ajax Calling Code-Behind Method

Я очень новичок в веб-разработке, но имею большой опыт в разработке в целом. У меня есть страница ASP, в которой есть несколько полей ввода и кнопка отправки. Эта кнопка отправки просто вызывает $.ajax, который я намеревался вызвать метод в файле с кодом. Однако я заметил две интересные вещи. Во-первых, вызов ajax выполняется независимо от того, какие данные ему предоставляются. Во-вторых, поле responseText - это весь HTML-источник страницы.

Я прочитал этот и другие статьи, которые указывают на webconfig, но эти решения, похоже, не разрешают мою проблему.

Вот страница 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>

Код позади:

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

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

}

Теперь я заметил, что могу изменить свойство url на все, что захочу, и метод ошибки никогда не вызывается, а статус имеет успех, а responseText - это вся html-страница. В моем webconfig есть все соответствующие разделы (включая раздел htmlModule). Я работаю в .Net 3.5. Я ценю любую помощь, и, опять же, я действительно новичок в этом, поэтому то, что очевидно для других, скорее всего, не очевидно для меня. И если есть лучший способ сделать это (вызывая методы кодирования кода asp.net из JavaScript, то есть, пожалуйста, не стесняйтесь публиковать это. Спасибо!!!

Ответ 1

Во-первых, вы, вероятно, хотите добавить return false; в нижней части вашего метода Submit() в JavaScript (поэтому он останавливает отправку, поскольку вы обрабатываете его в AJAX).

Вы подключаетесь к полному событию, а не к событию успеха - есть существенная разница и почему ваши результаты отладки не так ожидаются. Кроме того, я никогда не применял методы подписи к вашим, и я всегда предоставлял contentType и dataType. Например:

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

Ответ 2

Это тоже не решило мою проблему, поэтому я немного изменил параметры.
Этот код работал у меня:

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