ASP.Net Webmethod with HTTP Post
ASP.Net Webmethod with HTTP Post
I am using ASP.net 3.5. A call to a Webmethod using JQuery returns valid JSON data. However when I call the same webmethod to populate a html table using the datatables.net JQuery plugin, I get back the entire html of the page.
Below is the code:
[code]
_
Public Shared Function GetData() As String
Dim a As String = "{""aaData"": [['Trident','Internet Explorer 4.0']]}"
Return a
End Function
[/code]
**Successful JQuery call:**
[code]
$("#Result").click(function() {
$.ajax({
type: "POST",
url: "Default2.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// Replace the div's content with the page method's return.
$("#Result").text(msg.d);
}
});
});
});
[/code]
**Unsuccessful JQuery call:**
[code]
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Default2.aspx/GetDate",
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
});
[/code]
Any thoughts on why the second call returns html? I tried adding contentType: "application/json; charset=utf-8", to the second ajax call. I get an error.
Below is the code:
[code]
_
Public Shared Function GetData() As String
Dim a As String = "{""aaData"": [['Trident','Internet Explorer 4.0']]}"
Return a
End Function
[/code]
**Successful JQuery call:**
[code]
$("#Result").click(function() {
$.ajax({
type: "POST",
url: "Default2.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// Replace the div's content with the page method's return.
$("#Result").text(msg.d);
}
});
});
});
[/code]
**Unsuccessful JQuery call:**
[code]
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Default2.aspx/GetDate",
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
});
[/code]
Any thoughts on why the second call returns html? I tried adding contentType: "application/json; charset=utf-8", to the second ajax call. I get an error.
This discussion has been closed.
Replies
I think the principle of what you are doing is correct (as can be seen in http://datatables.net/examples/server_side/post.html ) - but obviously something is going wrong somewhere. I'm not entirely clear on what the issue is though - could you perhaps elaborate a little? What is the server passing back for example? It's doing everything required by server-side processing is it? What error is it you are getting? I presume the server-side method is returning the expected JSON format? Firebug will help for determining this.
Regards,
Allan
[code]
"sAjaxSource": "server_processing.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} )
}
[/code]
For the "server_processing.php" file, take the example there:
http://www.datatables.net/examples/data_sources/server_side.html
Change it for your needs and replace $_GET with $_POST
@NJDave71: I'm afraid I don't know .NET at all, but as long as the method returns the JSON that DataTables is expecting ( http://datatables.net/usage/server-side ) then there shouldn't be a problem.
Allan
VB.NET Serializes JSON and wraps everything inside "d' I am using jquery-json (http://code.google.com/p/jquery-json/). so I can return aaData.
partial code:
[code]
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url": sSource,
"data": "{date: '" + $("#txtdate").val() + "', job: '" + $("#txtjob").val() + "' }",
"success":
function (data) {
var json = $.evalJSON(data.d);
fnCallback(json);
}
});
}
[/code]
The above code populates the table and looks great. These extra steps only apply to Web Method.
Allan