Get rid of that pesky ASP.Net UpdatePanel
May 11th, 2008Updatepanel is for babies. It’s for tiny-frolickin’-little-tots who can’t tell gaga from googoo but have learnt enough to make a pouty face at mamma when she shakes a finger at them for wetting the bed. That said, I’ve hated and used ASP.Net Updatepanels in my own project. They’re the easiest way to put Ajax in a page, and if there’s a quick requirement and you don’t know crap about javascript, you can use the ASP.Net Updatepanel. If you do that, you will never be able to look a real programmer into the eyes, not at least until you get rid of that pesky updatepanel.
The updatepanel I put up on blogvani.com helped me create a very important feature: the facility to show the mostread and liked posts in a tab without a postback. Whenever the user clicked a tab, the updatepanel would fetch the latest details from the database, and even though that would take something like 4 seconds (F-O-U-R! What was I thinking!), but hey! I got a rich client application.
Okay folks, let’s cut the chase short and get to the point.
How do we get rid of that pesky ASP.Net Updatepanel?
There are handful of ways. You can grit your teeth and go for the all javascript, xmlhttprequest, true Ajax method, use one of the handy javascript libraries like JQuery, or our own ASP.Net Ajax. To implement my updatepanel get rid-get rid solution I used ASP.Net Ajax, and since that’s the only way I know how, that’s what I am going to help you with. 
Use PageMethods
This is the way I’d have preferred, ironically I could never get my Pagemethod to work, though for all that I knew everything was set up correctly (shows ya how much I know). In an ASP.Net Pagemethod, you declare a regular public method in the code file, like so :
[WebMethod]
public string Dosomething()
{
return “done”;
}
Notice the [WebMethod] above the function name? That’s called the WebMethod attribute. It tells ASP.Net that you want to declare a page level web service method, and that it should let you access the method from Javascript too. In this function you can do anything, call your database access code, read a file, whatever!
Then in Javascript you can access this method like so: -
function GetSomethingDone()
{
PageMethods.Dosomething(resultCallback);
}
function resultCallback(result)
{
alert(request);
}
ASP.Net Ajax gives you a handy little object called PageMethods that you can use to call all the functions that you’ve marked [WebMethod] inside your page. At least that’s what the theory is. Does it work? It’s supposed to, but it didn’t work for me no matter how many times I re-examined my syntax.
So what did I do then?
Use A proper Web Service
The beauty of page method is perfect encapsulation. That is, if you need to expose a function that uses stuff that’s local to a page, you don’t need to put it in a different file. All your goodies in a single shelf. No hunting! That’s beautiful for a programmer. My programming luck is legendary but it failed that one time. Try yours and if it works for you; Great!
If it doesn’t work, you’ve can always create a proper web service.
To do this, create a web service using the File–>New file menu. This will show you the ASP.Net new file dialog. Select ‘Web Service’. Two new files will be added to your project. A .asmx file to your selected folder, and a .cs file with the same name in your App_Code folder. I don’t know what you can put in the .asmx file except the declarations, but the .cs file is the place where all your web service functions go. Declare your functions like so: -
[WebMethod]
public string Dosomething()
{
return “done”;
}
You will also have to put the ScriptService attribute on your class to make these functions work with javascript. This is how: -
[System.Web.Script.Services.ScriptService]
public class MyClass
{
//My Code goes here
}
Inside your Javascript, you can call your Webservice method like this.
function GetSomethingDone()
{
MyClass.Dosomething(resultCallback);
}
function resultCallback(result)
{
$get(”myDiv”).InnerHTML = result;
}
In this particular version of resultCallback, I am setting the innerHTML property of a DIV element that I have pre-declared inside my HTML markup. The contents of the DIV will change on the runtime without a postback to whatever is in the result. You can return your new HTML markup in the result variable.
You see how easy it is to get rid of that pesky updatepanel and put in your own, real AJAX?
Tip: To implement this strategy, you’ve got to rely on HTML DIV elements, not ASP.Net controls. Ultimately all ASP.Net controls are converted to HTML equivalents anyway. Even Updatepanels are rendered as DIVs on the browser.
Did you enjoy this article?
