In this post, I will explain you how can we show Loading message in asp.net ajax without using Update Progress. Now some one may asked, why do I want to skip Update Progress ?
Well, there can be several reasons for this, fist of all you have to work on every single page, and on every update panel to get the update progress working.
There are basically three methods of meeting this requirement.
- Using Master Pages : A very smart way, but not all of us are using them .. right ?
- Extending Page Class : A little harder but to me it is very elegant way.
- Extending Script Manager : Similar to the page class one, but implementation is comparatively simple.
Before I start with exploring the different approaches let me first create a ground by showing what things will be involve in creating a loading message.
I want the background to be grayed and displayed a simple loading text at the top, for that we need a style sheet, which will apply to the loading message div. Create a stylesheet and call it style.css
Now lets read and understand the following script.
Also, note the that I have break down this script into two part by using comments. First is the declaration and second is definition of the functions.
note: The definition will take place on a seperate JS file where as the declaration need to be made in the page, under body markup. Now we are all set to explore different approaches.
Using Master Pages :
A very simple approach, all you need to do is open your master page and paste the following lines in the head section.
Notice it is the same declaration section which we have discussed above and that’s it you are done. All the content form of your web application should now display loading div on each partial postback.
Extending Page Class :
For this, create a class file and call it ajaxPage and inherit it from System.Web.UI.Page and write the following code.
Well, we have simply extend the System.Web.UI.Page into our own class and override OnLoad function to include the JS file and write the declaration markup.
Now, on the page code behind where you want to implement Loading message change the inherit namespace from System.Web.UI.Page to ajaxPage (make sure you namespace).
Extending Script Manager :
Now instead of extending page class we will extend Script Manager control and for that create a new class file and call it ScrtipManagerExt and write the following code.
Almost the same thing we did in extend page approach, only the implementation will be change. Instead of using the old Script Manager we will use our new one. the include directive and markup will look like as below.
That’s it we are done. I tried to make it simpler and show you every possible way I know of doing this task. Again, any approach selection will be on you and your project type. You can also download the VS 2008 project file.