Click here to Skip to main content
Click here to Skip to main content

Partial Rendering with Update Progress Bar Using AJAX

By , 29 Mar 2010
Rate this:
Please Sign up or sign in to vote.

Introduction

To improve users' experience based on website performance, we often need to update partial page blocks, that is postback only a part of page rather than posting a complete page back to the server. This type of page rendering is often called partial page rendering and improves the performance drastically. Here in this article, I will be discussing about my demonstration program that is a Contact Form which submits the data to the server without posting back complete web page. Here my database is a simple XML file and whatever user feeds in the form will be saved in there in the XML file.

Using the Code

Here in the demonstration program, I'm using a .dll file ‘Microsoft.Web.Preview.dll’ that has to be added in Bin folder of program to attain the feature of partial page update progress panel. Next is the XML file (Contacts.xml) which resides in a folder ‘db’ with a Web.config file later protests the access to Contacts.xml.

On Default.aspx page, there is the code of Contact Form interface, an UpdateProgress control (for which we added .dll file) and a panel to show submission success. All these are included in UpdatePanel control with setting the property ChildrenAsTriggers=”true”. That means any event fired from any of the included control trigger Asynchronous post back to the server. The show/hide of UpdateProgress control is managed by the code given below:

<script language="javascript" type="text/javascript"> 
var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_initializeRequest(InitializeRequest); 
prm.add_endRequest(EndRequest); 
function InitializeRequest(sender, args) 
{ 
$get(‘formUpdate’).style.display = 'block'; 
} 
function EndRequest(sender, args) 
{ 
$get(‘formUpdate’).style.display = 'none'; 
} 
</script>

In the above code, formUpdate is the ID of UpdateProgress control and there are two functions, the first is called at the initialization of asynchronous postback and the next is when the call ends.

Now I will discuss about the code on the code-behind page. On Submit button click event, I load my XML file in the dataset and then by adding new data row contact information has been written in XML file. The handler function is given below:

protected void btnSubmit_OnClick(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        System.Threading.Thread.Sleep(1200);

        DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("~/db/Contacts.xml"), XmlReadMode.InferSchema);

        DataRow drow = ds.Tables["contact"].NewRow();
        drow["name"] = txtName.Text;
        drow["age"] = txtAge.Text;
        drow["country"] = txtCountry.Text;
        drow["phone"] = txtPhone.Text;
        drow["email"] = txtEmail.Text;
        drow["message"] = txtMessage.Text;
        ds.Tables["contact"].Rows.Add(drow);
        ds.Tables["contact"].WriteXml(Server.MapPath("~/db/Contacts.xml"));

        pnlForm.Visible = false;
        pnlShowSuccess.Visible = true;
    }
}

First of all, the program checks for the validity of page for current request. Then the thread has been paused for 1200 milliseconds, this is the minimum amount of time for which the UpdateProgress control will get shown. You can change it as per your requirement.

Now the XML has been loaded in a dataset and with inferring the schema (you must remember to put a blank row with all contact fields mentioned in XML). A new datarow has been add in the contact table (that is in set of <contact> nodes), all the values filled in by the user are now assigned to relevant fields and then the row has been added in the table and written to XML file. Finally the success message has been shown using a panel.

However, I have used this Ajax enabled update progress panel for a button click event, though it can be used for many other events of different ASPX controls. For example, DropDownList SelectionChanged event, RadioButton or CheckBox CheckedChanged event, LinkButton Click event, etc.

Points to Ponder

The practical stuff is attached as demo. You will easily understand when you see the download files. You must remember that for the above program to work, you must add a blank row in the XML file. Otherwise, the dataset will be unable to infer the schema of table in which you want to add the contact details.

You may also be interested in another article that I wrote, Showing Progress Bar Using jQuery.

Final Words

I hope you find the stuff helpful. Thanks for reading. Good luck!

History

  • 29th March, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Mohd Arshad (Sam)
Software Developer (Senior) Cherisys Technologies, WebStreet.in
India India

Software professional with demonstrated strength in windows-based and web-based software development. Have 4 years of experience with the full software development lifecycle including requirements, design, development, testing/QA, deployment, training & support. Have 1 year experience managing groups, planning and executing implementations. Practical working knowledge of all aspects of IT. Possess strong insight into practical business considerations.



www.cherisys.com
www.webstreet.in
www.codevdo.com
www.bizkut.com
Follow on   Twitter

Comments and Discussions

 
QuestionVery Useful Pinmembershravan.durga.3330-Dec-11 1:04 
QuestionQuick question [modified] Pinmemberlivingsingl9-Apr-10 5:40 
GeneralUse jQuery properly Pinmemberricrodrigues28-Mar-10 22:31 
GeneralRe: Use jQuery properly PinmemberMohd Arshad (Sam)28-Mar-10 23:00 
GeneralRe: Use jQuery properly [modified] Pinmemberricrodrigues29-Mar-10 0:04 
GeneralRe: Use jQuery properly PinmemberJ a a n s29-Mar-10 0:42 
GeneralRe: Use jQuery properly PinmemberMohd Arshad (Sam)29-Mar-10 3:13 
GeneralRe: Use jQuery properly Pinmemberricrodrigues29-Mar-10 3:40 
GeneralRe: Use jQuery properly PinmemberMohd Arshad (Sam)29-Mar-10 5:07 
GeneralRe: Use jQuery properly Pinmemberricrodrigues29-Mar-10 6:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 29 Mar 2010
Article Copyright 2010 by Mohd Arshad (Sam)
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid