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?
