webforms : determines which control within updatepanel triggers the refresh

Question

I have an aspx page like this :

<asp:UpdatePanel runat="server" UpdateMode="always">
    <ContentTemplate>
        <asp:DropDownList autopostback="true" runat="server" ID="DropDown1" OnSelectedIndexChanged="DropDown1_SelectedIndexChanged">
        </asp:DropDownList>
        <asp:DropDownList autopostback="true" runat="server" ID="DropDown2" OnSelectedIndexChanged="DropDown2_SelectedIndexChanged">
        </asp:DropDownList>
    </ContentTemplate>
</asp:UpdatePanel>

At each selectionChanged of any of the 2 dropdowns, a partial postback is done and I refresh the updatePanel content. However, I would like to execute some js code only after a refresh panel was triggered by the selectionChanged of DropDown1.

How can I in my page, get on clientSide, the event right after the updatePanel was refreshed and more important, the id of the control (in this case DropDown1)that has triggerred the refresh panel.

I have try this, but it's called every time the page is loaded, even the first time, and I have no information on which control has triggered the updatePanel to refresh :

<script>
  $(document).ready(function () 
  {       
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
    });

    function PageLoaded(sender, args) {
        // I have analyzed sender and args without any information to obtain the desired id "DropDown1"
    }

</script>

Scotty Scotty · Accepted Answer · 2016-05-02T05:07:02

You can use sender._postBackSettings.sourceElement.id to get the Id of the source control after the UpdatePanel postback. See example below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelTest.aspx.cs" Inherits="TestApp.UpdatePanelTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/Scripts/jquery-1.8.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="sm" ></asp:ScriptManager>
    <div>
    <asp:UpdatePanel runat="server" UpdateMode="always">
        <ContentTemplate>
            <asp:DropDownList autopostback="true" runat="server" ID="DropDown1" OnSelectedIndexChanged="DropDown1_SelectedIndexChanged">
                <asp:ListItem Text="option 1" Value="1" />
                <asp:ListItem Text="option 2" Value="2" />
                <asp:ListItem Text="option 3" Value="3" />
            </asp:DropDownList>
            <asp:DropDownList autopostback="true" runat="server" ID="DropDown2" OnSelectedIndexChanged="DropDown2_SelectedIndexChanged">
                <asp:ListItem Text="option A" Value="A" />
                <asp:ListItem Text="option B" Value="B" />
                <asp:ListItem Text="option C" Value="C" />
            </asp:DropDownList>
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
                function (sender) {
                    if (sender._postBackSettings.sourceElement.id == 'DropDown1')
                        DoSomethingAmazing();
                });
        });

        function DoSomethingAmazing() {
            alert('OMG something amazing just occurred!');
        }
    </script> 
    </form>
</body>
</html>

webforms : determines which control within updatepanel triggers the refresh

1 Answers