如何使用Ajax在MVC剃刀中刷新列表框

时间:2018-08-28 09:42:18

标签: jquery ajax asp.net-mvc listbox

我有一个列表框中有多个选择项的表单。 然后,当我使用ajax在gridview中编辑数据时,我想确保是否从ajax返回中选中了选中的项目。 这是供您参考的图像。我希望你知道我的意思。谢谢

enter image description here

<script type="text/javascript">
$(function () {
    $('.listbox').multiselect({
        includeSelectAllOption: true,
        selectAllValue: 'multiselect-all',
        enableCaseInsensitiveFiltering: true,
        enableFiltering: true,
        maxHeight: '400',
        buttonWidth: '100%',
        onChange: function (element, checked) {
            var brands = $('.listbox option:selected');
            var selected = [];
            $(brands).each(function (index, brand) {
                selected.push([$(this).val()]);
            });
        },
        buttonText: function (options, select) {
            return 'Selected User';
        }
    });
});

function OnClickEdit(s, e, GetDetailId) {            
    $.ajax({
        type: 'POST',
        url: '@Url.Action("OnClickEditAction")',
        data: {
            GetDetailId: GetDetailId
        },
        dataType: 'json',
        success: function (data) {
            //=>  HERE SET REFRESH LISTBOX <=\\
            var getData = data.PopulateData[0];                  
            var alfa = data.PopulateData[0].Users;
            //$(".listbox").multiselect('destroy');
            //$(".listbox").multiselect;
            //console.log(alfa);
            //$.each(alfa, function (i) {
            //    console.log(alfa[i]);
            //    console.log(alfa[i]['Selected']);
            //    console.log(alfa[i]['Text']);
            //    console.log(alfa[i]['Value']);
            //}); 
        }
    }); 
}
</script> 

 @Html.ListBoxFor(m => m.UserIds, Model.Users, new { @class = "listbox" })

1 个答案:

答案 0 :(得分:0)

我找到了这种情况的解决方案:

                        $(".listbox").multiselect('destroy'); 
                        var GetListUserSelected = data.PopulateData[0].Users;  
                        //console.log(GetListUserSelected);
                        var isList = $('.listbox');
                        isList.empty();
                        $.each(GetListUserSelected, function (i) {
                            var isVal = GetListUserSelected[i]['Value'];
                            var isText = GetListUserSelected[i]['Text'];
                            var isCheck = GetListUserSelected[i]['Selected'];

                            if (isCheck) {
                                isList.append($("<option value=" + isVal + " selected=selected>" + isText + "</option>"));
                            } else {
                                isList.append($("<option value=" + isVal + ">" + isText + "</option>"));
                            } 

                        });  
                        $('.listbox').multiselect({
                            includeSelectAllOption: true,
                            selectAllValue: 'multiselect-all',
                            enableCaseInsensitiveFiltering: true,
                            enableFiltering: true,
                            maxHeight: '400',
                            buttonWidth: '100%',
                            onChange: function (element, checked) {
                                var brands = $('.listbox option:selected');
                                var selected = [];
                                $(brands).each(function (index, brand) {
                                    selected.push([$(this).val()]); 
                                });
                            },
                            buttonText: function (options, select) {
                                return 'Selected User';
                            }
                        }); 

谢谢。...