如何在Asp.NET MVC中使用复选框创建MultiSelect下拉列表

debugcn 发表于 Dev

好奇的程序员

我想将asp.net mvc multiselect下拉列表与复选框一起使用。如何以最简单的方式添加复选框？我正在使用bootstrap v3

@Html.ListBoxFor(m => Model.DepDashTaskLists[i].BusinessRuleAnswers, new MultiSelectList(slh.GetRegistrationAnswerLookup(Model.DepDashTaskLists[i].BusinessRuleQuestion1), "Value", "Text", Model.DepDashTaskLists[i].BusinessRuleAnswers), new { @class = "form-control", @id = "RuleQuestionListBoxAnswer_" + @Model.DepDashTaskLists[i].TaskId, @rows = "2", @columns = "40" })

番茄32

这是一个基于@jishan siddique建议的示例。您可以访问链接以获取更多信息：http : //davidstutz.github.io/bootstrap-multiselect/

希望对您有帮助，我的朋友:)）

1. Model
public class ProductViewModel
    {
        public List<SelectListItem> Products { get; set; }
        public int[] ProductIds { get; set; }

    }

2. Controller
public IActionResult Index()
        {           
            var model = new ProductViewModel()
            {
                Products = GetProducts()
            };            
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(ProductViewModel product)
        {                
            return View(product);
        }

        private List<SelectListItem> GetProducts()
        {
            var data = new List<SelectListItem>()
                {
                    new SelectListItem()
                    {
                        Value = "1", Text = "Tomato"
                    },
                    new SelectListItem()
                    {
                        Value = "2", Text = "Orange"
                    },
                    new SelectListItem()
                    {
                        Value = "3", Text = "Potato"
                    }
                };
            return data;
        }

3. Views
@model CiberProject.ViewModels.ProductViewModel
@{
    ViewData["Title"] = "Home Page";    
}

<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.Label("Products:")
    <br />
    <br />
    @Html.ListBoxFor(m => m.ProductIds, Model.Products, new { @class = "listbox" })
    <br />
    <br />
    <input type="submit" value="Submit" />
}

@section Scripts
{
    <script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('.listbox').multiselect({
                includeSelectAllOption: true
            });
        });
    </script>
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。