Partial Rendering with Update Progress Bar Using AJAX

• Download source - 162.39 KB

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

• 29^th March, 2010: Initial post