articles

Home / DeveloperSection / Articles / Ajax Toolkit UpdatePanel Control in ASP.Net

Ajax Toolkit UpdatePanel Control in ASP.Net

Ajax Toolkit UpdatePanel Control in ASP.Net

Pushpendra Singh 24226 03-Dec-2010

Ajax Toolkit UpdatePanel Control in ASP.Net

UpdatePanel control is a central part of ASP.NET AJAX functionality. This 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 needs to be updated.

Syntax:

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

UpdatePanel properties: 

ChildControlsCreated

Gets or sets a value that indicates whether the server control's child control has 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

 Gets or sets the template that defines the content of the UpdatePanel control. You need to place the content of the page that you want to be in the UpdatePanel inside this.

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 asynchronous postbacks.

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 UpdatePanel controls content is updated. Always: Update the content of the UpdatePanel irrespective of any postback. Conditional: Update the content of the UpdatePanel when control triggers associated with this UpdatePanel.

 Example:

Default.aspx

 <%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<%--You need to place content of the page that you want to be in the UpdatePanel inside this--%>
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<%--Triggers is used because The UpdatePanel and ScriptManager knows that only this part of the page has to be updated.--%>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
<div>
<br/><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
      Label2.Text = TextBox1.Text;
    }

 Run the Project 

Ajax Toolkit UpdatePanel Control in ASP.Net

When you click the submit button then text entered in the textbox will show in the label without postback because these controls are inside update panel. The time which is displayed on the page will change when the page will refresh but when you click submit then time will not change because the submit button is inside an update panel and the update panel always does partially postback.


Updated 01-Aug-2020

Leave Comment

Comments

Liked By