Ajax with asp.net aspx returns Undefined - asp.net

I'm facing the following issue: Whenever I click on the button, the alert shows undefined.
Web method:
[WebMethod]
public static string getTest()
{
return "testing success";
}
Ajax script
<script type="text/javascript">
function getTest() {
$.ajax({
type: "POST",
url: "main.aspx/getTest",
data: "{}",
datatype: "json",
contenttype: "/application/json; charset=utf-8",
success: function (msg) {
alert(msg.d);
},
error: function (data) {
}
});
}
</script>

datatype should be dataType and contenttype should be contentType. Also remove / from start of "/application/json; charset=utf-8"
$.ajax({
type: "POST",
url: "main.aspx/getTest",
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (msg) {
alert(msg.d);
},
error: function (data) {
}
});

Remove these from your ajax call
datatype: "json",
contenttype: "/application/json; charset=utf-8",
More about these
Differences between contentType and dataType in jQuery ajax function
What is content-type and datatype in an AJAX request?
You can find more details in the jQuery Ajax documentation

Related

ASP.NET MVC Controller - 500Error

Why isn't my controller function called?
I always get 500error (in fiddler). I get no error in Visual Studio or an error site.
Controller:
[POST("/test1")] // attributerouting (works with GET methods)
public ActionResult test1(TreeViewItemModel aItem)
{
...
}
Client:
var tree = $("#demo2").jstree("get_json");
var c = JSON.stringify(tree);
$.ajax({
type: "POST",
url: "/test1",
data: tree,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response);
}
});
Some times 500 Internal Server Error occurred because of syntax error in the View of it's controller like { or } mismatch or etc. Did you check syntax of test1.cshtml?
problem was the data format:
solution:
public ActionResult test1(IEnumerable<TreeViewItemModel> aItem)
{
}
Client:
var tree = $("#demo2").jstree("get_json");
var c = JSON.stringify(tree);
$.ajax({
type: "POST",
url: "/test1",
data: c,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response);
}
});

ASP.NET hello world AJAX post

I keep getting a 500 with the following C#/jQuery. Any given implementation may not be right and thats not a huge issue. I'm just trying to get a hello world up. It works if the c# has no arguments but as soon as I try to recieve data it gives the 500.
[WebMethod]
public static string Test(string s)
{
// never gets here
}
$.ajax({
type: "POST",
url: "ajax.aspx/" + method,
/*async: true,*/
data: "{data:'" + data + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
callback(data.d);
}
});
latest attempt is this which still doesnt work:
[WebMethod()]
public static string Test(string data)
{
// never gets here
return "hello world";
}
$.ajax({
type: "POST",
url: "ajax.aspx/Test",
data: "data: {data:'abc'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("back");
}
});
I think you don't have to use MVC to make it work. I think the way you are passing json parameters are wrong. Please check below code and try and do let me know whether it works.
[WebMethod()]
public static string Test(string data)
{
// never gets here
return "hello world";
}
$.ajax({
type: "POST",
url: "ajax.aspx/Test",
data:'{"data":"abc"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response);
}
});
try this
[HttpPost]
public ActionResult Test(string x)
{
// never gets here
return Json(true)
}
$.ajax({
type: "Post",
url: "ajax/Test",
data: {x:'abc'},
dataType: "json",
success: function (data) {
alert("back");
}
});

asp.net page method with jquery and parameter

