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

Ajax Toolkit UpdatePanel Control in ASP.Net

Posted by  Pushpendra Singh
on    December-03-2010 16:34 PM

AJAX AJAX 
Ratings:
0 Comment(s)
 6233  View(s)
Rate this:

Ajax Toolkit UpdatePanel Control in ASP.Net

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.

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 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

 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.

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 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

 

AjaxControl Toolkit UpdatePanel Control in ASP.Net

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
















Recent Activities


Sumit Kesarwani added new Question What is the Vector class in java?   yesterday

Anchal Kesharwani added new Blog JSON Syntax   8 days ago

Anchal Kesharwani added new Article How to Send Mail in Node.JS   8 days ago

Top Contributors

Don't want to miss updates? Please click the below button!