In the process of converting a page from normal postbacks to AJAX-calls (using JavaScript to load/control the UI entirely and use ASP.Net strictly as a backend), I found myself wanting to replace a GridView with a AJAX-sourced dataset.
I currently use DataTables to prettify the GridView, and there exists an option in the API to use AJAX to remotely source the data for the table. The API needs a JSON object returned, although it appears that I can supply a callback for the fnServerData option which would allow me to convert the XML response to the requisite JSON datasource.
“So”, I thought, “I might as well slap together a <WebMethod()> to return the datasource…” and while I’ve written several <WebMethod()> functions in the past, I’ve always added a new ASMX file (with a custom class to drive it) or extended an existing one where it made sense to do so. With this specific page, there is no need to make the datasource for this table accessible outside the context of the page, so I thought I would try to add the <WebMethod()> to code-behind of the ASPX page.
There appear to be several examples on the web of programmers successfully pulling off what I have been pulling my hair out over.
I have followed every example that I can find and none are working for me. I have put together an extremely simple example in the hopes that someone can either point out where I’m going wrong or confirm that ASP.Net 2.0 simply won’t work in this manner.
ASP Markup:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="AJAXText.aspx.vb" Inherits="_AJAXText" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<script type="text/javascript" src='<%=Helpers.ToAbsoluteURL("~/_cs/js/jquery-1.6.4.min.js") %>'></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: window.location.href + "/Hello",
data: {
"What": "World"
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, textStatus, jqXHR) {
$('div').text(textStatus);
},
complete: function (jqXHR, textStatus) {
$('div').text(textStatus);
},
error: function (jqXHR, textStatus, errorThrown) {
$('div').text(textStatus);
}
});
});
</script>
</body>
</html>
Code-Behind:
Imports System.Web.Services
Partial Class _AJAXText
Inherits System.Web.UI.Page
<WebMethod()> _
Public Shared Function Hello(ByVal What As String) As String
Dim msg As String = "Hello, " & What & "!"
Return msg
End Function
End Class
I have tried several little changes to the above, and in every case the AJAX call returns the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<form name="form1" method="post" action="AJAXText.aspx?What=World%2fHello"
id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJOTU4MjMyMzI1ZGQT/2jrJ+cI2ERazl2Hw7l7TI5XiA==" />
</div>
<div></div>
</form>
<script type="text/javascript" src='http://localhost:3719/Maggie/_cs/js/jquery-1.6.4.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: window.location.href + "/Hello",
data: {
"What": "World"
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, textStatus, jqXHR) {
$('div').text(textStatus);
},
complete: function (jqXHR, textStatus) {
$('div').text(textStatus);
},
error: function (jqXHR, textStatus, errorThrown) {
$('div').text(textStatus);
}
});
});
</script>
</body>
</html>
What I expect to be returned is:
<?xml version="1.0" encoding="utf-8"?>
<string>Hello, World!</string>
Does anyone have any ideas:
- What I am doing incorrectly?
- Or is ASP.Net 2.0 is incapable of using a
<WebMethod()>in an ASPX page?
Okay, I finally found the complete answer (and +1 to @TheGeekYouNeed for what turned out to be part of the solution).
ASP.Net 2.0 does not support
WebMethod()in an ASPX page out-of-the-box. There were three steps total (for me) to enable support ofWebMethod()in an ASPX page.Add the following to the
<httpModules>section of the<system.web>section in myweb.config.<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>stringifythe JavaScript object being passed to theWebMethod()(and ergo, props to @TheGeekYouNeed). jQuery will automatically convert a JavaScript object to key/value pairs for the query string. The AJAX Extensions, on the other hand, effectively require that a JavaScript object be stringified into JSON (not parsed into key/value pairs for POST[ing] or GET[ting]) as the HTTP Content-Type header must be set toapplication/json. Since jQuery will not convertdataof typestring, the JavaScript object must first be stringified into JSON. The JSON string can then be passed with impunity to the AJAX Extensions. There’s a lot of information about the stringification being necessary on the web, just search for Invalid JSON primitive. Personally, I thought the best explanation came from Dave Ward over at encosia.com.UPDATE:
I ran into the same problem on my production server (running the .Net 4.0 Framework on IIS7). To correct the problem on the production server, I had to add the following to the web.config under the
<configuration>element: