集成Twitter Bootstrap与Asp.net MVC 3形式

前端之家收集整理的这篇文章主要介绍了集成Twitter Bootstrap与Asp.net MVC 3形式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_0@
我使用Asp.net MVC 3和Twitter Bootstrap。我想要的是集成他们。我的大问题是形式。我使用HtmlHelper,它是一个问题,当涉及到验证,我想要它生成HTML像这样:
<div class="control-group error">
   <label for="field" class="control-label">OMG this label is so awesome: </label>
   <div class="controls">
      <input type="text" name="field" id="field" value="yeah" />
      <span class="help-inline">Eventually some error :C</span>
   </div>
</div>

这里是我的HtmlHelper代码

@Html.LabelFor(x => x.Field)
@Html.EditorFor(x => x.Field)
@Html.ValidationMessagesFor(x => x.Field)

问题是,我想要的最外面的div上的类错误只有当这个字段中实际上有错误时才被设置。其他问题是,我不知道如何强制使用span标签错误。我可以在HtmlHelper中编写我的方法,但它会让我重新实现LabelFor,EditorFor和ValidationMessageFor的几乎所有的功能。有更简单的方法吗?而不引人注目的验证呢?

解决方法

我遇到同样的挑战和一些帮助的标签(见下文),这里是我得到:
<div class="control-group @if (!ViewData.ModelState.IsValidField("Name")) { @Html.Raw("error"); }">
    @Html.LabelFor(model => model.Name,new {@class = "control-label"})
    <div class="controls">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name,null,new {@class = "help-inline"})
    </div>
</div>

Html.Label实现:http://stackoverflow.com/a/6722082

我没有尝试用unstrstrusive验证,但它似乎你只需要激活它。

如果你正在寻找一个全局错误,你应该使用类似:

@if (ViewData.ModelState.IsValid == false) {
    <div class="alert alert-error"><button class="close" dismiss="alert">x</button><!-- some text--></div>
}

这里有一个活的例子(法语):http://ws.sherbrow.fr/auth

整个项目的源代码应该有一段时间可用(见我的个人资料 – 或直接问我)。

猜你在找的Bootstrap相关文章