使用ASP.NET MVC中的Jquery Ajax将Bootstrap-Multiselect Dropdown参数传递给控制器

时间:2018-12-20 05:53:01

标签: jquery ajax asp.net-mvc bootstrap-multiselect

我已经使用Bootstrap-multiselect创建了多选下拉列表,并在Jquery Ajax的帮助下将选定的参数传递给Asp.Net MVC 5中的控制器。我已经将搜索结果的代码写成过滤后的状态,行业类型等,以及它的工作代码。

<script type="text/javascript">
var stateValues;
var Industrytype;
var capitalValues;
var _CompanyStatus;

$(document).ready(function () {
    $('#StateList').multiselect({
        buttonWidth: '400px',
        maxHeight: 200,
        enableCaseInsensitiveFiltering: true,
        includeSelectAllOption: true,
        enableClickableOptGroups: true,
        nonSelectedText: '-- Select State --',
        templates: {
            button: '<button type="button" class="btn btn-light multiselect" data-toggle="dropdown"><span class="multiselect-selected-text"></span> &nbsp;<b class="fa fa-caret-down pull-right"></b></button>',
            ul: '<ul class="col-md-12 multiselect-container dropdown-menu"></ul>',
            filter: '<li class="multiselect-item filter sticky-top"><div class="input-group"><input class="form-control multiselect-search" placeholder="Search State here..." type="text"></div></li>',
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
            li: '<li><a href="javascript:void(0);"><label></label></a></li>',
            divider: '<li class="multiselect-item divider"></li>',
            liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
        }
    });
    $("#StateList").change(function () {
        stateValues = $("#StateList").val();
        $("#progress").show();
        AjaxRequest(stateValues, Industrytype, capitalValues, _CompanyStatus)
    });
});

<script type="text/javascript">
function AjaxRequest(_StateList, _IndustryList, _RangeList, _StatusList) {
    $.ajax({
        type: "POST",
        url: '@Url.Action("BasicSearch","Home")',
        dataType: "html",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ CompanyStatus: _StatusList, searchWord: '@ViewBag.RadioButtonValue', authCapital: _RangeList, STRMSSelected: _StateList, currentFilter: '@ViewBag.CurrentSearch', industryType: _IndustryList }),
        success: function (data) {
            $("#progress").hide();
            $("#list").html(data);
        }
    });
}

查看代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet" />


<div class="col-md-12">
        <hr />
        <select id="StateList" multiple>
            @foreach (var item in ViewBag.StateList)
            {
                <option value="@item">@item</option>
            }
        </select>
    </div>

0 个答案:

没有答案