Partial Page Rendering

Partial page rendering is one of the very amazing concepts by Microsoft Ajax extension. In this article we will discuss one very common and real time scenario for which Partial page rendering is very useful. Whenever there is need to render a server side control for Ajax web application, partial page rendering is very good option.

For example, in my ICallback articles we have discussed about the Ajaxifying the grid view; but consider following scenario,
Grid view contains details of the all employees of an organization, and then in that case employees are categories in various ways,

• Depending on the role of an employee.

• Depending on the CTC of an employee.

• Depending on the City of an employee.

• Depending on the Department of an employee.

And many more, then in such case if we are using same Gridview to display all employees, and along with it, we need to provide an instant update mechanism in the grid; but for each category of employee, details which need to be edited are different and may contain information which is not part of the grid, grid is containing only common information.

Partial page rendering is a very good option for such case; we don’t need to handle anything on client side other than managing partial rendering calls. For this we will use Microsoft Ajax extension, i.e. Update Panel, Update progress and script manager.
Now if we are going to user different web user controls for different purposes then this approach is more effective.

We will consider following case:

• We have main page which contains a grid.

• On click of edit image in grid column, user should be able to edit the details of that particular employee.

• Depending on the employee id, display information to edit.

• This may contain more than one table to fetch and update the data.

• To make it more modular use Web user controls for data update.

To avoid database dependency we will use Data Tables as properties, and will use sessions to maintain different data tables.

Steps for the code development are as follows.

1. Design a Grid View the way we want it to be displayed.
2. Develop user controls to handle various types of users, and make sure all of them work fine. Here we can keep the login on the same page.
3. Add an update panel in the Design, this update panel contains all required user controls in different Panels and web user controls; visibility of each panel and web user control is set to false.
4. Add one server side Button on which we will update the update panel, add this button as a trigger for update panel.
5. On click event of the button contains code to handle update events.

Develop Aspx Page

Form tag of aspx page will be as below
<br /><form id="form1" runat="server"> <br /><asp:scriptmanager id="ScriptManager1" runat="server"> <br /><scripts> <br /><asp:scriptreference path="JScript.js"> <br /></scripts> <br /></asp:ScriptManager> <br /><div> <br /><%--PUT YOUR GRIDVIEW HERE--%> <br /><div id="divLayer" class="divLayer"></div> <br /><asp:button id="btnClick" text="Click Me" runat="server" onclick="click_Click" cssclass="sethidden"> <br /><asp:updatepanel id="UpdatePanel1" runat="server"> <br /><triggers> <br /><asp:asyncpostbacktrigger controlid="btnClick"> <br /></triggers> <br /><contenttemplate> <br /><asp:hiddenfield id="hdnValue" runat="server"> <br /><%--PUT YOUR USER CONTROLS HERE WITH VISIBILITY SET TO FALSE--%> <br /><uc1:teamleader id="TeamLeader1" runat="server" visible="false"> <br /></contenttemplate> <br /></asp:UpdatePanel> <br /></div> <br /></form> <br />

btnClick is set hidden using Style .

In above logic we have added Triggers for update panel, there can be more than one trigger for the update panel. These triggers are responsible to send Post back of update panel, i.e. Partial page will go to server side, and server will render only the contents inside the Update panel. asp:AsyncPostBackTrigger represents asynchrous post back.

<br /><asp:button id="btnClick" text="Click Me" runat="server" onclick="click_Click"> <br />

We are going to write server side code on the click event of above button, and changes will reflect in update panel. So if we have more than one trigger for an update panel, we can handle different events very much effectively. Also if our update panel contains some user control or some button to update server side data, it gets updated asynchronously , for that we don’t need to put extra code.
E.g. if we have a web user control in Update panel, and that update panel contains, some server side buttons, click event of all such elements get handled automatically.

In the demo code we have used one static class, which has public static table; this is used just to avoid database connection.
We have following tables in the static class.
1. DT – General table containing general (Common) information about the Employees
2. Manager – Table containing information about the employees who are managers.
3. TeamLeader – Table contains information about the employees who are Team leader.

In Demo code we have a GridView which contains common information about employees. Thus on page load we have following code.

<br />GridView1.DataSource = StaticClass.DT; <br />GridView1.DataBind(); <br />


Our girdview on aspx is

<br /><asp:gridview id="GridView1" runat="server" onrowdatabound="GridView1_RowDataBound"> <br /><columns> <br /><asp:templatefield> <br /><itemtemplate> <br /><asp:image runat="server" id="Image1"> <br /></itemtemplate> <br /></asp:TemplateField> <br /></columns> <br /></asp:GridView> <br />

Now onclick of Image1 we need to fire trigger of an update panel i.e. click event of btnClick. So onlick of Image1 we have to do following tasks
Set the employee id in hdnValue, this field is part of an update panel,thus we can read it’s value on server side, for partial page rendering. And call click event of btnClick.
For this we use server side GridView1_RowDataBound event.

<br />protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) <br />{ <br />if (e.Row.RowType == DataControlRowType.DataRow) <br />{ <br />if (((Image)e.Row.FindControl("Image1")) != null) <br />{ <br />Image img = (Image)e.Row.FindControl("Image1"); <br />img.ID = e.Row.Cells[1].Text; <br />img.Attributes.Add("onclick", "window.document.getElementById('" + hdnValue.ClientID + "').value=this.id; window.document.getElementById('" + btnClick.ClientID + "').click()"); <br />} <br />} <br />} <br />

So on click of Image1 in grid, we will fire AsyncPostBack to server. In above code check img.ID = e.Row.Cells[1].Text; this line of code will append empId for DT, to the image id so that we can assing the image id to hiddenField on client side. If we split the img.ID on client side on “_”, the last element of an array will be EmpId.
Check the schema of DT for this.

