How to use multiselect results as an @foreach function array?

305 Views Asked by At

I am trying to use the http://loudev.com/ jQuery MultiSelect Plugin to change an MVC Razor table display page from displaying all results in the bound database view, to only displaying the selected results from the plugin; (which is also bound to the same view). I found this answer:

By using Jquery $('select#fm_delivery_or_collection').val() the val function called from the select will return an array if its a multiple.

in another question - How to get all selected option text form multi select Using Javascript

UPDATE - I hope this is more concise. I Replaced what I currently had as code with a paired down version of what I currently do have; as I've hopefully gotten closer to solving the issue. (The snippet still shows all of the table fields.)

Global Variable

using System;

namespace Mvc.Variables
{
    public static class Globals
    {
        public static string[] ary_Circuits;
    }
}

Index.cshtml

@model IEnumerable<Mvc.Models.Circuits_View>
@using Mvc.Variables;
@using System.Configuration;
@using System.Data.SqlClient;
@using System.Collections.Generic;
@{
    ViewBag.Title = "Index";
    <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/multi-select.css" rel="stylesheet" type="text/css" />

}
<h3>
    Circuits - @DateTime.Now.ToString()


</h3>

 
    <a href='#' id='select-all'>Select All</a>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <a href='#' id='deselect-all'>Deselect All</a>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <button type="submit" onclick="mySelected()">Display Circuits</button>

    <select multiple="multiple" id="my-select">
        @foreach (var choice in Model)
        {
            <option value='@Html.DisplayFor(modelItem => choice.CIRCUIT)'>@Html.DisplayFor(modelItem => choice.CIRCUIT)</option>
        }
    </select>
    <script src="~/Scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.quicksearch.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.multi-select.js" type="text/javascript"></script>
    <script type="text/javascript">
        // run multiSelect

        (function ($) {
            $(function () {
                $('.multiselect').multiSelect({});

                $('#my-select').multiSelect(
                    {
                        keepOrder: true,
                        selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Selection Circuit Search'>",
                        selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Selected Circuit Search'>",
                        afterInit: function (ms)
                        {
                            var that = this,
                                $selectableSearch = that.$selectableUl.prev(),
                                $selectionSearch = that.$selectionUl.prev(),
                                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                                .on('keydown', function (e)
                                {
                                    if (e.which === 40)
                                    {
                                        that.$selectableUl.focus();
                                        return false;
                                    }
                                });

                            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                                .on('keydown', function (e)
                                {
                                    if (e.which === 40)
                                    {
                                        that.$selectionUl.focus();
                                        return false;
                                    }
                                });
                        },
                        afterSelect: function ()
                        {
                            this.qs1.cache();
                            this.qs2.cache();
                        },
                        afterDeselect: function ()
                        {
                            this.qs1.cache();
                            this.qs2.cache();
                        }
                    });

                $('#select-all').click(function ()
                {
                    $('#my-select').multiSelect('select_all');
                    return false;
                });

                $('#deselect-all').click(function ()
                {
                    $('#my-select').multiSelect('deselect_all');
                    return false;
                });

            });
        }) (jQuery);
        function mySelected()
        {
            Globals.ary_Circuits.val() = $('select#my-select').val();
            return Globals.ary_Circuits.val();
        };
    </script>
    <table class="table">
        <thead>
            <tr style="font-size:20px;">
                <th width="90">
                    <b>
                    @Html.DisplayNameFor(model => model.CIRCUIT) 
                    </b>
                </th>
            </tr>
        </thead>
    </table>
    <hr style="background-color:rgb(0,0,0);" />
    <div style="max-height:335px;overflow:auto;">
        <table class="table table-bordered table-condensed table-striped">
            @if (Globals.ary_Circuits != null)
            {
                foreach (var circuit in Globals.ary_Circuits)
                {

                    foreach (var item in Model)
                    {
                        if (circuit == item.CIRCUIT)
                        {
                            <tr>
                                <td>
                                    @Html.ActionLink(item.CIRCUIT, null, "AmpLoadDaily", new { device = item.CIRCUIT }, null)
                                </td>
                            </tr>
                        }
                    }
                }
            }
        </table>
    </div>


Selection of DB record for table display.

0

There are 0 best solutions below