Updated April 11, 2023
Introduction to ASP.NET UpdatePanel
In the case of current software industry, it is very common expecting from every client, that every time data changes should not be required of page refresh, that means page will be populate suddenly by kind of some internal server-side call, but from the client view it will never come as refreshing the page. ASP.NET update panel is one of the popular control which manages to update only the part of the page not the entire page by using Ajax call, normally ASP.NET has two kinds of ajax controllers, script manager and update panel, update panel is mainly one of the popular one.
Syntax of ASP.NET UpdatePanel
ASP.NET script manager controller or update panel controller both mainly ensuring to do some ajax call in client-side and update panel is one of the key features for ensuring part of the page reloading without page refresh. ASP.NET mainly ensuring to maintain client-side code for Ajax definition, where needs to provide exact URL for executing the same, after that update panel basically communication with back end server-side code, execute the logic, pick up the require or corresponding data and display on the screen without page refreshing.
End-user unable to understand something refreshing or rendering happening in the screen, as page refresh is not there. But the developer needs to ensure on that specific time no actionable button should work, those are required to disable for the user used, as data populating logic already defined in the ajax call.
UpdatePanel mainly uses two kinds of child tags, one is ‘ContentTemplate’ and the other one is ‘Trigger’. Here ‘ContentTemplate’ ensures the parts of HTML code which will render again, and the trigger is ensuring the event details when that rendering will occur. The part of code defines inside the ‘ContentTemplate’ part will be only considering for page rendering through the update panel controller in the ASP.NET.
This entire update is basically handled asynchronously, as only the ‘ContentTemplate’ parts will be refresh and the rest of the other web pages will be entirely untouched. This update panel controller mainly allows us for sending multiple requests or posting any web-supported data into the server-side code, but page refreshing or entire page submission is absolutely not required for that, that’s why ‘update panel’ controller is called as ‘Asynchronous’.
<asp:UpdatePanel ID="updatepnl1" runat="server1">
<ContentTemplate>Example of ASP.NET UpdatePanel
Given below is the example mentioned :
One of the very common example where part of the page getting a refresh with page refreshing. The part of code which defines inside the ‘ContentTemplate’ will be refresh based on the logic define in the backend server-side codebase. The triggering point should be the one button click in the below example.
Creating a new project in visual studio by using file, new, project option.
Choose specific ASP.NET version for developing this web application.
Choose specific template for designing the page and defining the corresponding backend code.
Add require items for designing the required pages for ASP.NET web application in the defined template.
Choosing a template for generating another page, which basically rendering without page refresh.
Choose corresponding ASPX file and moving to the design tab of that specific file for designing the page. After moving to that designing page, there have toolbox option, under that specific toolbox there have ajax extension option, under that option, is ScriptManager, then have the option to add update panel.
Open the class of UpdatePanel for creating the required backend logic to execute at the time of page rendering.
Adding one specific label and button for designing the corresponding update panel page, where the button will be the trigger point of rendering part of the page through an update panel controller.
After adding one label and button, the page should be look like below in visual studio design preview.
Add another label and button outside the update panel design is just like below.
After design HTML auto generating code from visual studio are below:
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormUpdatepanelEg.aspx.cs" Inherits="UpdatepanelEg.WebFormUpdatepanelEg" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label in update panel"></asp:Label>
<br />
<br />
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="update label text" />
<br />
<br />
<br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label2" runat="server" Text="Label outside update panel"></asp:Label>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="change label text"
onclick="Button2_Click" />
</div>
</form>
</body>
</html>Output:
ASPX backend code where logic has been defined, it ensures what exactly happens when someone tries to render the page without page refresh through update panel controller utility.
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace UpdatepanelEg
{
public partial class WebFormUpdatepanelEg : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label11.Text = "Inside Panel: " + DateTime.Now.ToString();
Response.AddHeader("REFRESH", "600;URL=WebFormUpdatepanelEg.aspx");
}
protected void Button2_Click(object sender, EventArgs e)
{
Label21.Text = "outside panel: " + DateTime.Now.ToString();
Response.AddHeader("REFRESH", "600000;URL=WebFormUpdatepanelEg.aspx");
}
}
}Output:
Save the ASPX compile code, compile it, then run the file as ASP.NET web application mode.
As per the design, page populate, where two-part of label is coming, one is displaying ‘Label inside the update panel’, this one actually rendering again without a page refresh, and another part of label ‘Label outside the update panel’, will not be updated due to the ajax call.
‘Update Label Text’ button has been designed as a trigger point, so when we click that one, it will call backend code, and repopulate the page without refreshing.
If we click the same button again, the text will not change, only the timestamp is going to change based on the logic defined in the backend code.
But when we click on “change label text” (lower button) outside the update panel, it will be refreshing the whole page.
The lower part text has also been refresh after the page refreshing or resubmit.
Conclusion
UpdatePanel is mostly used controller for ASP.NET web application any time for the maximum client. UpdatePanel ensures the application should come promptly without page refreshing, and it is sometimes faster than normal page refresh, it will also give the user a better presentation than multiple page refresh.
Recommended Articles
We hope that this EDUCBA information on “ASP.NET UpdatePanel” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
