Here is an example of update panel in asp.net and its
conditional uses:
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scMGR" runat="server"></asp:ScriptManager>
<asp:Label ID="lblOutside" runat="server"></asp:Label><br />
<asp:Button ID="btnOutSide" runat="server" Text="Outside Button" OnClick="btnOutSide_Click" />
<asp:UpdatePanel ID="upnl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lbl" runat="server"></asp:Label>
<asp:Button ID="btn_upnl" runat="server" Text="Button in 'Same' Update
Panel" OnClick="btn_upnl_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn_upnl2"/>
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upnl2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:Button ID="btn_upnl2" runat="server" Text="Button in 'Another' Update Panel" OnClick="btn_upnl2_Click" />
</div>
</ContentTemplate>
<Triggers>
<%--<asp:PostBackTrigger
ControlID="btn_upnl2"/>--%>
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
Default.aspx.cs:
using System;
using System.Net.Http;
using System.Net.Http.Headers;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
lblOutside.Text = DateTime.Now.ToString();
}
private void saveDetails()
{
HttpClient client = new HttpClient();
Uri url = new Uri("http://localhost:8083/saveDetails");
client.BaseAddress = url;
// Add
an Accept header for JSON format.
client.DefaultRequestHeaders.Accept.Add(
new MediaTypeWithQualityHeaderValue("application/json"));
System.Net.Http.HttpContent content = new StringContent(@"{""empID"":1001,
""empName"":""Shshi Bhooshan
Sharma""}", System.Text.UTF8Encoding.UTF8, "application/json");
HttpResponseMessage response = client.PostAsync(url, content).Result;
if (response.IsSuccessStatusCode)
{
var result = response.Content.ReadAsStringAsync().Result;
Response.Write(response.ReasonPhrase + "," + result);
}
else
{
Response.Write(response);
}
}
protected void btn_upnl_Click(object sender, EventArgs e)
{
lbl.Text = DateTime.Now.ToString();
}
protected void btn_upnl2_Click(object sender, EventArgs e)
{
lbl.Text = DateTime.Now.ToString();
//upnl.Update();
}
protected void btnOutSide_Click(object sender, EventArgs e)
{
lbl.Text = DateTime.Now.ToString();
}
}
Important Note:
Update panel is used to update the page
content partially (i.e. for partial post back of page).
1.
Update panel update() method
is used to "update" update panel content. It can only be called when
update mode is conditional of the update panel being update. We can use 4th option
also for it.
2.
Button outside update panel
can update the content of update panel(s) easily.
3.
When we want to postback the
full page using the button available inside update panel, then we can use the
"PostbackTrigger" of update panel.
4.
When we want to update
"update panel content" by a button present in another update panel
then we can use "AsyncPostBackTrigger" in current update panel by
using control id present into that another update panel.
