Tech NovoGeek

...Technology Simplified

Thursday, May 31, 2012

Triggers in Updatepanel [AJAX]

Anuradha 7:26 AM , No comments :
The UpdatePanel control is allowing partial rendering of the area.
The tag has two childtags - the ContentTemplate and the Triggers tags.
The ContentTemplate tag is mandatory one,since it holds the content of the panel. The content can be anything that you would normally put on your page, from literal text to web controls.
The Triggers tag allows you to define certain triggers which will make the panel update it's content.
Here is an example which uses both childtags.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>UpdatePanel</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger controlid="UpdateButton2" eventname="Click" />
        </Triggers>
            <ContentTemplate>
                <asp:Label runat="server" id="DateTimeLabel1" />
                <asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton_Click" text="Update" />               
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">           
            <ContentTemplate>
                <asp:Label runat="server" id="DateTimeLabel2" />
                <asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton_Click" text="Update" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

protected void UpdateButton_Click(object sender, EventArgs e)
{
    DateTimeLabel1.Text = DateTime.Now.ToString();
    DateTimeLabel2.Text = DateTime.Now.ToString();
}
Build the application and click the two buttons.
You will notice that then first button updates only the first datestamp, while the second button updates both.

If you observe clearly the two buttons are placed in two update panels.

So First button in updatepanel 1 updates first timestamp.

Whereas second button in updatepanel2 updates both because the second update button is referred from first updatepanel using trigger tag.
As you can see, the first UpdatePanel carries a trigger which references the second button.
This will ensure that the first panel is updated even when a control on a different UpdatePanel is used.

The AsyncPostBackTrigger tag is pretty simple - it only takes two attributes

1.controlid, a reference to the control which can trigger it,

2.eventname, which tells which eventtype can cause the trigger to fire.

If you wish for the content of a UpdatePanel to be updated no matter what, you may change the updatemode property to Always.

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )