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="https://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" rel="nofollow noreferrer noopener" />
</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 = "<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34594d7159555d58745359555d581a575b59">[email protected]</a>";
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() + "nnStatus: " + textStatus + "nnError: " + errorThrown);
},
complete: function (jqXHR, status) {
alert("complete: " + status + "nnResponse: " + 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!!!
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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() + "nnStatus: " + textStatus + "nnError: " + errorThrown);
},
success: function (result) {
alert("We returned: " + result);
}
});
Method 2
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() + "nnStatus: " + textStatus + "nnError: " + errorThrown);
},
success: function (result) {
alert("We returned: " + result.d);
}
});
Method 3
I know it’s an old thread. One possible solution is to use JSON.stringify( ) to convert it to a proper JSON string. This will resolve any data parameter values related issue.
function SendMail(person, isAttending, returnEmail) {
var dataValue = { "name": person, "isGoing": isAttending, "returnAddress": returnEmail };
$.ajax({
type: "POST",
url: "Default.aspx/OnSubmit",
data: JSON.stringify(dataValue),
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "nnStatus: " + textStatus + "nnError: " + errorThrown);
},
complete: function (jqXHR, status) {
alert("complete: " + status + "nnResponse: " + jqXHR.responseText);
}
});
}
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0