Up to this point we are able to send Asynchronous Post back request to server; after this we will develop logic to change the contents in Update panel, for the understanding purpose, we will only hide and show the controls in update panel and fetch employee data from table and display it in controls. Further we can make it more and more complex depending on the requirement.

In code Update panel contains one Panel and Two web user control, panel will take care of an employee who is manager and web user controls are used for other types of employees.

btnClick ‘s server side click event is used to hide and show the data.

<br />protected void click_Click(object sender, EventArgs e) <br />{ <br />string[] clientData = hdnValue.Value.ToString().Split('_'); <br />//clientData[clientData.Length - 1] contains id of an Employee; <br />DataRow[] dataRow = StaticClass.DT.Select("EmpId ='" + clientData[clientData.Length - 1] + "'"); <br />if (dataRow[0]["Designation"].ToString().ToUpper() == "MANAGER") <br />{ <br />setManagerData(clientData[clientData.Length - 1]); <br />//Above function take care of displaying Manager Details <br />Panel1.Visible = true; <br />TeamLeader1.Visible = false; <br />Others1.Visible = false; <br />} <br />else if (dataRow[0]["Designation"].ToString().ToUpper() == "TEAM LEADER") <br />{ <br />Panel1.Visible = false; <br />TeamLeader1.Visible = true; <br />Others1.Visible = false; <br />} <br />else <br />{ <br />Panel1.Visible = false; <br />TeamLeader1.Visible = false; <br />Others1.Visible = true; <br /><br />} <br /><br /><br />private void setManagerData(string id) <br />{ <br />hdnValue.Value = id; <br />DataRow[] dtRows = StaticClass.Manager.Select("EmpId =" + id); <br />txtSalutation.Text = dtRows[0]["Salutation"].ToString(); <br />txtPrefferedName.Text = dtRows[0]["PrefferedName"].ToString(); <br />txtFirstName.Text = dtRows[0]["FirstName"].ToString(); <br />txtMiddleName.Text = dtRows[0]["MiddleName"].ToString(); <br />//similarly add otherdetials <br />} <br />

This panel contains Update button, update details is handled totally on serverside.
This is how we will handle Page events of page. Now in click_Click event, TeamLeader1 is an instance of TeamLeader web usercontrol in UpdatePanel. TeamLeader web user control contains all server side logic to update the details of TeamLeader. To access value of hidden field of parent page we will use following line in page load event of web user control.

<br />HiddenField hdn = (HiddenField)Page.FindControl("hdnValue"); <br />//Page.FindControl("hdnValue"); return control of Parent Page. <br />

We have handled all update and retrive events on server side, upto this we have used javascript just to set the value of hidden field.

Now we will discuss about

<br /><asp:scriptmanager id="ScriptManager1" runat="server"> <br /><scripts> <br /><asp:scriptreference path="JScript.js"> <br /></scripts> <br /></asp:ScriptManager> <br />

Script manager is required to execute Asynchronous Post back, whenever we use Update Panel we need Scrpt manger, Scriptmanager is also used to add script refrences as above.

We can handle various client side events related to Partial Postback and Update panels, some of them we have used in Jscript.js file.


PageLoad is one such event in which we can initialize some functions and assign client side events. Page load event is as below, events which can be used, but not required for this demo are commented in the Jscript files. There are many such events Microsoft has provided.

PageLoad() event is as below

<br />function pageLoad() <br />{ <br />var RequestManager = Sys.WebForms.PageRequestManager.getInstance(); <br />RequestManager.add_beginRequest(OnBeginRequest); //RequestManager.remove_beginRequest(Handler); <br />RequestManager.add_endRequest(OnEndRequest); //RequestManager.remove_endRequest(Handler) <br /><br />//RequestManager.add_initializeRequest(Handler //RequestManager.remove_initializeRequest(Handler); <br />//RequestManager.add_pageLoaded(Handler //RequestManager.remove_pageLoaded(Handler) <br />//RequestManager.add_pageLoading(Handler //RequestManager.remove_pageLoading(Handler); <br /><br />} <br />

OnBeginRequest and OnEndRequest are functions which get called on perticular event. Here we haved used them to display a Processing Div tag, irrespective of update panel.
Update Process is one of the control provided by Microsoft Ajax1.0, which does the same thing but we need it to associate with UpdatePanel., we are not going into details, of it.

<br /><div id="divLayer" class="divLayer" style="z-index:1000;"></div> <br />

z-index of this div tag is set very high so that whenever it is visible, it will be above all objects of the page.
Just check JavaScript used for it.

<br />function OnBeginRequest(sender, args) <br />{ <br />displayDiv('visible', 'divLayer', ' processing...'); <br />//Here we can write logic to display processing, or any additional <br />//operation if any. <br />} <br /><br />function OnEndRequest(sender, args) <br />{ <br />displayDiv('hidden', 'divLayer', ''); <br />} <br /><br />function displayDiv(state, elem, msg) <br />{ <br />var adiv = $get(elem); <br />adiv.style.visibility = state; <br />adiv.innerHTML = msg; <br />}<br />

Now this div tag will be visible when ever partial page render request goes to server, whether request is because of elements inside the update panel or out side the update panel. Many times such approch is useful, because , we might use partial page renderring many times on the page, with more than one update panel also.

args contains arguments, please debug the JavaScipt using breakpoint,just like c#.net, and check the atributes. There are many useful attributes, we can make use of.


Conclusion of this article
Many times it is useful to develop code using concept of partial page rendering, which can excel the development time, and managing code becomes more easy, no need to write extra JavaScript to handle Ajax requests.