<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
<div class="ArticleTitle"><h1>UpdatePanel Control</h1></div>
<div class="ArticleContents">
UpdatePanel control is a central part of ASP.NET AJAX functionality. It is used with <a href="scriptmanager.aspx">ScriptManager</a> control to enable partial rendering of the page. You must be aware that partial page rendering reduces the need for synchronous postbacks and complete page updates when a part of the page need to be updated.
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
<div class="ArticleContents">
<p>There are bunch of properties and method associated with UpdatePanel control but I am going to show few properties that are oftenly used.</p></div>
<table width="98%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
<tr>
    <td class="DemoCP">ChildControlsCreated</td>
    <td>
        Gets or sets a value that indicates whether the server control's child control have been created.
    </td>
</tr>
<tr>
    <td class="DemoCP">ChildrenAsTriggers</td>
    <td>
        Gets or sets a value that indicates whether postback from immediate child controls of an UpdatePanel control updates the panel's content.
    </td>
</tr>
<tr>
    <td class="DemoCP">ClientID</td>
    <td>
        Gets the server control identifier generated by ASP.NET
    </td>
</tr>
<tr>
    <td class="DemoCP">ContentTemplate</td>
    <td>
        This is the must use property of the UpdatePanel control. Gets or sets the template that defines the content of the UpdatePanel control. You need to place content of the page that you want to be in the UpdatePanel inside this.
    </td>
</tr>
<tr>
    <td class="DemoCP">EnableTheming</td>
    <td>
        Gets or sets a value that indicates whether themes apply to this control.
    </td>
</tr>
<tr>
    <td class="DemoCP">EnableViewState</td>
    <td>
        Gets or sets a value (true/false) that indicates whether the server control persists its and its child control view state.
    </td>
</tr>
<tr>
    <td class="DemoCP">IsInPartialRendering</td>
    <td>
        Gets or sets a value (true/false) that indicates whether UpdatePanel control is being updated as a result of an asynchornous postbacks.
    </td>
</tr>
<tr>
    <td class="DemoCP">RenderMode</td>
    <td>
        Gets or sets a value (Block/Inline) that indicates whether content is enclosed with HTML div (block) or span (inline).
    </td>
</tr>
<tr>
    <td class="DemoCP">Triggers</td>
    <td>
        Gets an UpdatePanelTriggerCollection object that contains AsyncPostBackTrigger and PostBackTrigger objects that were registered for the UpdatePanel control.
    </td>
</tr>
<tr>
    <td class="DemoCP">UpdateMode</td>
    <td>
        Gets or sets a value (Always/Conditional) that indicates when an UpdatePanel controls content is updated. <b>Always:</b> Update the content of the UpdatePanel irrespective any postback. <b>Conditional:</b> Update the content of the UpdatePanel when control triggers associated with this UpdatePanel.
        
    </td>
