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() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
},
complete: function (jqXHR, status) {
alert("complete: " + status + "\n\nResponse: " + 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!!!
This question is related to
c#
javascript
jquery
asp.net
ajax
This hasn't solved my problem too, so I changed the parameters slightly.
This code worked for me:
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);
}
});
Source: Stackoverflow.com