Keep (Retain) Bootstrap Dropdown Menu selection after Postback using jQuery in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

hi

I use bootstrap in a page and use the below codes to bind repeater from a database

There is a search button that when I click on it, will show data from the database into GridView

now problem is that when I select Item from  repeaters and click on the search button it shows data in grid view correctly but it doesn't show my selected Item into repeater(drop-down list) it shows:

PLEASE SELECT ITEM

I want when I select an item from the repeater and click search button it shows my selected Item in the repeater after I click search button

    <script type="text/javascript">
        $(function () {
            $(".dropdown-menu li a[id*=rptType]").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*=hfSelectedType]").val($(this).text().trim());
            });

            $(".dropdown-menu li a[id*=Rmetraj]").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());
            });

            $(".dropdown-menu li a[id*=Rpttran]").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*=Rpttran]').click(function () {
                $('#TH5L1L').show();
                $('#TH5L1LPM2').hide();
                    $('#TH5L1LPMV').hide();
                   $('#TH5L1LPMPM').hide();
                    $('#TH5L1LPM11').show();
                    var Rpttran = $.trim($(this).html());
                    switch (Rpttran) {
                        case "فروش":
                        case "معاوضه":
                        case "پیش فروش":
                            $('#TH5L1L').hide();
                           
                            $('#TH5L1LPMPM').hide();
                            $('#TH5L1LPMV').hide();

                            $('#TH5L1LPM11').show();
                            $('#Lablprice').show();
                            break;
                           case "رهن کامل":
                           case "رهن/اجاره":
                           case "اجاره":
                            $('#TH5L1LPM11').hide();
                            $('#TH5L1LPM2').show();
                                $('#TH5L1LPMPM').show();
                                $('#TH5L1LPMV').show();                                
                          break;
                        default:
                    }
                });
            });
        </script>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 190px !important;">
                PLEASE SELECT ITEM
            </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <asp:Repeater ID="rptType" runat="server">
           <ItemTemplate>
               <li><a target="_blank" class="dropdown-item" ID="btnsystem" runat="server" CommandArgument='<%# Eval("type") %>'> <%# Eval("type") %></a></li>
           </ItemTemplate>
        </asp:Repeater>

and

 if (!IsPostBack)
 {   
     BindRepeater(rptType, "Estate_TY");
     BindRepeater(Rpttran, "Estate_TRan");
     BindRepeater(Rmetraj, "Estate_MEtrajI");

Best regards

Neda

Posted one month ago

Hi nedash,

Check this example. Now please take its reference and correct your code.

HTML

<form id="form1" runat="server">
    <asp:HiddenField runat="server" ID="hfSelectedType" />
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 190px !important;">
            PLEASE SELECT ITEM
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <asp:Repeater ID="rptType" runat="server">
                <ItemTemplate>
                    <li><a target="_blank" class="dropdown-item" id="btnsystem" runat="server"
                        commandargument='<%# Eval("type") %>'><%# Eval("type") %></a></li>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <asp:Button Text="Save" runat="server" />
    </div>
</form>
<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*=rptType]").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*=hfSelectedType]").val($(this).text().trim());
        });
        if ($("[id*=hfSelectedType]").val() != "") {
            $(".dropdown-menu li a[id*=rptType]").closest('.dropdown').find(".btn:first-child").text($("[id*=hfSelectedType]").val());
            $(".dropdown-menu li a[id*=rptType]").closest('.dropdown').find(".btn:first-child").val($("[id*=hfSelectedType]").val());
        }
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] { new System.Data.DataColumn("Type") });
        dt.Rows.Add("Type 1");
        dt.Rows.Add("Type 2");
        dt.Rows.Add("Type 3");
        dt.Rows.Add("Type 4");
        rptType.DataSource = dt;
        rptType.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As Data.DataTable = New Data.DataTable()
        dt.Columns.AddRange(New Data.DataColumn() {New Data.DataColumn("Type")})
        dt.Rows.Add("Type 1")
        dt.Rows.Add("Type 2")
        dt.Rows.Add("Type 3")
        dt.Rows.Add("Type 4")
        rptType.DataSource = dt
        rptType.DataBind()
    End If
End Sub

Screenshot


Posted one month ago
dharmendr says:
        if ($("[id*=hfSelectedType]").val() != "") {
            $(".dropdown-menu li a[id*=rptType]").closest('.dropdown').find(".btn:first-child").text($("[id*=hfSelectedType]").val());
            $(".dropdown-menu li a[id*=rptType]").closest('.dropdown').find(".btn:first-child").val($("[id*=hfSelectedType]").val());
        }

You need to check the if condition in the document ready event handler.

So when page postback DropDownList menu will set according to the HiddenField. 

<script type="text/javascript"> 
    $(function () {
        $(".dropdown-menu li a[id*=rptType]").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*=hfSelectedType]").val($(this).text().trim());
        });
 
        $(".dropdown-menu li a[id*=Rmetraj]").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());
        });
        $(".dropdown-menu li a[id*=Rpttran]").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());
        });

        if ($("[id*=hfSelectedType]").val() != "") {
            $(".dropdown-menu li a[id*=rptType]").closest('.dropdown').find(".btn:first-child").text($("[id*=hfSelectedType]").val());
            $(".dropdown-menu li a[id*=rptType]").closest('.dropdown').find(".btn:first-child").val($("[id*=hfSelectedType]").val());
        }

        if ($("[id*=hfSelectedMetraj]").val() != "") {
            $(".dropdown-menu li a[id*=Rmetraj]").closest('.dropdown').find(".btn:first-child").text($("[id*=hfSelectedMetraj]").val());
            $(".dropdown-menu li a[id*=Rmetraj]").closest('.dropdown').find(".btn:first-child").val($("[id*=hfSelectedMetraj]").val());
        }

        if ($("[id*=hfSelectedTransfer]").val() != "") {
            $(".dropdown-menu li a[id*=Rpttran]").closest('.dropdown').find(".btn:first-child").text($("[id*=hfSelectedTransfer]").val());
            $(".dropdown-menu li a[id*=Rpttran]").closest('.dropdown').find(".btn:first-child").val($("[id*=hfSelectedTransfer]").val());
        }
    });
</script>