具有引导样式的MVC5下拉列表 - 如何？ [英] MVC5 dropdownlistfor with bootstrap styling - how?

问题描述

我正在尝试使用引导程序样式显示 DropDownListFor ，但我尝试过的所有内容都无法根据需要呈现控件。我该如何实现？



我尝试过：



我已经NuGet'd bootstrap-select，并在BundlesConfig.cs中这样做了

 bundles.Add（ new  ScriptBundle（ 〜/ bundles / bootstrap）。 
包含（ 〜/ Scripts / bootstrap.js，
  〜/ Scripts / bootstrap-select.js，
  〜/ Scripts / respond.js））; 
 
 bundles.Add（ new  StyleBundle（ 〜/ Content / css）。
包含（ 〜/ Content /bootstrap.css，
  〜/ Content / bootstrap-select.css，
  〜/ Content / site.css））; 

我的剃刀代码如下：

 @ Html.DropDownListFor（model = >  model.MyList，
  new  SelectList （...），   - 选择或添加 - ，
  new  {htmlAttributes =  new  {@class =   form-control}}）

解决方案

仅当您使用 EditorFor 时才需要 htmlAttributes 部分。使用 DropDownListFor 或 TextBoxFor ，或者呈现单个控件的任何其他帮助器，该对象直接包含属性：

 @ Html.DropDownListFor（model => model.MyList，
 new SelectList（...）， -  Select or Add  - ，
 new {@class =form-control}）

Html.EditorFor和htmlAttributes [ ^

I'm trying to get a DropDownListFor to display with the bootstrap style, but everything I've tried has failed to render the control as desired. How do I make it happen?

What I have tried:

I've NuGet'd bootstrap-select, and did this in BundlesConfig.cs

bundles.Add(new ScriptBundle("~/bundles/bootstrap").
        Include("~/Scripts/bootstrap.js",
                "~/Scripts/bootstrap-select.js",
                "~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").
        Include("~/Content/bootstrap.css",
                "~/Content/bootstrap-select.css",
                "~/Content/site.css"));

And my razor code looks like this:

@Html.DropDownListFor(model => model.MyList, 
                      new SelectList(...), " - Select or Add -", 
                      new { htmlAttributes = new { @class = "form-control" } })

解决方案

The htmlAttributes part is only required if you're using EditorFor. With DropDownListFor, or TextBoxFor, or any of the other helpers which render a single control, the object contains the attributes directly:

@Html.DropDownListFor(model => model.MyList, 
                      new SelectList(...), " - Select or Add -", 
                      new { @class = "form-control" })

Html.EditorFor and htmlAttributes[^]

这篇关于具有引导样式的MVC5下拉列表 - 如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！