how to get selected values from javascript jquery in asp to use it in the code behind of C#

Question

I'm trying to get the selected values from below multiselect jquery to use it in the code behind in C#. I got the script sources from below:

https://github.com/nobleclem/jQuery-MultiSelect

I'm using the code in asp as follow:

<div class="col-sm-3">
                            <label class="text-light-blue">MultiSelect Codes</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-globe"></i>
                                </div>
                                <select id="test" name="basic[]" multiple="multiple">
                                    <option value="1">1 Code</option>
                                    <option value="2">2 Code</option>
                                    <option value="3">3 Code</option>
                                    <option value="4">4 Code</option>
                                    <option value="70">70 Code </option>
                                    <option value="80">80 Code </option>
                                    <option value="90">90 Code </option>
                                    <option value="88">88 Code </option>
                                    <option value="99">99 Code </option>
                                </select>
                            </div>
                        </div>


                        <script>
                        $(function () {
                                    $('select[multiple]').multiselect({
                                        columns: 1,
                                        search: true,
                                        searchOptions: {
                                            showOptGroups: true,
                                            searchText: true,
                                            searchValue: true,
                                        },
                                        texts: {
                                            placeholder: 'Select Codes', search: 'Search',
                                            selectedOptions: ' selected',
                                            selectAll: 'Select all',
                                            unselectAll: 'Unselect all',
                                        },
                                        selectAll: true, // add select all option
                                        selectGroup: true, // select entire optgroup
                                        minHeight: 250,   // minimum height of option overlay
                                        maxHeight: 250,  // maximum height of option overlay
                                        maxWidth: 250,  // maximum width of option overlay (or selector)
                                        maxPlaceholderWidth: 250, // maximum width of placeholder button
                                        maxPlaceholderOpts: 250, // maximum number of placeholder options to show until "# selected" shown instead
                                        showCheckbox: true,  // display the checkbox to the user
                                        onOptionClick: function (element, option) { }, // fires when an option is clicked

                                    });
                                       });
                    </script>

I'm expecting to return the selected values from above options in C#, for example as :

2,4,99

Answer 1

Edited

You can post the selected values to a controller action like this:

var selectedItems = $('select#test').val()
$.ajax({
    url: '@Url.Action("SaveSelectedCodes", "MyController")',
    type: 'POST',
    cache: false,
     data: JSON.stringify(selectedItems),
    success: function (result) {
        $('#myDiv').html(result);
    }
});

Assuming you use .net mvc you would have a controller with a action where you would receive the values.

public class MyController : Controller
{

    [HttpPost]
    public ActionResult SaveSelectedCodes( string[] SelectedCodes)
    {
        if (SelectedCodes != null)
        {
            string codeValue = string.Join("," , SelectedCodes);

            //
            // write your code to save into database
            //
        }
        return View("Index"));
    }
}

Answer 2

You can try in this way to get the values of the selected options/items:

$('select[multiple]').val()

Thanks

Answer 3

You will need an ASP control and have jQuery update the ASP control with the new values.

ASP

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

JQuery

(function(){
   $('#HiddenField1').val('[new values]');
})();

C#

var myNewValues = HiddenField1.Value;