如何在 mvc 4 中使用多项选择？

Posted 2023-03-05

【中文标题】如何在 mvc 4 中使用多项选择？

【英文标题】：How to use multiple select in mvc 4?

【发布时间】：2012-11-26 10:39:08

【问题描述】：

我想使用多选 Chosen。 我有类似的技能模型，

public class Skill 
    
        public int Id  get; set; 
        public string Name  get; set;         
    

这适用于我的应用程序：

    <select data-placeholder="Choose a Country..." class="chzn-select" multiple >
           <option value=""></option>
           <option value="United States">United States</option>
           <option value="Albania">Albania</option>
           <option value="Algeria">Algeria</option>
   </select>

我想用我的数据替换国家数据。在控制器中我写：

        var list = MyService.LoadAllSkills();
        ViewBag.Skills = new MultiSelectList(list, "Id", "Name");

在视图中：

@html.ListBox("Name", ViewBag.Skills as MultiSelectList,
              new  @class = "chzn-select"  )

@Html.ListBox()和@Html.DropDownList()的查看结果与<select>不一样

我得到了这样的结果：

但是，我想得到结果

如何更改选择的样本？

【问题讨论】：

尝试任何 jquery 插件。

@Kundan Singh Chouhan，你能分享任何其他链接吗？对于其他插件

【参考方案1】：

我可以看到硬编码示例（您说它正在工作）与您使用 ListBox 帮助程序生成的示例之间的唯一区别是缺少 data-placeholder 属性。所以：

@Html.ListBox(
    "Countries", 
    ViewBag.Skills as MultiSelectList,
    new  @class = "chzn-select", data_placeholder = "Choose a Country..."  
)

这至少应该生成与您所说的工作相同的标记。如果它不起作用，那么可能你没有正确设置插件或者你有一些其他的 javascript 错误。阅读插件文档，了解如何设置。

【讨论】：

那么您可能在设置与 ASP.NET MVC 完全无关的插件时遇到了其他问题。就服务器端代码而言，它应该生成与您在问题中显示的内容完全相同的标记。还要注意，在服务端使用data_placeholder时，helper在生成对应属性时会自动将其转换为data-placeholder。

【参考方案2】：

正如其他人提到的，您的问题原因似乎不是服务器端（剃刀），它实际上是客户端（很可能是您的 Jquery 插件初始化）。

可能在调用html DOM的插件初始化还没有生成的时候，把你的插件初始化脚本放在body的最后或者$(document).ready()里面，别忘了去控制台看看有没有任何错误

快乐编码