3

如标题中所述，任何建议将不胜感激。另外，无论如何要知道如何实现 jquery 从下拉列表中发布数据，选中复选框到 MVC 4 服务器端并回复？像，哇用 Twitter Bootstrap 组件实现 System.Web.Mvc.Html 和 System.Web.Mvc.Ajax 库？

http://twitter.github.com/bootstrap/ 没有办法展示如何实现上面提到的那些信息。

4

3 回答 3

16

这是一个 HtmlHelper 扩展方法，它将使用 Twitter Bootstrap 错误警报（列出模型错误）。

用途：

@Html.ValidationSummaryBootstrap();

多个模型错误的结果示例：

多个错误示例

单个模型错误将导致如下所示： 单个错误示例

这是代码：（要突出显示字段 - 请参阅此答案的底部）。

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">&times;</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);
        }
    }
}

对于各个字段，我有点懒惰，只是将其编码到视图中（待重构）。

<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>
于 2013-01-14T21:08:07.050 回答
4

使用TwitterBootstrapMvc。

对于验证摘要，您可以使用以下语法：

@Html.Bootstrap().ValidationSummary()

它将呈现一个警报，其中列出了所有错误，就像 PeteGo 的答案一样。但是，与 PeteGo 的答案相反，对于单个字段，编写如下内容就足够了：

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

该助手还负责处理所有不显眼的验证属性。

免责声明：我是 BMVC 的作者。使用它是 Bootstrap 2 是免费的。对于 Bootstrap 3，它需要许可证。

于 2013-07-08T06:51:01.113 回答
2

看看这些 Visual Studio 模板。他们使用 MVC4 方式实现验证。这更多是您需要的，但您可以获取他们使用的验证脚本，然后在您自己的项目中使用它。

Bootstrap脚手架MVC模板

BootstrapScaffoldMVCTemplates 旨在与MVC 4 TwitterBootstrap Starter Layout Page (Razor)一起使用。

于 2012-11-08T19:35:32.317 回答