3

mvc3 scaffolding によって作成された登録フォームがあります。

例えば

<div class="editor-label">
    @Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)
</div>

等々。

ユーザーが個人か会社かを選択できるドロップダウンリストがあります。個人が選択された場合、生年月日などの個人のプロパティがページに読み込まれますが、オプション「会社」を選択した場合、フォームの一部を (jquery .detach() .attach() を使用して) 非表示に切り替えますフォームの外側の div (したがって、値は送信時に投稿されません)

これは、私のカスタム検証とビューモデルでうまく機能します。唯一の問題は、新しく切り替えた要素のjquery検証がないことです.

目立たない jquery 検証を使用したいのですが、ハンドラーを新しいフォーム要素に手動でアタッチするにはどうすればよいですか (または、検証のために dom 全体を再解析します)。

編集: このブログ投稿を確認した後: http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

コードを更新しようとしました。そこに記述されている JavaScript を含め、フォームの新しく挿入された部分を再解析しようとしました。違いがなかった場合、コードを .remove() および .html() に切り替えて、裸の html を挿入しましたが、何の役にも立ちませんでした。ここに私のスクリプトがあります：

    <script>
        $(document).ready(function () {
            var secretholder = $('#secret_from_holder');
            var visibleholder = $('#type_data_holder');
            var select = $('select#TypeValueID');
            select.change(function () {
                var value = $('select#TypeValueID option:selected').val();
                switch (value) {
                    case '1':
                        var tohide = visibleholder.html();
                        visibleholder.children().remove();
                        var toshow = secretholder.html();
                        secretholder.children().remove();

                        secretholder.append(tohide);
                        visibleholder.append(toshow);

                        $.validator.unobtrusive.parseDynamicContent('div.firm');
                        break;
                    case '2':
                        var tohide = visibleholder.html();
                        visibleholder.children().remove();
                        var toshow = secretholder.html();
                        secretholder.children().remove();

                        secretholder.append(tohide);
                        visibleholder.append(toshow);

                        $.validator.unobtrusive.parseDynamicContent('div.person');
                        break;
                }
            });
        });
    </script>

私が切り替えたフォームの外側にある私の隠し部分は次のとおりです。

    <div id="secret_from_holder" style="display: none">
    @if (Model.TypeValueID == Constants.Crm.Customer.Types.FIRM_VALUE_ID)
    {
        <div class="person">
            <div class="editor-label">
                @Html.LabelFor(model => model.Person.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Person.Name)
                @Html.ValidationMessageFor(model => model.Person.Name)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Person.BirthDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Person.BirthDate)
                @Html.ValidationMessageFor(model => model.Person.BirthDate)
            </div>
            <div class="clear"></div>
        </div>
    }
    else
    { 
        <div class="firm">
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.Name)
                @Html.ValidationMessageFor(model => model.Firm.Name)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.BankAccountNumber)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.BankAccountNumber)
                @Html.ValidationMessageFor(model => model.Firm.BankAccountNumber)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.Tax)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.Tax)
                @Html.ValidationMessageFor(model => model.Firm.Tax)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.EuTax)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.EuTax)
                @Html.ValidationMessageFor(model => model.Firm.EuTax)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.TradeNumber)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.TradeNumber)
                @Html.ValidationMessageFor(model => model.Firm.TradeNumber)
            </div>
            <div class="clear"></div>
        </div>                   
    }
    </div>

私は本当にここで立ち往生しています、助けてください。

（ページロード時に）自動的に解析された部分は常に検証されます（スイッチアウトして再び元に戻った場合でも）が、手動で解析しようとする部分は決して検証されません

4

2 に答える 2

3

クライアント検証に登録するには、新しく追加されたコンテンツを解析する必要があります。そして、これらの問題について説明している別のブログ投稿があります。そしてさらにもう1つ。

于 2011-07-14T10:46:36.633 に答える
1

また、部分ビューを使用して Ajax でコンテンツを動的にロードするという同様のシナリオもありました。2 段階のプロセスでコードを機能させることができました。

  1. コンテンツが DOM に読み込まれると、次のことを行いました。

    $.ajax({
   type: "Get",
   url: SomeURL,
   data: { TransactionId: recordId },
   success: function (data) {
      $('#SomeDiv').html(data);
      $.validator.unobtrusive.parse('#SomeDiv');              
      ShowModal();
   }
});

  2. フォームを送信するときに、次のことを行いました。

    var form = $('#SomeDiv').find('form');
if ($(form).valid()) {
   // call ajax post
}

そして、それは目立たない検証を引き起こすように見えました. 誰かがこれから何かを得ることを願っています。

于 2014-07-02T04:31:57.927 に答える