0

[ Required ] 属性が整数、倍精度、文字列、日付などの ViewModel プロパティを装飾する場合、入力テキストボックスの後に画像スパンを自動的に追加します。

たとえば、私の ViewModel は次のようになります

public class MyViewModel 
{
    [Required]
    public string  Name { get; set; }
}

私のビューは次のようになります

@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)

出力は次のようになります

<input id="Name" class="text-box single-line" type="text" value="" name="Name" data-val-required="The Name field is required." data-val-length-max="20" data-val-length="The field Name must be a string with a maximum length of 20." data-val="true">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Name"></span>

-- Note the automatically added span
<span class="indicator required" style="width: 11px;"></span>

画像を表示するcssを用意するつもりでした。

span.required {
    background-image: url("required.png");
}

これは可能ですか、またはこのタイプの機能を実装するために独自のヘルパー メソッドを作成する必要がありますか?

4

2 に答える 2

2

はい、可能ですが、一般的にはお勧めしません。テンプレートは型のレンダリングをカスタマイズするために存在するものであり、別のテンプレートをオーバーライドするかどうかを気にせずにテンプレートを作成できるはずだからです。

代わりに、次のようなカスタム LabelFor ヘルパーを作成します。

http://weblogs.asp.net/imranbaloch/archive/2010/07/03/asp-net-mvc-labelfor-helper-with-htmlattributes.aspx

またはここ：

http://weblogs.asp.net/raduenuca/archive/2011/02/17/asp-net-mvc-display-visual-hints-for-the-required-fields-in-your-model.aspx

3 番目のオプションは、MVC で何もせずに、標準の MVC 検証データ属性に基づいてインジケーターを追加する JavaScript を追加することです (目立たない検証を使用している場合)。ここで答えを見てください：

https://stackoverflow.com/a/8524547/61164

于 2013-03-13T03:53:47.180 に答える
1

私がしたことは、jquery.validate.unobtrusive JS ファイルを変更して、検証エラーが発生した場合に、特に画像用に 2 番目のコンテナーを追加することでした。

var container2 = $(this).find("[data-valimg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replace = $.parseJSON(container.attr("data-valimg-replace")) !== false;

    container2.removeClass("img-validation-valid").addClass("img-validation-error");

次に、それをモデルにバインドすることを忘れないでください:

error.data("unobtrusiveContainer", container2);

最後に、if (置換) コード ブロックでそれを空にします。

if (replace) {
        container.empty();
        container2.empty();
        error.removeClass("input-validation-error").appendTo(container);            
    }
    else {
        error.hide();
    }

成功したら、それを非表示にすることを忘れないでください:

var container2 = error.data("unobtrusiveContainer"),
        replace = $.parseJSON(container.attr("data-valimg-replace"));

    if (container2) {
        container2.addClass("img-validation-valid").removeClass("img-validation-error");
        error.removeData("unobtrusiveContainer");

        if (replace) {
            container2.empty();
        }
    }

ファイル内の onError 関数と onSuccess 関数を見れば、それらをどこに配置できるかがわかります。

ビューで、検証対象の各フォーム入力に次のコード行を追加します。

<img class="img-validation-valid" data-valimg-replace="true" data-valimg-for="<replace with field name here, ie. Name>" src="required.png" />

[Required]属性でこれをテストしただけですが、機能します。また、画像だけでなく、他のものを生成するためにもこれを使用できると確信しています。

于 2013-03-13T04:02:15.133 に答える