3

タイトルにあるように、アドバイスをいただければ幸いです。また、とにかく、ドロップダウンリストからデータを投稿するためにjqueryを実装する方法を知り、チェックボックスをMVC 4サーバー側に切り替えて応答しますか？同様に、Twitter Bootstrapコンポーネントを使用してSystem.Web.Mvc.HtmlおよびSystem.Web.Mvc.Ajaxライブラリを実装するのはすごいですか？

http://twitter.github.com/bootstrap/ 上記の情報を実装する方法を示す方法はありません。

4

3 に答える 3

16

Twitter Bootstrap エラー アラート (モデル エラーのリスト) を使用する HtmlHelper 拡張メソッドを次に示します。

用途:

@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 の方法を使用して検証を実装します。それはあなたが必要とするものではありませんが、彼らが使用する検証スクリプトを入手して、それを自分のプロジェクトで利用することができます.

BootstrapScaffoldMVCテンプレート

BootstrapScaffoldMVCTemplates は、 MVC 4 TwitterBootstrap Starter Layout Page (Razor)と共に使用することを意図しています。

于 2012-11-08T19:35:32.317 に答える