如何在 Asp.NET MVC 中使用复选框创建多选下拉菜单

Posted

技术标签:

【中文标题】如何在 Asp.NET MVC 中使用复选框创建多选下拉菜单【英文标题】:How to Create MultiSelect dropdown with checkboxes in Asp.NET MVC 【发布时间】:2021-04-09 21:18:54 【问题描述】:

我想使用带有复选框的 asp.net mvc 多选下拉菜单。 如何以最简单的方式添加复选框? 我正在使用引导程序 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" ) 

【问题讨论】:

请查看此链接github.com/davidstutz/bootstrap-multiselect,此链接可能对您有所帮助c-sharpcorner.com/article/… 【参考方案1】:

这是一个示例,基于@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>

【讨论】:

我收到错误 System.Web.Mvc.HttpAntiForgeryException: '所需的防伪表单字段 "__RequestVerificationToken" 不存在。' 我也收到一个错误 Uncaught TypeError: $(...).multiselect is not a function。 @Curious-programmer:这个表单你不用_Layout? @Curious-programmer:在表单中添加@Html.AntiForgeryToken()。如果你需要,我会编辑我的答案,我的朋友。 感谢帮助,我添加了一个相关问题***.com/questions/65569599/…【参考方案2】:

1首先将 jQuery 和 Bootstrap 框架加载到您的 HTML 文档中。

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2在此之后,将 Bootstrap multiselect's CSS 和 JavaScript 文件包含到您的页面中。

<!-- Bootstrap Multiselect CSS -->
<link rel="stylesheet" href="css/bootstrap-multiselect.css">

<!-- Bootstrap Multiselect JS -->
<script data-main="dist/js/" src="js/require.min.js"></script>

3 现在创建带有唯一 id 选项列表的 HTML 选择元素。如下所示。

<select id="mySelect" multiple="multiple">
<option value="Option one">Option one</option>
<option value="Option two">Option two</option>
<option value="Option three">Option three</option>
<option value="Option four">Option four</option>
<option value="Option five">Option five</option>
<option value="Option six">Option six</option>
</select>

4 最后调用插件来激活多选。

<script>
require(['bootstrap-multiselect'], function(purchase)
$('#mySelect').multiselect();
);
</script>

您可以访问链接以参考更多:https://www.codehim.com/demo/bootstrap-multiselect-dropdown/

【讨论】:

以上是关于如何在 Asp.NET MVC 中使用复选框创建多选下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ASP.NET Core MVC 的同一视图中添加/创建多个一对多关系

如何在我的 ASP.NET MVC 应用程序中实现“全选”复选框?

如何禁用 ASP.NET MVC 中 HtmlHelper 方法生成的单选按钮和复选框?

如何使用 DataAnnotations 处理 ASP.NET MVC 2 中的布尔值/复选框?

ASP .Net MVC,复选框问题!

如何在 ASP.NET MVC 中创建 CheckBoxListFor 扩展方法?