Partial Rendering

Partial Rendering Using Update Panel

Q) How to enable partial rendering with the Ajax UpdatePanel?
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 toClick.






<!-- 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 ofUpdatePanel.



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.

















No comments:
  










































        

      









Subscribe to:
Posts (Atom)