Partial Page Rendering

Partial Page Rendering

Partial-page rendering is a concept of rendering only a portion of a web page to avoid complete page refreshes and improve the user experience. It can be achieved using Microsoft ASP.NET Ajax without writing any client scripts. It is actually made possible through the interaction of the server controls with the Microsoft Ajax Client Library. The page updates are taken care of automatically by the client code injected into the server controls.
The communication between the server controls and the Microsoft Ajax Library for asynchronous postback is taken care of internally by the server control. In addition, the server controls invoke the appropriate client code that corresponds to a specific type of a browser with the help of the Microsoft Ajax Library, thus solving the compatibility issues with the client browser.

Benefits of Partial Page Rendering

·         Improves user experience with web pages that behave more like a traditional client application.

·         Improves the responsiveness upon user actions on a web page.

·         Reduces complete page refreshes and makes only portions of the web page post back to avoid page flickering.

·         Enables client-server communication without writing client scripts.

·         Eliminates writing browser-compatible code.

UpdatePanel Server Control

This control is responsible for enabling partial-page rendering in a web page, thus enhancing the richness of the user interface and improving the performance and responsiveness.

Here is a simple example that illustrates how to display the current date of the server on a Label control when you click on a Button control in the web page.

In the Page_Load event of this web page, assign the current date to the Label control that we just created. The name of the Label control in our example is Label1.

protected void Page_Load(object sender, EventArgs e)

{

            this.Label1.Text = DateTime.Now.ToString();

}

In the button click event, assign the current date to the Label control as stated below.

protected void Button1_Click(object sender, EventArgs e)

{

            this.Label1.Text = DateTime.Now.ToString();

}

When you execute this application in the web browser, the current date and time are displayed. Upon the button click, the page is posted back to the server, and the latest date and time are rendered to the Label control.

In the preceding example, we have demonstrated a traditional ASP.NET page behavior, that is, the entire web page being posted back. Using UpdatePanelcontrol can make things simpler. In the same web page, drag and drop anUpdatePanelcontrol from the toolbox. Now, include a Label and Button control inside this UpdatePanelcontrol, and have the same code in the page load and button click events, as demonstrated earlier.

Figure 1 illustrates the UpdatePanel control in design time with a Label and Button control placed in it.

Figure 1

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

            <br />

            <br />

            <asp:Button ID="Button1" runat="server" Text="Button" Width="71px"

                onclick="Button1_Click" />

        </ContentTemplate>

    </asp:UpdatePanel>

   

</asp:Content>

In the preceding markup, apart from the UpdatePanel control, a ScriptManager control also has been placed. This is done to support partial-page rendering. The ScriptManager control keeps track of all the UpdatePanel controls on the page and its triggers. Also it determines the portions of the page that have to be rendered as a result of an asynchronous postback operation. Figure 2 shows the result.

Figure 2

When the Button control is clicked, an updated date and time rendered on the page without any postback at all. The Label control holds the updated date and time of the server. During the execution of the button click event, the entire page is not posted back. Rather, only the portion of the page holding the UpdatePanel is posted back without any flickering.

ContentTemplate

The content of the UpdatePanel is declared in the ContentTemplate tag of the UpdatePanel. Any content defined in this tag will be posted back to the server asynchronously. In the preceding example, we have a Label and a Button control placed inside it at design time. In fact, this can even be done programmatically. All the controls inside the ContentTemplate tag are considered to be child controls.

The UpdatePanel works on an asynchronous postback operation, which the ScriptManager control intercepts by replacing the traditional postback. Internally during the postback operation, the page updates are governed by injecting JavaScript on the UpdatePanel control automatically.

The Render Modes of the UpdatePanelControl

The content in UpdatePanel is rendered to the page in <div> or <span> tags. The RenderMode property determines to which tag the content is rendered. The default setting for this property is Block, meaning that it renders to a <div> tag. The other option is the Inline setting, which renders the content to a <span> tag.

UpdateProgress Control

The UpdateProgress control of the ASP.NET Ajax extensions framework library can be used to display the progress status of one or more UpdatePanel controls when using partial-page rendering in an Ajax-enabled ASP.NET web page. You can use this control, together with the UpdatePanel control, to provide a visual feedback to the user, such as displaying the progress status of partial-page updates in an asynchronous mode of operation in an Ajax-enabled web application. You can even use your own template to display the progress status on such an operation in your user interface.

Example Listing and screen shot is given below.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

   

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

            <asp:UpdateProgress ID="UpdateProgress1" runat="server">

            <ProgressTemplate>

            <img src = "img/imgloader.gif" alt = "Please Wait ..." />

            </ProgressTemplate>

            </asp:UpdateProgress>

            <br />

            <br />

            <asp:Button ID="Button1" runat="server" Text="Button" Width="71px"

                onclick="Button1_Click" />

        </ContentTemplate>

    </asp:UpdatePanel>

   

</asp:Content>

Add the following code in the Button Click event

protected void Button1_Click(object sender, EventArgs e)

        {

            System.Threading.Thread.Sleep(3000);

            Label1.Text = DateTime.Now.ToString();

        }

Figure 3 illustrates the result of UpdateProgress.

Figure 3