25

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 のクラス エラーを設定することです。その他の問題は、エラーにスパンタグを使用する方法がわからないことです。HtmlHelper でメソッドを記述できましたが、 、 、 のほぼすべての機能を再実装する必要がLabelForありEditorForますValidationMessageFor。これを行う簡単な方法はありますか？そして、目立たない検証はどうですか?

4

6 に答える 6

22

私は同じ課題に遭遇し、ラベルの助けを借りて（以下を参照）、ここに私が得たものがあります：

<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

プロジェクトのソース コード全体は、まもなく利用可能になるはずです (私のプロフィールを参照するか、直接私に尋ねてください)。

于 2012-06-25T16:10:09.287 に答える
8

少し遅い回答ですが、より良い解決策を提案しますので、私の回答を完全に受け入れてください;)

TwitterBootstrapMVCを使用します。

1 行のコードで、必要な html を正確に生成します。

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

グローバルエラーの場合、書く必要があるのは次のとおりです。

@Html.Bootstrap().ValidationSummary()

... すべてのエラーがリストされたアラート div が生成されます。クライアント側の検証では、スタイルを適切に設定するためにいくつかの JavaScriptが必要であることに注意してください。

その上、邪魔にならないすべての検証タグを処理します。また、入力/ラベルの完全なカスタマイズを可能にする流暢な構文も提供します...

見てみな！

免責事項: 私は TwitterBootstrapMVC の作成者です。Bootstrap 3 (および TwitterBootstrapMVC 3) の時点で、TwitterBootstrapMVC を使用するにはライセンスが必要です。

于 2013-07-08T04:24:25.313 に答える
6

私は勝手に、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");
    }
于 2012-07-01T12:03:22.373 に答える
0

メインのLabelFor、EditorFor、およびValidationForを使用するだけで成功して実装したBrainDonorに関する記事があります。これをサイト全体のjsに配置しました。次に、コントロールグループのdivがあることを確認してください。

于 2012-10-11T21:01:55.810 に答える
0

次の JavaScript をページに追加することで、MVC3 検証を Bootstrap フレームワークと統合できます (表示)。

<script>
$(document).ready(function () {
/* Bootstrap Fix */
$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest("div.control-group").addClass("error");
    },
    unhighlight: function (element) {
        $(element).closest("div.control-group").removeClass("error");
    }
});
var current_div;
$(".editor-label, .editor-field").each(function () {
    var $this = $(this);
    if ($this.hasClass("editor-label")) {
        current_div = $('<div class="control-group"></div>').insertBefore(this);
    }
    current_div.append(this);
});
$(".editor-label").each(function () {
    $(this).contents().unwrap();
});
$(".editor-field").each(function () {
    $(this).addClass("controls");
    $(this).removeClass("editor-field");
});
$("label").each(function () {
    $(this).addClass("control-label");
});
$("span.field-validation-valid, span.field-validation-error").each(function () {
    $(this).addClass("help-inline");
});
$("form").each(function () {
    $(this).addClass("form-horizontal");
    $(this).find("div.control-group").each(function () {
        if ($(this).find("span.field-validation-error").length > 0) {
            $(this).addClass("error");
        }
    });
});
});
</script>

また、ビュー (「Create.cshtml」など) で、フォームのフィールドが次のようにフォーマットされていることを確認してください...

    <div class="editor-label">
        @Html.LabelFor(Function(model) model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(Function(model) model.Name)
        @Html.ValidationMessageFor(Function(model) model.Name)
    </div>
于 2012-12-14T14:46:58.673 に答える