Search code examples
c#asp.nettwitter-bootstrapbootstrap-4bootstrap-multiselect

How to make autopostback Multiselect ListBox in ASP?

I am trying to make a multi-select ListBox in ASP.NET using a ListBox control with Bootstrap Multiselect styling.

In regards to appearance, it works well. I can toggle it to drop down, I can select and deselect options and close it.

<asp:ListBox ID="NameListBox" runat="server" CssClass="multiselect" SelectionMode="Multiple" OnSelectedIndexChanged="NameListBox_SelectedIndexChanged">
    <asp:ListItem Text="Name 1" />
    <asp:ListItem Text="Name 2" />
    <asp:ListItem Text="Name 3" />
    <asp:ListItem Text="Name 4" />
    <asp:ListItem Text="Name 5" />
    <asp:ListItem Text="Name 6" />
</asp:ListBox>

What I have a problem with is making a postback and handling the newly selected items. I have an OnSelectedIndexChanged written where I loop through the selected items and insert them into the database, but I don't know when and how to run it. I know I could have a separate button to cause a postback and save the selected items, but I would like to cause an automatic postback when closing the ListBox.

The problem is, if I use AutoPostBack="true", then postback will happen with every option change, so the user has no way to select more options than save at once. I only want to cause a postback when the dropdown list is actually closed.

After many tries, I got to this:

$('.multiselect').multiselect({
            nonSelectedText: '',
            nSelectedText: 'selected',
            allSelectedText: 'Everyone',
            numberDisplayed: 2,
            buttonTextAlignment: 'left',
            buttonWidth: 240,
            onDropdownHidden: function (event) {
                __doPostBack($(event.target).parent().children('.multiselect').attr('id'), '');
            }
            });

This causes a postback after closing the list box's drop-down list, which is good. But sadly, the NameListBox_SelectedIndexChanged event handler doesn't get fired during the postback, so nothing happens.

Any tips?

Solution

  • hope this can help you~

    <asp:ListBox ID="DropDownList_ExportCountry" runat="server" SelectionMode="Multiple" OnSelectedIndexChanged="DropDownList_ExportCountry_SelectedIndexChanged"></asp:ListBox>

    after html <form I put this

    <script type="text/javascript">
$('[id*=DropDownList_ExportCountry]').multiselect({
        onDropdownHide: function (event) {
            __doPostBack();//__doPostBack($(event.target).parent().children('#DropDownList_ExportCountry').attr('id'), '')
        }
    });

    and remember include js and Css like this in <head

    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>