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

Tagged as

How to enable partial rendering with the AJAX UpdatePanel

, 19 Sep 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
UpdatePanel tutorial.

Question

Q) How to enable partial rendering with the Ajax UpdatePanel?

Answer

When you use any server side control that do PostBack whole page get refresh.

Some time you want only part of the page get refresh instead of refreshing complete page that avoid flickering of the page and only part of the page flicker call partial rendering.

You can enable partial rendering using ajax UpdatePanel control.

Enabling partial rendering on page is two step process.

Setp1 Drag and drop ScriptManager control on the page inside from tag.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    
    </div>
    </form>
</body>
</html> 

In case of master page if you want script manager control to affect all the page using master page you can drag and drop script manager on master page inside from tag

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="UpdatePanelDemo.SiteMaster" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>  

If you want to restrict ScriptManager user to page only you can simply drag and drop the control on the page inside body content.

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

Setp2 Add the section that you want to partial rendering inside the AJAX UpdatePanel ContentTemplate tag. Set the UpdateMode property of ajax panel to Conditional.

Note Update mode property of ajax update panel is by default set to AllWays. Allwasys indicate that ajax panel will update for every PostBack same like PostBack without update panel. If we set it to conditional page will update if following three conditions are true.

1) If a control within the updatepanel causes postback.

2) If a trigger on the updatepanel updates.

3) If someone calls "Update()" on the updatepanel itself.

Condition 1 If a control within the updatepanel causes postback.

I have added two update panel. Both are have update mode set to conditional.

Both update panel contain button and DateTime.Now property inside them.

DateTime.Now give current date and time.

When you click on the button1 indide UpdatePanel1 only that update panel get update himself as that of control within the UpdatePanel is causes PostBack where second update panel datetime remain unaffected.

IF you hit on the UpdatePanel2 update button only UpdatePanel2 DateTime get affected as that of control within the UpdatePanel is causes PostBack.

<!-- Condition1 -->
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
         <%=DateTime.Now %><asp:Button ID="Button1" runat="server" 
             Text="Condition One" />
    </ContentTemplate>
    </asp:UpdatePanel> 
 <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional"  runat="server">
    <ContentTemplate>
        <%=DateTime.Now %><asp:Button ID="Button2" runat="server" 
            Text="Condition One" />
    </ContentTemplate>
    </asp:UpdatePanel> 

Condition 2 If a trigger on the updatepanel updates.

Like ContentTemplate update panel have Triggers tag. Triggers tag define trigger to UpdatePanel.

Inside the Triggers tag we need to define AsyncPostBackTrigger control.

AsyncPostBackTrigger have two property ControlID and EventName.

ControlID define control Id of control that trigger UpdatePanel update.

EventName event name of the control that trigger UpdatePanel update.

Lets put DateTime.Now property inside UpdatePanel , ControlID set to button3 and EventName set to Click.

<!-- Condition2 -->
    <asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
         <%=DateTime.Now %>
    </ContentTemplate>
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:Button ID="Button3" runat="server" Text="Condition Two" /> 

Only the content inside the UpdatePanel3 get updated by clicking on Button3 as trigger on the UpdatePanel updates.

Condition 3 If someone calls "Update()" on the UpdatePanel itself.

Lets Add UpdatePanel4 having DateTime.Now property and button added inside the ContentTemplate of UpdatePanel.

We have notice that on button click inside update panel only the update panel with button click get update because of condition 1.

But now in click event of button click we will set the UpdatePanel1.Update().

<!-- Condition3 -->
    <asp:UpdatePanel ID="UpdatePanel4" UpdateMode="Conditional"  runat="server">
    <ContentTemplate>
        <%=DateTime.Now %>
        <asp:Button ID="Button4" runat="server" Text="Condition Three"
            onclick="Button4_Click" />
    </ContentTemplate>
    </asp:UpdatePanel>
protected void Button4_Click(object sender, EventArgs e)
    {
        UpdatePanel1.Update();
    }

We will observe that both the UpdatePanel1 and UpdatePanel4 content get updated as we call calls "Update()" on the UpdatePanel itself.

License

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

Share

About the Author

Amey K Bhatkar
Web Developer Lionbridge
India India
Amey K Bhatkar, a “Microsoft .Net” Web Developer.
I am programmer by will and profession.
I have completed my MCA in 2011 and join software industry.
Presently I am working with Lion Bridge Technologies in Mumbai - India
Follow on   Twitter   Google+

Comments and Discussions

 
Questioncan we use gridview on the update panel Pinmemberaspnetlearner23-Sep-13 21:26 
GeneralMy vote of 5 Pinmemberaspnetlearner23-Sep-13 21:23 
QuestionThanks Pinmembersrircodeproject23-Sep-13 1:13 

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 | Terms of Use | Mobile
Web04 | 2.8.141030.1 | Last Updated 19 Sep 2013
Article Copyright 2013 by Amey K Bhatkar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid