0

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.

3
  • 1
    Longest title in the world. Commented Sep 17, 2020 at 19:29
  • @JonH Would something like "Use jQuery multiselect result as an array in an MVC Razor page @ foreach function?" be short enough, but also be descriptive enough? Commented Sep 18, 2020 at 13:09
  • dont add languages to titles...we already have them in the tags. Commented Sep 18, 2020 at 18:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.