将Twitter Bootstrap与Asp.net MVC 3表单集成

Question

我正在使用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.有更简单的方法吗？那不引人注目的验证怎么样？

Answer 1

我遇到了同样的挑战,并为标签提供了一些帮助(见下文),这是我得到的:

<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.LabelFor实施:https://stackoverflow.com/a/6722082

我没有尝试使用不引人注意的验证,但似乎你只需要激活它.

如果您正在寻找全局错误,您应该使用以下内容:

@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

整个项目源代码应该很快就会提供(请参阅我的个人资料 - 或直接问我).

Answer 2

有点迟到的答案,但我会提出一个更好的解决方案,你应该完全接受我的答案;)

使用TwitterBootstrapMVC.

使用单行代码,它将生成您需要的html:

@Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Field)

对于全局错误,您需要编写的是:

@Html.Bootstrap().ValidationSummary()

...它将生成一个警告div,其中列出了所有错误.请注意,对于客户端验证,需要一些JavaScript才能正确设置样式.

最重要的是,它将为您处理所有不显眼的验证标签.它还提供流畅的语法,可以完全自定义输入/标签......

看看这个!

免责声明:我是TwitterBootstrapMVC的作者.自Bootstrap 3(和TwitterBootstrapMVC 3)起,TwitterBootstrapMVC需要许可证才能使用.

Answer 3

我冒昧地创建了一个扩展方法,它封装来自Sherbrow的代码,以便在字段无效时呈现错误类.这种扩展方法的优点是强类型和更短的写入:

public static MvcHtmlString ModelStateFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
    {
        var modelMetadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);

        if (html.ViewData.ModelState.IsValidField(modelMetadata.PropertyName))
        {
            return MvcHtmlString.Empty; 
        }

        return new MvcHtmlString("error");
    }