twitter-bootstrap 任何使用 MVC 4 验证实现 Twitter Bootstrap 的方法?而不是使用jquery?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13016929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Any Way to Implement Twitter Bootstrap using MVC 4 validation? Instead of using jquery?
提问by xJedx
As mentioned in the title, any advice would be appreciated. Also, anyway to know how to implement jquery to post data from dropdown list, checked box over to MVC 4 server side and responding back? Like, wow to implement System.Web.Mvc.Html and System.Web.Mvc.Ajax libraries with Twitter Bootstrap component?
如标题所述,任何建议将不胜感激。另外,无论如何要知道如何实现 jquery 以从下拉列表中发布数据,将复选框选中到 MVC 4 服务器端并做出响应?像,哇用 Twitter Bootstrap 组件实现 System.Web.Mvc.Html 和 System.Web.Mvc.Ajax 库?
http://twitter.github.com/bootstrap/There is no way to show how to implement those information mentioned above.
http://twitter.github.com/bootstrap/没有办法展示如何实现上面提到的那些信息。
回答by PeteGO
Here's an HtmlHelper extension method that will use the Twitter Bootstrap error alert (listing the model errors).
这是一个 HtmlHelper 扩展方法,它将使用 Twitter Bootstrap 错误警报(列出模型错误)。
Useage:
用途:
@Html.ValidationSummaryBootstrap();
Result example for multiple model errors:
多个模型错误的结果示例:


A single model error would result in something like this:

单个模型错误会导致如下结果:

Here's the code: (To get the fields highlighted too - see the bottom of this answer).
这是代码:(要突出显示字段 - 请参阅此答案的底部)。
using System.Linq;
namespace System.Web.Mvc
{
public static class HtmlExtensionMethods
{
/// <summary>
/// Returns an error alert that lists each model error, much like the standard ValidationSummary only with
/// altered markup for the Twitter bootstrap styles.
/// </summary>
public static MvcHtmlString ValidationSummaryBootstrap(this HtmlHelper helper, bool closeable)
{
# region Equivalent view markup
// var errors = ViewData.ModelState.SelectMany(x => x.Value.Errors.Select(y => y.ErrorMessage));
//
// if (errors.Count() > 0)
// {
// <div class="alert alert-error alert-block">
// <button type="button" class="close" data-dismiss="alert">×</button>
// <strong>Validation error</strong> - please fix the errors listed below and try again.
// <ul>
// @foreach (var error in errors)
// {
// <li class="text-error">@error</li>
// }
// </ul>
// </div>
// }
# endregion
var errors = helper.ViewContext.ViewData.ModelState.SelectMany(state => state.Value.Errors.Select(error => error.ErrorMessage));
int errorCount = errors.Count();
if (errorCount == 0)
{
return new MvcHtmlString(string.Empty);
}
var div = new TagBuilder("div");
div.AddCssClass("alert");
div.AddCssClass("alert-error");
string message;
if (errorCount == 1)
{
message = errors.First();
}
else
{
message = "Please fix the errors listed below and try again.";
div.AddCssClass("alert-block");
}
if (closeable)
{
var button = new TagBuilder("button");
button.AddCssClass("close");
button.MergeAttribute("type", "button");
button.MergeAttribute("data-dismiss", "alert");
button.SetInnerText("x");
div.InnerHtml += button.ToString();
}
div.InnerHtml += "<strong>Validation error</strong> - " + message;
if (errorCount > 1)
{
var ul = new TagBuilder("ul");
foreach (var error in errors)
{
var li = new TagBuilder("li");
li.AddCssClass("text-error");
li.SetInnerText(error);
ul.InnerHtml += li.ToString();
}
div.InnerHtml += ul.ToString();
}
return new MvcHtmlString(div.ToString());
}
/// <summary>
/// Overload allowing no arguments.
/// </summary>
public static MvcHtmlString ValidationSummaryBootstrap(this HtmlHelper helper)
{
return ValidationSummaryBootstrap(helper, true);
}
}
}
For the individual fields I've been a bit lazy and just coded it into the views (to be refactored).
对于单个字段,我有点懒惰,只是将其编码到视图中(待重构)。
<div class="control-group @if (!ViewData.ModelState.IsValidField("UserName")) { @Html.Raw("error"); }">
<label class="control-label" for="UserName">User name</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on"><i class="icon-user"></i></span>
@Html.TextBoxFor(x => x.UserName, new { @class = "input-medium", @required = true })
<input class="btn" type="button" value="Check" />
</div>
</div>
</div>
回答by Dmitry Efimenko
Use TwitterBootstrapMvc.
For the validation summary you can use the following syntax:
对于验证摘要,您可以使用以下语法:
@Html.Bootstrap().ValidationSummary()
It will render an alert with all errors listed just like in the answer by PeteGo. However, in contrast to the answer by PeteGo, for individual fields it's enough to write something like this:
就像在 PeteGo 的回答中一样,它会呈现一个包含所有错误的警报。但是,与 PeteGo 的答案相反,对于单个字段,编写如下内容就足够了:
@Html.Bootstrap().ControlGroup().TextBoxFor(x => x.UserName)
This helper takes care of all unobtrusive validation attributes as well.
这个助手也负责所有不显眼的验证属性。
Disclaimer: I'm the author of BMVC. Using it is Bootstrap 2 is free. For Bootstrap 3 it requires a license.
免责声明:我是 BMVC 的作者。使用它是 Bootstrap 2 是免费的。对于 Bootstrap 3,它需要许可证。
回答by Carlos Blanco
Give a look at these Visual Studio templates. They implement validation using the MVC4 way. It's more of what you need, but you can get the validation script they use and then utilize it in your own project.
看看这些 Visual Studio 模板。他们使用 MVC4 方式实现验证。它更多是您需要的,但您可以获得他们使用的验证脚本,然后在您自己的项目中使用它。
BootstrapScaffoldMVCTemplates are meant to be used along with MVC 4 TwitterBootstrap Starter Layout Page (Razor) .
BootstrapScaffoldMVCTemplates 旨在与MVC 4 TwitterBootstrap Starter Layout Page (Razor) 一起使用。