</tr>
</table>
<!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle">
                    DEMO : UpdatePanel 
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/ajax/updatepanel.aspx" target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:UpdatePanel runat="Server" ID="UpdatePanel1" UpdateMode="Conditional">
                        <ContentTemplate>
                        
                            <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Caption="Try using Edit/Delete and notice whole page is not refreshing"
                                AllowPaging="True" AllowSorting="True" AutoGenerateEditButton="true" DataKeyNames="AutoID"
                                PageSize="5" CellPadding="2" CellSpacing="1" EmptyDataText="<b>Sorry, There are no records to show in GridView. Try Inserting records from <a href='/tutorials/controls/formview.aspx'>FormView Control</a> tutorial.</b>">
                                <Columns>
                                    <asp:TemplateField HeaderText="Delete?">
                                        <ItemTemplate>
                                            <asp:LinkButton ID="lnk1" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to Delete?')"
                                                CommandName="Delete"></asp:LinkButton>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                            
                            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:ConnStr %>'
                                SelectCommand="Select * FROM SampleForTutorials ORDER BY [Name]" DeleteCommand="Delete FROM SampleForTutorials WHERE AutoID = @AutoID"
                                UpdateCommand="UPDATE SampleForTutorials SET Name = @Name, Address = @Address, Phone = @Phone, City = @City WHERE AutoID = @AutoID">
                                <DeleteParameters>
                                    <asp:Parameter Name="AutoID" />
                                </DeleteParameters>
                                <UpdateParameters>
                                    <asp:Parameter Name="AutoID" Type="Int32" />
                                    <asp:Parameter Name="Name" Type="string" Size="50" />
                                    <asp:Parameter Name="Address" Type="string" Size="200" />
                                    <asp:Parameter Name="Phone" Type="string" />
                                    <asp:Parameter Name="City" Type="string" Size="20" />
                                </UpdateParameters>
                            </asp:SqlDataSource>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                     <asp:UpdateProgress ID="Up1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1">
                        <ProgressTemplate>
                            <span style="background-color:Yellow;"><img src="/images/wait.gif" alt="Please wait" /> Please wait ...</span>
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                </td>
                <td>
                    <a href="../../userfiles/samples/dotnetfundaaspajax.zip">Download Sample project with Source Code</a>
                </td>
            </tr>
            <tr>
                <td colspan="2">
<pre>
<b>// Update Panel</b>
&lt;asp:UpdatePanel runat="Server" ID="UpdatePanel1" UpdateMode="Conditional"&gt;
    <b>// Content Template, You can put whatever content you want, 
    // any event fires inside this block will update this block content only </b>
    &lt;ContentTemplate&gt;
    
        &lt;asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Caption="Try using Edit/Delete and notice whole page is not refreshing"
            AllowPaging="True" AllowSorting="True" AutoGenerateEditButton="true" DataKeyNames="AutoID"
            PageSize="5" CellPadding="2" CellSpacing="1" EmptyDataText="&lt;b&gt;Sorry, There are no records to show in GridView. &lt;/b&gt;"&gt;
            &lt;Columns&gt;
                &lt;asp:TemplateField HeaderText="Delete?"&gt;
                    &lt;ItemTemplate&gt;
                        &lt;asp:LinkButton ID="lnk1" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to Delete?')"
                            CommandName="Delete"&gt;&lt;/asp:LinkButton&gt;
                    &lt;/ItemTemplate&gt;
                &lt;/asp:TemplateField&gt;
            &lt;/Columns&gt;
        &lt;/asp:GridView&gt;
        
       <b> // SqlDataSource, the datasource of the GridView</b>
        &lt;asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='&lt;%$ ConnectionStrings:ConnStr %&gt;'
            SelectCommand="Select * FROM SampleForTutorials ORDER BY [Name]" DeleteCommand="Delete FROM SampleForTutorials WHERE AutoID = @AutoID"
            UpdateCommand="UPDATE SampleForTutorials SET Name = @Name, Address = @Address, Phone = @Phone, City = @City WHERE AutoID = @AutoID"&gt;
            &lt;DeleteParameters&gt;
                &lt;asp:Parameter Name="AutoID" /&gt;
            &lt;/DeleteParameters&gt;
            &lt;UpdateParameters&gt;
                &lt;asp:Parameter Name="AutoID" Type="Int32" /&gt;
                &lt;asp:Parameter Name="Name" Type="string" Size="50" /&gt;
                &lt;asp:Parameter Name="Address" Type="string" Size="200" /&gt;
                &lt;asp:Parameter Name="Phone" Type="string" /&gt;
                &lt;asp:Parameter Name="City" Type="string" Size="20" /&gt;
            &lt;/UpdateParameters&gt;
        &lt;/asp:SqlDataSource&gt;
        
    &lt;/ContentTemplate&gt;
&lt;/asp:UpdatePanel&gt;</pre>                
                </td>
            </tr>
</table>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

Go Top