locked
Master page dropdown list in update panel RRS feed

  • Question

  • User484224562 posted

    I would like to have a dropdown list in a master page using an update panel so the page does not refresh. I would like the selected value from the dropdown list to be used on a content page of the master page. I created this simple example. When clicking DropDownList1 the label on the content page is updated. When clicking DropDownList2 with the update panel the label does not get updated. This is my first time using an update panel; some help is appreciated. 

    master aspx
    <head runat="server">
    <title>Color</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
    <asp:ListItem Value="Green">Green</asp:ListItem>
    <asp:ListItem Value="Blue">Blue</asp:ListItem>
    <asp:ListItem Value="Orange">Orange</asp:ListItem>
    <asp:ListItem Value="Purple">Purple</asp:ListItem>
    </asp:DropDownList>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true">
    <asp:ListItem Value="Orange">Pink</asp:ListItem>
    <asp:ListItem Value="Purple">Red</asp:ListItem>
    </asp:DropDownList>
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="DropDownList2" EventName="SelectedIndexChanged" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    </form>
    </body>

    master code behind
    Private Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
    Dim color As String = DropDownList1.SelectedValue.ToString
    Dim lbl As Label = CType(ContentPlaceHolder1.FindControl("Label1"), Label)
    If Not lbl Is Nothing Then
    lbl.Text = color
    End If
    End Sub

    Protected Sub DropDownList2_SelectedIndexChanged(sender As Object, e As EventArgs)
    Dim color As String = DropDownList2.SelectedValue.ToString
    Dim lbl As Label = CType(ContentPlaceHolder1.FindControl("Label1"), Label)
    If Not lbl Is Nothing Then
    lbl.Text = color
    End If
    End Sub

    content page
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Color_Page1</title>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </asp:Content>

    Thanks, Pat

    Friday, April 17, 2020 11:12 PM

Answers

  • User-719153870 posted

    Hi pmelan0113,

    The controls outside theUpdatePanel will not be included in the asynchronous request, which means they can not be accessed by the controls in the UpdatePanel with server code/

    However, you can achieve this requirement with the JQuery though, check below demo:

    master.aspx:

    <html>
    <head runat="server">
        <title>Color</title>
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script>
            $(function () {
                $("[id*=DropDownList2]").change(function () {
                    var selectedvalue = $("[id*='DropDownList2'] :selected").text()
                    $("[id*='Label1']").text(selectedvalue);
                })
            })
        </script>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <script>
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
                    $(function () {
                        $("[id*=DropDownList2]").change(function () {
                            var selectedvalue = $("[id*='DropDownList2'] :selected").text()
                            $("[id*='Label1']").text(selectedvalue);
                        })
                    })
                });
            </script>
            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
                <asp:ListItem Value="Green">Green</asp:ListItem>
                <asp:ListItem Value="Blue">Blue</asp:ListItem>
                <asp:ListItem Value="Orange">Orange</asp:ListItem>
                <asp:ListItem Value="Purple">Purple</asp:ListItem>
            </asp:DropDownList>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Always">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true">
                        <asp:ListItem Value="Orange">Pink</asp:ListItem>
                        <asp:ListItem Value="Purple">Red</asp:ListItem>
                    </asp:DropDownList>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </form>
    </body>
    </html>

    Master.cs:

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        End Sub
    
        Private Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
            Dim color As String = DropDownList1.SelectedValue.ToString
            Dim lbl As Label = CType(ContentPlaceHolder1.FindControl("Label1"), Label)
            If Not lbl Is Nothing Then
                lbl.Text = color
            End If
        End Sub

    Content.aspx:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Color_Page1</title>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </asp:Content>
    

    result:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 18, 2020 6:28 AM

All replies

  • User-719153870 posted

    Hi pmelan0113,

    The controls outside theUpdatePanel will not be included in the asynchronous request, which means they can not be accessed by the controls in the UpdatePanel with server code/

    However, you can achieve this requirement with the JQuery though, check below demo:

    master.aspx:

    <html>
    <head runat="server">
        <title>Color</title>
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script>
            $(function () {
                $("[id*=DropDownList2]").change(function () {
                    var selectedvalue = $("[id*='DropDownList2'] :selected").text()
                    $("[id*='Label1']").text(selectedvalue);
                })
            })
        </script>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <script>
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
                    $(function () {
                        $("[id*=DropDownList2]").change(function () {
                            var selectedvalue = $("[id*='DropDownList2'] :selected").text()
                            $("[id*='Label1']").text(selectedvalue);
                        })
                    })
                });
            </script>
            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
                <asp:ListItem Value="Green">Green</asp:ListItem>
                <asp:ListItem Value="Blue">Blue</asp:ListItem>
                <asp:ListItem Value="Orange">Orange</asp:ListItem>
                <asp:ListItem Value="Purple">Purple</asp:ListItem>
            </asp:DropDownList>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Always">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true">
                        <asp:ListItem Value="Orange">Pink</asp:ListItem>
                        <asp:ListItem Value="Purple">Red</asp:ListItem>
                    </asp:DropDownList>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </form>
    </body>
    </html>

    Master.cs:

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        End Sub
    
        Private Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
            Dim color As String = DropDownList1.SelectedValue.ToString
            Dim lbl As Label = CType(ContentPlaceHolder1.FindControl("Label1"), Label)
            If Not lbl Is Nothing Then
                lbl.Text = color
            End If
        End Sub

    Content.aspx:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Color_Page1</title>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </asp:Content>
    

    result:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 18, 2020 6:28 AM
  • User484224562 posted

    Thanks Yang Shen!

    Monday, April 20, 2020 6:28 PM
  • User-719153870 posted

    Hi pmelan0113,

    Glad to know i did help. You can mark my post as the answer if the issue has been solved, this could help those who met the same issue.

    Thanks!

    Best Regard,

    Yang Shen

    Tuesday, April 21, 2020 1:17 AM