Use UpdatePanel controls to quickly ajaxify your existing Asp.NET code

When we decided that we are going to use Atlas in development of the new version of reBlogger we’ve already had 3 versions of that application after us. What we were looking for was to improve the “admin” area of application with ajax (atlas, better to say), but the idea of rewriting all that code over was quite terrifying.

Luckily, atlas:UpdatePanel control allowed us to make our application “do it’s thing” without rewriting all from the scratch.
Yes, update panel with it’s partial rendering concept is not THE BEST way performance-wise, but in most of cases if you apply it correctly it works like a charm…

So, here is a brief example of one of the functionality we were able to do without postbacks (page refreshing itself) with altas.

We had just a normal datagrid with list of blogs that reBlogger is “reading” every day. Alongside each blog there was a “Delete” button. What we wanted is that when user deletes a blog is for that blog to be deleted and datagrid refreshes without page flashing/refreshing. Same goes for paging and sorting of the datagrid. While that operation was happening, we wanted a little progress gif to display (  Loading Image  ).

So after setting up the web.config file for atlas (you can download the atlas control toolkit, it has an example web.config file which you can use to start out), we modified the .aspx page that contained that particular datagrid. Here are the steps you need to do :

1. In between head tags (we put it right under the title tag), you need to register atlas scripts. You do that by pasting following code :

<atlas:ScriptManager runat=”server” ID=”scriptManager2″ EnablePartialRendering=”true”>
</atlas:ScriptManager>

Make sure you have the EnablePartialRendering attribute set to true! 2. Next thing we’ve done is surround our datagrid with the atlas update panel tag

<atlas:UpdatePanel ID=”up_GridBlogs” runat=”server” Mode=”Conditional”>
… here goes the old data grid code …
</atlas:UpdatePanel>3. Last thing you need to do is add the atlas:UpdateProgress control. That control will display the “loading…” image when user presses “delete” button. What is really cool about this control is that it is damn smart🙂, namely it knows when there is asynchronous operation happening and it displays the image automatically. Then when the asynchronous operation is
over it hides it. Now, that’s the way all programming should be done :)<atlas:UpdateProgress ID=”prgs” runat=”server”>
<ProgressTemplate>
<img id=”add_blog_loading” src=”assets/loading.gif” mce_src=”assets/loading.gif” alt=”” />
loading data, please wait…
</ProgressTemplate>
</atlas:UpdateProgress>

Obviously, inside of the “ProgressTemplate” you’ll put any HTML that you want to be displayed while there asynchronous updating on your page.

Ok, that’s it. Now, since this just saved you 4 hours of coding today, turn off your computer and go to see a movie!😉


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


4 Responses to “Use UpdatePanel controls to quickly ajaxify your existing Asp.NET code”

  1. Tarun Kohli Says:

    Mark,
    This is great!! A trivial remark — you would need tag to wrap the datagrid in the UpdatePanel tag.

  2. codingatlas Says:

    Hi Tarun,

    I need to edit this post (it’s the last one I have to fix🙂. At the time when I wrote this, I didn’t post the whole zipped example along with posts and the code is inside the post as you can see… I hope it’ll be done sometime this week.

    Thanks for you feedback,
    Ivan

  3. Zeeshan Umar Says:

    Nice article, you have done a wonderful job.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: