CODEWITHSUNDEEP
asp.netwebformsjquery-chosen
Bill Blankenship
Bill Blankenship

Reputation: 3356

Jquery chosen multiple select, How to get selected values server side in asp.net?

I am revitalizing a very old application and trying not to introduce Devexpress or Telerik into this application.

I have a need for some dropdownlists with multiple selection availability. I have poked around on the web and the chosen jquery plugin looks to be the route to go.

I have it implemented in one of my test pages, but I am trying to get this implemented rather quickly without much tooling around with it. I am having some difficulties grabbing the multiple selected values on the server side in my code behind. I don't really want to have a bunch of client side functionality holding and maintaining data on change etc.

Any one ever attempt to get at this data server side versus client side and have luck?

Code example. :

<select id="slcExample" multiple class="chosen-select" style="width:350px;" runat="server"></select>

<script type="text/javascript">
        $(document).ready(function () {
            var config = {
                '.chosen-select': {},
                '.chosen-select-deselect': { allow_single_deselect: true },
                '.chosen-select-no-single': { disable_search_threshold: 10 },
                '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
                '.chosen-select-width': { width: "95%" }
            }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }
        });
  </script>

I have found that if I could get at this property .SelectedIndices that I would have access to the selected values but it will not let me use this on the server side as it is a protected property of the select in asp.net.

Upvotes: 2

Views: 6444

Answers (4)

Tracy
Tracy

Reputation: 1

I used a List instead:

        int i;
        IList<string> chosenItems = new List<string>();
        for (i = 0; i <= selectExample.Items.Count - 1; i++)
        {
            if (selectExample.Items[index].Selected)
            {
                chosenItems.Add(selectExample.Items[index].Value.Trim());
            }
        }

Upvotes: 0

Bonnie White
Bonnie White

Reputation: 1

I had the same problem and switched to this JQuery plugin instead: http://www.erichynds.com/blog/jquery-ui-multiselect-widget

Since the asp.net dropdown control does not allow multiple items, I used a regular tag with runat server and an ID. The plugin actually selects the items and then you can read them from code behind.

The plugin will works client-side on the asp.net dropdown, but you can't get the selected items in the code behind. So depending on your needs .. .

Hope this helps! Bonnie

Upvotes: 0

Bill Blankenship
Bill Blankenship

Reputation: 3356

Here is what I ended up doing. :

        Dim index As Integer
        Dim valuesChosen As String = ""
        For index = 0 To (slcExample.Items.Count - 1)
            If (slcExample.Items(index).Selected) Then
                valuesChosen += slcExample.Items(index).Value.Trim + ";"
            End If
        Next

I needed something on the server side. Hopefully this helps someone else. If you have a better option I am open to seeing it and will mark as answer if better.

Upvotes: 1

Hemadeus
Hemadeus

Reputation: 472

You can create a hidden field with asp:net class. with a javascript method, add all value in a comma separated list.

You can have the list on the server side after submiting your form.

try putting clientIDMode="Static"

<asp:HiddenField runat="server" ID="hidTest" ClientIDMode="Static" />

but if you can't, you will have to see the generated name from asp to update it in your javascript method

<script type="text/javascript">
        $(document).ready(function () {
            var config = {
                '.chosen-select': {},
                '.chosen-select-deselect': { allow_single_deselect: true },
                '.chosen-select-no-single': { disable_search_threshold: 10 },
                '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
                '.chosen-select-width': { width: "95%" }
            }
            var hiddenSeparatedList = "";
            for (var selector in config) {
                hiddenSeparatedList += $(selector).chosen(config[selector]) + ','
                $('#hidTest').val(hiddenSeparatedList);
            }
        });
  </script>

Upvotes: 0

Related Questions