【ASP.NET MVC】後から読み込んだ部分ビューのクライアント検証が効かない時の対処法

こんにちは、Noyです。

今回はASP.NET MVCのバリデーションについてです。

問題

「後から読み込んだ部分ビューのクライアント検証が効かない」

Modelには以下のデータアノテーションを付けています。入力が空、もしくは文字数が500文字を超えたらエラーメッセージを出してほしいのですが出てくれません。

public partial class Comment
{
~省略~
    [DisplayName("コメント")]
    [Required(ErrorMessage = "{0}が空です")]
    [StringLength(500, ErrorMessage ="{0}は{1}文字以内にしてください")]
    public string context { get; set; }
~省略~
}

編集ボタンがクリックされたら、非同期で以下の部分ビュー(編集フォーム)を読み込んで表示しています。

@model YumeSetori.Models.Comment

@using (Html.BeginForm("EditComment", "Home", FormMethod.Post))
{
    <div class="d-flex ml-5">
        <div class="input-group align-items-end">
            @Html.TextAreaFor(Model => Model.context, new { @class = "underline form-control", rows = "1", placeholder = "コメントを入力", id = "editComment-textarea" })
            @Html.Hidden("comment_id", Model.comment_id)
        </div>
    </div>
    <div class="align-items-center d-flex mt-2">
        @Html.ValidationMessageFor(Model => Model.context)
        <div class="ml-auto">
            <div class="btn btn-secondary" onclick="cancelEdit('@(Model.comment_id)')">キャンセル</div>
            <input class="btn btn-primary" id="sendComment" type="submit" value="送信" disabled>
        </div>
    </div>
}

部分ビューを読み込むコードは以下。HomeコントローラーのEditCommentアクションにGETリクエストを投げます。

// コメント編集フィールドを準備
var editComment = function (id) {
    var $thisComment = $("#" + id);
    var actionUrl = '@Url.Action("EditComment", "Home")' + '?commentId=' + id;
    $thisComment.find(".edit-comment").load(actionUrl);
}

一応、アクションは以下。

public ActionResult EditComment(Guid commentId)
{
    if (commentId == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    HomeWorkerService workerService = new HomeWorkerService();
    Comment comment = workerService.GetComment(commentId);
    if (comment == null)
    {
        return HttpNotFound();
    }

    return PartialView("_EditComment", comment);
}

解決策

部分ビューを読み込んだ後に以下のjQueryコードを実行します。

$.validator.unobtrusive.parse($('form'));

こいつを実行することで、 HTML DOM を走査して、「data-val-○○」といった “控えめ JavaScript” 方式のためのマークアップを探しだし、適切にイベントハンドラを付けてあげることができるようです。

参考情報

以下記事のおかげで解決できました。ありがとうございますm(__)m

c# — MVC 4クライアント側の検証が機能しない

ASP.NET MVC3 での独自検証属性によるクライアント側検証ではまったこと : @jsakamoto

コメント

タイトルとURLをコピーしました