Ajax using .Net and jQuery
I am not a fan of the classic method of implementing ajax in .net – scriptmanagers and updatepanels. The load on the front end is pretty big (100kb+), especially considering local bandwidth restrictions and challenges. So I set out to find a better way as one does when one feels that something is not quite right.
So it turns out that jQuery comes to the rescue – again.
<div id="clickme2">whats the time? (using a webservice)</div>
<div id="result" style="border:1px solid red;padding:5px;">nothing yet</div>
<script src="/js/v4/jquery.132.min.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
function AjaxSucceeded(result) {$(‘#result’).html("good " + result.d);}
function AjaxFailed(result) {$(‘#result’).html("bad " + result.d);}
function AjaxMethod(serviceFn, paramArray, successFn, errorFn) {
var paramList = ”;
if (paramArray.length > 0) {
for (var i = 0; i < paramArray.length; i += 2) { if (paramList.length > 0) paramList += ‘,’;
paramList += ‘"’ + paramArray[i] + ‘":"’ + paramArray[i + 1] + ‘"’;
}
}
paramList = ‘{‘ + paramList + ‘}’;
$.ajax({
type: "POST",
url: serviceFn,
contentType: "application/json; charset=utf-8",
data: paramList,
dataType: "json",
success: successFn,
error: errorFn
})
;}
$(document).ready(function() {
$(‘#clickme2′).click(function() { AjaxMethod("/webservices/webservice.asmx/GetDate", [], AjaxSucceeded, AjaxFailed); });
$(‘#clickme1′).click(function() { AjaxMethod(window.location.pathname + "/GetDate", [], AjaxSucceeded, AjaxFailed); });
});
// ]]></script>
Using a webservice (clickme2 event):
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService
{
[WebMethod()]
public string GetDate()
{
return DateTime.Now.ToLocalTime().ToString();
}
}
And the code behind (clickme1 event)::
public static string GetDate()
{
return DateTime.Now.ToLocalTime().ToString();
}
And there you go – ajax functionality without the bloat. This code has yet to make it into the harsh light of a production environment, but I have successfully used it to return not just one value, but xml data too (see example below), which opens up huge possibilities for front end goodness. The method below makes use of caching which increases performance hugely, but that’s a topic for another day.
var output = "";
$(result.d).find(‘item’).each(function() {
var title= $(this).attr(‘title’);
var link= $(this).find(‘link’).text();
output += "
<div>" + title + " : " + title+ " : " + link + "</div>
";
});
$(‘#result’).html(output);
}
$(document).ready(function() {
$(‘#clickme3′).click(function() { AjaxMethod(window.location.pathname + "/GetXML", ["url", "http://davidrussellr.wordpress.com/feed/", "cachename", "test2"], ShowMyPosts, AjaxFailed); });
});
And the code behind:
public static string GetXML(string url, string cachename)
{
XmlDocument xmlDoc = FetchXML.ReturnXmlDoc(url, cachename);
return xmlDoc.InnerXml;
}
Developer by day, husband and dad by night and dreaming about sport inbetween.
