19

次の部分的なビューでは、クライアント側の検証を機能させることができなかったようです。このビューは、親ビューのdivTSettingsdiv内にあります。stackoverflowや他のサイトから多くのことを試しましたが、何も機能していないようです。何か案は？

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>


@using (Ajax.BeginForm("CreateT", "TAdmin", null,
        new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divTSettings"},
                       new { id = "CreateTForm" }))
{
    <div>
        <label>Name:</label>
        <input type="text" name="tName" id="tName"/>
        @Html.ValidationMessage("tName")
        <input type="submit" value="Submit"/>
    </div>
}

<script type="text/javascript">
$(function() {
    $('#CreateTForm').validate({
        rules: {
            tName: {
                required: true
            }
        },
        messages: {
            tName: {
                required: 'Name required'
            }
        }
    });
    $("#CreateTForm").removeData("validator");
    $("#CreateTForm").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("#CreateTForm");
});
</script>
4

2 に答える 2

91

何か案は？

<script>はい、最初にすべきことは、部分ビューからこれらすべてのタグを取り除くことです。部分ビューにはスクリプトを含めないでください。部分ビューには、マークアップのみを含める必要があります。私はこれを何度も繰り返しましたが、それでも人々がそこにスクリプトを入れているのを目にします。</body>スクリプトは、おそらく、レイアウトに登録されている一部のスクリプト セクションをオーバーライドして、すべてのスクリプトが HTML ドキュメントの末尾の終了タグの直前に挿入されるようにすることによって、レイアウトまたはパーシャルをレンダリングしたメイン ビューのいずれかに登録する必要があります。それが彼らの所属です。

OK、実際の問題に移ります。目立たない検証は、DOM に動的に追加された要素をそのまま使用すると機能しません。たとえば、部分ビューを返すサーバーに AJAX リクエストを送信すると、この部分ビューは次のようになります。次に、DOM に注入されます。

機能させるには、新しく追加された要素を目立たない検証フレームワークに登録する必要があります。これを行う$.validator.unobtrusive.parseには、新しく追加された要素でを呼び出す必要があります。

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

このコードは、パーシャルを DOM に挿入する AJAX 成功ハンドラー内に配置する必要があります。新しい要素を注入したら、この関数を呼び出すだけです。

また、jQuery ($.ajax、$.post など) を使用して AJAX リクエストを手動で作成するのではなく、Ajax.BeginForm ヘルパーと Ajax.ActionLink ヘルパーに頼っている場合は、サブスクライブする必要があります。 AjaxOptions で OnSuccess コールバックを呼び出し、このコードをそこに配置します。

于 2013-01-03T07:58:19.670 に答える