我如何使用引导下拉菜单和警报而不是 @Html.DropDownList 和我的 asp.net MVC 警报答案

【问题标题】：How can i use the bootstrap dropdowns and alerts instead of the @Html.DropDownList & alert for my asp.net MVC我如何使用引导下拉菜单和警报而不是 @Html.DropDownList 和我的 asp.net MVC 警报
【发布时间】：2012-03-09 01:16:56
【问题描述】：

我有以下包含 @Html.DropDownList 的视图：-

<fieldset> 
        <legend>Answer here</legend> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Description) 
        </div> 
        <div class="editor-field" data-toggle="dropdown"> 
            @Html.EditorFor(model => model.Description) 
            @Html.ValidationMessageFor(model => model.Description) 
        </div> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.IsRight) 
        </div> 
        <div class="editor-field"> 
             @Html.DropDownList("IsRight", String.Empty) 
            @Html.ValidationMessageFor(model => model.IsRight) 
        </div>  
    </fieldset>

以及以下显示简单警报消息的 Java 脚本：-

<script type="text/javascript">
    function removePartial2() {z
        alert('Deletion was successful'); 
        $(this).remove();
}
</script>

我已经从 bootstrap 网站下载了相关的脚本文件（bootstrap-dropdown.js 和 bootstrap-alert.js），但我不知道如何修改上述代码才能同时使用 bootstrap我的 asp.net MVC 中的下拉菜单和引导警报消息。？ BR

【问题讨论】：

标签： asp.net-mvc-3 twitter-bootstrap

【解决方案1】：

正如您在http://twitter.github.com/bootstrap/components.html#buttonDropdowns 中看到的那样，它们并不像 .net 下拉列表那样工作，因为它不保留所选值，但您可以在 javascript 中做一些变通方法。我不会推荐它...

【讨论】：

【解决方案2】：

您还必须引用 bootstrap CSS 文件，并且您将无法使用 Html.DropDownList，您必须按照 bootstrap 的示例格式化 html，如下所示：

<ul class="nav pills">
     <li class="dropdown" id="menu1">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
          Dropdown
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

与警报类似：

<div class="alert">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

【讨论】：

【解决方案3】：

开箱即用的实现不适用于 boostrap。但是，您可以在 razor 中使用“助手”以任何您喜欢的方式构建 dd。 scottgu 的这篇文章应该可以帮助您：

ASP.NET MVC 3 and the @helper syntax within Razor

【讨论】：