Get Bootstrap DropDown Menu selected item in Code Behind on Button Click in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

hi

I refered below thread

Pass (Send) Bootstrap DropDown Menu selected item as parameter on Button Click using jQuery in ASP.Net

I use a hidden field to send the selected item from repeater to the Method this was for one Repeater.

I use 2 dropdown list on-page that put a repeater in all of them below is code:

<script type="text/javascript">
    $(function () {
        $(".dropdown-menu li a").click(function () {
            $(this).closest('.dropdown').find(".btn:first-child").text($(this).text());
            $(this).closest('.dropdown').find(".btn:first-child").val($(this).text());
            $("[id*=hfSelectedTransfer]").val($(this).text().trim());
        });
    });
</script>

now how I can send 2 repeaters selected item to the Method with the hidden field

<div class="row">
    <div class="col-md-6">
        <div class="Tmelk1">
            <div class="dropdown">
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <asp:Repeater ID="Repeater2" runat="server">
                        <ItemTemplate>
                            <li><a target="_blank" class="dropdown-item" id="A1" runat="server" commandargument='<%# Eval("Transfer") %>'>
                                <%# Eval("Transfer") %></a></li>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="Tmelk">
            <div class="Tmelk1">
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <asp:Repeater ID="Repeater3" runat="server">
                        <ItemTemplate>
                            <li><a target="_blank" class="dropdown-item" id="A2" runat="server" commandargument='<%# Eval("metraj") %>'>
                                <%# Eval("metraj") %></a></li>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </div>
        </div>
    </div>
</div>

best regards

Neda

Posted one month ago

Hi nedash,

The same way you have to add another hiddenfield and set the value on selection. Then code behind access the hiddenfield values to pass as paramater.

I have assigned two click event for the two Repeater. When dropdown-menu item selected respective click event is executed and hiddenfields are set with selected item.

Check the below example.

HTML

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".dropdown-menu li a[id*=Repeater2]").click(function () {
            $(this).closest('.dropdown').find(".btn:first-child").text($(this).text().trim());
            $(this).closest('.dropdown').find(".btn:first-child").val($(this).text().trim());
            $("[id*=hfSelectedTransfer]").val($(this).text().trim());
        });

        $(".dropdown-menu li a[id*=Repeater3]").click(function () {
            $(this).closest('.dropdown').find(".btn:first-child").text($(this).text().trim());
            $(this).closest('.dropdown').find(".btn:first-child").val($(this).text().trim());
            $("[id*=hfSelectedMetraj]").val($(this).text().trim());
        });
    });
</script>
<br />
<center>
    <div class="row">
        <div class="col-md-6">
            <div class="Tmelk1">
                <asp:HiddenField runat="server" ID="hfSelectedTransfer" />
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Select Transfer
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <asp:Repeater ID="Repeater2" runat="server">
                            <ItemTemplate>
                                <li><a target="_blank" class="dropdown-item" id="A1" runat="server">
                                    <%# Eval("Transfer") %></a></li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="Tmelk">
                <asp:HiddenField runat="server" ID="hfSelectedMetraj" />
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="Button1" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        Select Metraj
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <asp:Repeater ID="Repeater3" runat="server">
                            <ItemTemplate>
                                <li><a target="_blank" class="dropdown-item" id="A2" runat="server">
                                    <%# Eval("metraj") %></a></li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <asp:ImageButton runat="server" OnClick="ImageButton1_Click" AlternateText="Get Estat Info" />
        </div>
    </div>
</center>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.Add("Transfer");
        dt.Columns.Add("metraj");
        dt.Rows.Add("Transfer 1", "metraj 1");
        dt.Rows.Add("Transfer 2", "metraj 2");
        dt.Rows.Add("Transfer 3", "metraj 3");
        dt.Rows.Add("Transfer 4", "metraj 4");
        Repeater2.DataSource = dt;
        Repeater2.DataBind();
        Repeater3.DataSource = dt;
        Repeater3.DataBind();
    }
}

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
    string selectedTransfer = hfSelectedTransfer.Value;
    string selectedMetraj = hfSelectedMetraj.Value;
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.Add("Transfer")
        dt.Columns.Add("metraj")
        dt.Rows.Add("Transfer 1", "metraj 1")
        dt.Rows.Add("Transfer 2", "metraj 2")
        dt.Rows.Add("Transfer 3", "metraj 3")
        dt.Rows.Add("Transfer 4", "metraj 4")
        Repeater2.DataSource = dt
        Repeater2.DataBind()
        Repeater3.DataSource = dt
        Repeater3.DataBind()
    End If
End Sub

Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)
    Dim selectedTransfer As String = hfSelectedTransfer.Value
    Dim selectedMetraj As String = hfSelectedMetraj.Value
End Sub

Screenshot