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 ( ).
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”>
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”>
<img id=”add_blog_loading” src=”assets/loading.gif” mce_src=”assets/loading.gif” alt=”” />
loading data, please wait…
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
“Do you know what your employees are blogging about?”