6

ユーザー アカウントを作成するためのフォームを備えた MVC4 インターネット アプリケーションがあります。フォームの検証は機能しますが、入力が検証に失敗している間、エラー メッセージは表示されません。検証の問題が解決されるまで送信できませんが、テキストはありません

Razor ビュー フォーム

<h2>Create New Account</h2>
<fieldset>
    <legend></legend>
    @using (Html.BeginForm("CreateUser",null)){
        @Html.AntiForgeryToken()
        <table class="create">
            <tr>
                <td colspan="2"><b>New Account</b>
            </tr>
            <tr>
                <td>@Html.DisplayNameFor(model=>model.UserName)</td><td>@Html.TextBoxFor(model=>model.UserName)</td>
                <td>@Html.DisplayNameFor(model=>model.EmailAddress)</td><td>@Html.TextBoxFor(model=>model.EmailAddress)</td>
                <td><input type="submit" value="Create User" /></td>
            </tr>
        </table>
    }
</fieldset>
    @Html.ValidationSummary()

使用されるバンドルには、検証ファイルが含まれています

bundles.Add(new ScriptBundle("~/bundles/asset").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate*",
            "~/Scripts/jquery.unobtrusive*"));

使用されるモデルはエンティティ モデルです。検証要件に注釈を付けるために部分クラスを追加しました。

[MetadataType(typeof(UserProfileMetadata))]
public partial class UserProfile
{
    //Empty Class just required for adding class level attribute
}

public class UserProfileMetadata
{
    //Fields from user profile requiring annotations
    [EmailAddress]
    [Required]
    [Display(Name = "Email Address")]
    public string  EmailAddress { get; set; }

    [Required]
    public string UserName { get; set; }

}

検証は機能していますが、メッセージを表示すると、マークアップ エラーであると思われますが、表示されません。

4

2 に答える 2

14

ValidationSummary をフォーム内に移動すると修正されます。

<h2>Create New Account</h2>
<fieldset>
    <legend></legend>
     @using (Html.BeginForm("CreateUser",null)){
        @Html.ValidationSummary()
        @Html.AntiForgeryToken()
        <table class="create">
            <tr>
                <td colspan="2"><b>New Account</b>
            </tr>
            <tr>
                <td>@Html.DisplayNameFor(model=>model.UserName)</td>    <td>@Html.TextBoxFor(model=>model.UserName)</td>
            <td>@Html.DisplayNameFor(model=>model.EmailAddress)</td><td>@Html.TextBoxFor(model=>model.EmailAddress)</td>
            <td><input type="submit" value="Create User" /></td>
        </tr>
    </table>
}
</fieldset>
于 2013-06-19T13:02:58.907 に答える
5

フォームへの移動に制限されたくない@Html.ValidationSummary、つまり _Layout.cshtml に住んでいて、そこが好きな人のために、これを回避する方法があります。

以下の方法は、Microsoft がデータを入力するために使用しているよう@Html.ValidationSummaryです。標準形式では、data-valmsg-summary-truein を探し$('this')ます。thisこの場合は呼び出しフォームです。さて、私は_Layout.cshtml を DRY に保つために@Html.ValidationSummary生活しています。pageBody <div>

function onErrors(event, validator) { // '#pageBody' is the containing element
    var container = $('#pageBody').find("[data-valmsg-summary=true]"), 
    list = container.find("ul"); if (list && list.length && validator.errorList.length) {
        list.empty(); container.addClass("validation-summary-errors").removeClass("validation-summary-valid");
        $.each(validator.errorList, function () {
             $("<li />").html(this.message).appendTo(list);
        });
    }
}

これまでのところ、私はこれだけを変更しました：

var container = $('this').find("[data-valmsg-summary=true]")

これに：

var container = $('#pageBody').find("[data-valmsg-summary=true]")

ここで、ボタンのクリックから検証をトリガーします。起動するonErrors(event, validator)には、次の jQuery を使用しました。

    $('#btnSave').click(function () {
        if ($('form').valid()) {
           // Do stuff
        } else {
            onErrors(event, $('form').data('validator'));
        }
    });

出来上がり、@Html.ValidationSummary は、jQuery.unobtrusive を使用している場合でも入力されます。

ここで正しい方向に向けてくれた Leniel Macaferi に大いに感謝します: http://www.leniel.net/2013/08/customizing-aspnet-mvc-html-validation-summary-with-bootstrap-3-panel.html #sthash.jGRguVuV.qSjYUlhS.dpbs

于 2014-02-28T09:15:44.693 に答える