ASP.NET Tutorials
Sheo Narayan

Win Prizes

Social Presence
Like us on Facebook

Silverlight Tutorials | Report a Bug in the Tutorial

UpdatePanel Control

UpdatePanel control is a central part of ASP.NET AJAX functionality. It is used with ScriptManager 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.

There are bunch of properties and method associated with UpdatePanel control but I am going to show few properties that are oftenly used.

ChildControlsCreated Gets or sets a value that indicates whether the server control's child control have been created.
ChildrenAsTriggers Gets or sets a value that indicates whether postback from immediate child controls of an UpdatePanel control updates the panel's content.
ClientID Gets the server control identifier generated by ASP.NET
ContentTemplate 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.
EnableTheming Gets or sets a value that indicates whether themes apply to this control.
EnableViewState Gets or sets a value (true/false) that indicates whether the server control persists its and its child control view state.
IsInPartialRendering Gets or sets a value (true/false) that indicates whether UpdatePanel control is being updated as a result of an asynchornous postbacks.
RenderMode Gets or sets a value (Block/Inline) that indicates whether content is enclosed with HTML div (block) or span (inline).
Triggers Gets an UpdatePanelTriggerCollection object that contains AsyncPostBackTrigger and PostBackTrigger objects that were registered for the UpdatePanel control.
UpdateMode Gets or sets a value (Always/Conditional) that indicates when an UpdatePanel controls content is updated. Always: Update the content of the UpdatePanel irrespective any postback. Conditional: Update the content of the UpdatePanel when control triggers associated with this UpdatePanel.
DEMO : UpdatePanel Show Source Code
Try using Edit/Delete and notice whole page is not refreshing
Edit Delete 19350    
Edit Delete 19352    
Edit Delete 19354    
Edit Delete 19355    
Edit Delete 18055 3137 Laguna Street555-666-0606San Francisco
Download Sample project with Source Code
// Update Panel
<asp:UpdatePanel runat="Server" ID="UpdatePanel1" UpdateMode="Conditional">
    // Content Template, You can put whatever content you want, 
    // any event fires inside this block will update this block content only 
        <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. </b>">
                <asp:TemplateField HeaderText="Delete?">
                        <asp:LinkButton ID="lnk1" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to Delete?')"
        // SqlDataSource, the datasource of the 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">
                <asp:Parameter Name="AutoID" />
                <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" />