Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
238 views
in Technique[技术] by (71.8m points)

c# - ASP.NET jQuery Ajax Calling Code-Behind Method

I am very new to web development, but have a lot of experience in development in general. I have an ASP page that has a few input fields and a submit button. This submit button purely calls $.ajax, which I intended to have call a method in the code-behind file. However, I've noticed two interesting things. First, the ajax call succeeds regardless of what data is provided to it. Secondly, the responseText field is the entire page's html source.

I've read this and other articles that point to the webconfig, but these solutions do not seem to resolve my issue.

Here is the asp page:

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

The code behind:

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

And the 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() + "

Status: " + textStatus + "

Error: " + errorThrown);
        },
        complete: function (jqXHR, status) {
            alert("complete: " + status + "

Response: " + jqXHR.responseText);
        }
    });

}

Now, I noticed I can change the url property to anything I want and the error method is never called, and the status is success, with the responseText being the entire html page. My webconfig has all of the appropriate sections (including the htmlModule section). I am working in .Net 3.5. I appreciate any help and, again, I'm really new to this so what's obvious to others is most likely not obvious to me. And if there's a better way to do this (calling asp.net code-behind methods from JavaScript, that is) please feel free to post that. Thanks!!!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Firstly, you probably want to add a return false; to the bottom of your Submit() method in JavaScript (so it stops the submit, since you're handling it in AJAX).

You're connecting to the complete event, not the success event - there's a significant difference and that's why your debugging results aren't as expected. Also, I've never made the signature methods match yours, and I've always provided a contentType and dataType. For example:

$.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() + "

Status: " + textStatus + "

Error: " + errorThrown);
        },
        success: function (result) {
            alert("We returned: " + result);
        }
    });

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...