Introduction:
In this article I will explain what is Ajax updatepanel control, advantages of updatepanel control and how to use multiple updatepanels in asp.net.
Description:
Previously I explained many articles relating to Ajax. Now I will explain what is ajax updatepanel control and use of ajax updatepanel control in asp.net.
In this article I will explain what is Ajax updatepanel control, advantages of updatepanel control and how to use multiple updatepanels in asp.net.
Description:
Previously I explained many articles relating to Ajax. Now I will explain what is ajax updatepanel control and use of ajax updatepanel control in asp.net.
During work with our applications if we entered any values in textbox controls and click on a button in form we will see full postback of our page and we will lost all the controls values whatever we entered previously this happend because of postback. If we want to avoid this full postback of page and round trip to server we need to write much code instead of writing much code we can use ajax updatepanel control.
Ajax updatepanel will help us to avoid full postback of the page i.e., avoid refresh of the whole page content with postback and stop flickering of the page which is associated with a postback and allows only partial postbacks. By using Ajax updatepanel we can refresh only required part of page instead of refreshing whole page.
Ajax updatepanel contains property called UpdateMode this property is used to specify whether UpdatePanel is always refreshed during a partial render or if it refresh only when a particular trigger hit. By default updatepanel contains UpdateMode="Always" if we want to set it conditionally we need to change this property UpdateMode="Conditional"
Ajax updatepanel control contains two child tags those are ContentTemplate and Triggers.
ContentTemplate is used to hold the content of the page means suppose we designed page with some controls we will place controls inside of the ContentTemplate
Triggers we used in a situation like need to refresh updatepanel only whenever I click some button control in that situation I will define those controls with this Triggers child tag.
Our Sample update panel control will be like this
<asp:UpdatePanel ID="UpdatePanel2" runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label2" runat="server"
ForeColor="red" />
……………………………………………………..
………………………………………………………
……………………………………………………….
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1"
EventName="Click" />
</Triggers>
</asp:UpdatePanel>
|
Now we will create one sample application with updatepanels for that first create application and design your aspx page will be likes this
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>UpdatePanel Example in asp.net</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<fieldset style="width:30%">
<legend>Update Panel-1</legend>
<asp:Label ID="lbl1" runat="server" ForeColor="green"/><br />
<asp:Button ID="btnUpdate1" runat="server" Text="Update Both Panels" OnClick="btnUpdate1_Click" />
<asp:Button ID="btnUpdate2" runat="server" Text="Update This Panel" OnClick="btnUpdate2_Click" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<fieldset style="width:30%">
<legend>Update Panel-2</legend>
<asp:Label ID="lbl2" runat="server" ForeColor="red" />
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
|
If you observe above code in UpdatePanel2 I defined Triggers property with btnUpdate1. HereUpdatePanel2 content will update only whenever we click on btnUpdate1 because we definedUpdatePanel2 property UpdateMode="Conditional" and we set AsyncPostBackTrigger property withbtnUpdate1
Write following code in code behind
C#.NET
protected void btnUpdate1_Click(object sender, EventArgs e)
{
lbl1.Text = DateTime.Now.ToLongTimeString();
lbl2.Text = DateTime.Now.ToLongTimeString();
}
protected void btnUpdate2_Click(object sender, EventArgs e)
{
lbl1.Text = DateTime.Now.ToLongTimeString();
lbl2.Text = DateTime.Now.ToLongTimeString();
}
|
VB Code
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnUpdate1_Click(ByVal sender As Object, ByVal e As EventArgs)
lbl1.Text = DateTime.Now.ToLongTimeString()
lbl2.Text = DateTime.Now.ToLongTimeString()
End Sub
Protected Sub btnUpdate2_Click(ByVal sender As Object, ByVal e As EventArgs)
lbl1.Text = DateTime.Now.ToLongTimeString()
lbl2.Text = DateTime.Now.ToLongTimeString()
End Sub
|
Demo
 |
If you observe above sample whenever I click on button “Update Both Panels” it’s updating data in both updatepanels but if click on button “Update This Panel” it’s updating data in first updatepanel because in both updatepanels we defined condition UpdateMode= "Conditional" and set Triggers conditions because of that here updatepanels will update conditionally and in UpdatePanel2 we written AsyncPostBackTriggerproperty to update panel only whenver we click on btnUpdate1.
No comments:
Post a Comment