In my javascript, I have:
var testdate = "{'TheNewDate' : '12/02/2011'}";
$("#mydiv").click(function () {
$.ajax({
type: "POST",
url: "../Pages/Appointments.aspx/GetAppointements",
data: testdate,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFn,
error: errorFn
});
});
In my code behind I have
[WebMethod]
public static string GetAppointements(string DateInput)
{
var t = DateInput;
However, when I click to run the call, I get the error function to activate. When I change the code behind function to public static string GetAppointement() it works. But I guess my goal is to pass a parameter to the code behind. What am I missing?
Thanks.
Your parameter is called DateInput and not TheNewDate, so:
$('#mydiv').click(function () {
$.ajax({
type: 'POST',
url: '../Pages/Appointments.aspx/GetAppointements',
data: JSON.stringify({ dateInput: '12/02/2011' }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: successFn,
error: errorFn
});
});
You should make your JSON data match the parameter name in the web service method.
var testdate = "{'DateInput' : '12/02/2011'}";

calling asmx service using jquery ajax asp.net 4.0

I'm trying to call a sample asmx service using jquery, here is the jquery code
$.ajax({
type: "POST",
url: "/Services/Tasks.asmx/HelloWorld",
data: "{}",
dataType: "json",
contentType: "application/xml; charset=utf-8",
success: function (data) {
alert(data);
}
});
This is not showing any message,code is in asp.net 4.0,
Am I missing any thing?
Edit - I changed the dataType to xml, now success function is working it return following xml
<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">Hello World</string>
I'm using following code to parse xml data and it is showing null in alert
success: function (data) {
edata = $(data).find("string").html();
alert(data);
}
I believe it's because you have the dataType: "json" and it's expecting the response content-type to be the same but XML is being returned. I bet the complete event is being raised but not success.
try
$.ajax({
type: "POST",
url: "/Services/Tasks.asmx/HelloWorld",
data: "{}",
dataType: "json",
contentType: "application/xml; charset=utf-8",
success: function (data) {
alert(data);
},
complete: function (data) {
alert(data);
}
});
UPDATE
I think it's because you're using .html(), you need to use text(). Also i don't know if you meant to do it or not but you have data in your alert, i'm assuming you meant to use edata. The following worked for me:
jQuery.ajax({
type: "POST",
url: "/yourURL",
dataType: "xml",
data: "{}",
contentType: "application/xml; charset=utf-8",
success: function(data) {
edata = $(data).find("string").text();
alert(edata);
}
})
I'd recommend adding the [ScriptService] attribute to your Tasks.asmx class so it will accept and respond in JSON instead of XML. Your client code looks good, but you'll want to take a look at "data.d" instead of "data" in your success handler.
use it.
<script>
alert("aaa");
$.ajax({
type: "POST",
url: "MyService.asmx/HelloWorld",
data: "{}",
dataType: "xml",
contentType: "application/xml; charset=utf-8",
success: function (data) {
alert(data);//data-object xmldocument
edata = $(data).children("string").text();
alert(edata);
}
});
alert("bbb");
</script>
Well, you're stating that the dataType is JSON, but the contentType is XML. Try
contentType: "application/json; charset=utf-8",
If not, then we'd have to see the asmx code.

Why does this JQuery call to asp.net pagemethod load the whole page?

Here is a snippet of my html:
<input id="btnGetDate" type="submit" value="Get Date" />
<div id="Result"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#btnGetDate").click(function() {
$.ajax({
type: "POST",
url: "Date.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#Result").text(msg.d);
}
});
});
});
</script>
My Page Method id defined as follows:
[System.Web.Services.WebMethod]
public static string GetDate()
{
return DateTime.Now.ToString();
}
When I click the Get Date button, I saw the date flash on the screen for a second, but since the whole page is loading, it disappears and when I view it in firebug, I see it is doing the POST, but quickly disappearing. Any ideas on how to resolve this?
Try returning false from your $("#btnGetDate").click() event handler:
$("#btnGetDate").click(function() {
$.ajax({
type: "POST",
url: "Date.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#Result").text(msg.d);
}
});
return false;
});
karim79's solution will do the job in Internet Explorer - but to make sure that it works in Firefox and other browsers as well, you probably want to add an input argument to the click handler that will take the click event, and stop the event.
$("#btnGetDate").click(function(ev) {
ev.stopPropagation();
$.ajax({
type: "POST",
url: "Date.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#Result").text(msg.d);
}
});
return false;
});

Resources