0

私は、Jquery 検証プラグインを使用して、MVC4 アプリケーションでいくつかの動的入力コントロールを作成しています。クライアント側の検証スクリプトを生成するには、次のリンクをたどっています。

http://jqueryvalidation.org/

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js

jQuery validate:正規表現検証のルールを追加するには?

Razor ビューには、モデルからレンダリングされたコントロールと、ユーザーが定義したデータベースから動的にレンダリングされたコントロールがあります。

以下はレンダリングされたHTMLです

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/Scripts/jquery-ui-1.8.20.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/Content/DynamicForms/jquery.validate.js"></script>
    <script src="/Content/DynamicForms/additional-methods.js"></script>
    <script src="/Content/Breadcrumb/jquery.easing.1.3.js"></script>
    <script src="/Content/Breadcrumb/jquery.jBreadCrumb.1.1.js"></script>
</head>
<body>
    <div id="body">
        <section class="content-wrapper main-content clear-fix">


<form action="/Cabinet/Create" id="frmOperator" method="post">    <fieldset>
        <legend>File</legend>

        <div class="editor-field">
        <label for="IndexCard_Uid">Uid</label>
        </div>
        <div class="editor-label">
        <input data-val="true" data-val-number="The field Uid must be a number." data-val-required="The Uid field is required." id="IndexCard_Uid" name="IndexCard.Uid" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="IndexCard.Uid" data-valmsg-replace="true"></span>
        </div>
        <br/>

        <div class="input_area">
  <div id="new_form_handle_row">
    <label class="text_label clear_left" for="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379">Name</label>
    <input data-rule-required="true" id="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379" name="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379" type="text" value="" />
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
  <script>      $("#frmOperator").validate();</script>
</div>
        <p>
            <input type="submit" value="Create" />
        </p>
        <br/>
    </fieldset>
</form>
<a data-ajax="true" data-ajax-mode="replace" data-ajax-success="javascript:PopUp()" data-ajax-update="#dialog-cabinet" href="/Cabinet/CreateCabinet?rand=0.0905532776799767">Create</a>
<div id="dialog-cabinet" title="Create New Cabinet"></div>

<script language="javascript" type="text/javascript">
    function PopUp() {
        alert("#dialog-cabinet");
        $("#dialog-cabinet").dialog({
            height: 500,
            width: 500,
            modal: true
        });
    }
</script>
            </section>
    </div>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
</body>
</html>

この html は、モデル コントロールと動的コントロールを検証します。しかし、問題は、ページの最初と最後で次の行を 2 回呼び出す必要があることです。これにより、メソッド $("#dialog-cabinet").dialog() を使用してポップアップ ダイアログを開くことができなくなります。

<script src="/Scripts/jquery-1.7.1.js"></script>
        <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>

MVCでjquery検証プラグインを使用するより良い方法を知っている人はいますか?

前もって感謝します。

 <input data-val="true" data-val-number="The field Uid must be a
        number." data-val-required="The Uid field is required."
        id="IndexCard_Uid" name="IndexCard.Uid" type="text" value="" />
 <span class="field-validation-valid" data-valmsg-for="IndexCard.Uid" data-valmsg-replace="true"></span>


    <input data-rule-required="true"
        id="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379"
            name="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379"
            type="text" value="" />

 <script>    $("#frmOperator").validate({ rules: {} });</script>

1 つ目は、mvc によって生成された入力です。2 つ目は、データベースの値から生成された入力です。3 つ目は、jquery 検証を使用して動的コントロールを検証するスクリプトです。最後または開始時にスクリプトを削除すると、両方の検証が機能しません。しかし、スクリプトを2回ロードすると、次の方法を使用してポップアップをロードできませんでした

function PopUp() {
            alert("#dialog-cabinet");
            $("#dialog-cabinet").dialog({
                height: 500,
                width: 500,
                modal: true
            });
        }

誰かが助けてくれるなら、私は感謝します。

4

1 に答える 1

0

スクリプト行を 2 回呼び出す必要はないと思います。デフォルトの Layout.cshtml には、最後にスクリプト セクションがあり、jquery スクリプトが含まれています。これにより、レンダリングされた HTML の最後にスクリプト行が生成されます (モダナイザー スクリプトを実行します)。スクリプト ファイルは最後にロードする必要があるため、これは正しいことです (詳細については、http://developer.yahoo.com/performance/rules.html#js_bottomを参照してください)。

何らかの理由で、jquery スクリプトも layout.cshtml の head 部分に読み込まれましたが、これはまったく間違っていますが、スクリプトは一度だけ読み込まれるべきです。

VS ダイアログを使用してフォームの新しい部分ビューを作成した場合は、[スクリプト ライブラリを参照] という名前のチェックボックスがあります。チェックボックスをオンにすると、新しい部分ビューが作成され、部分ビューの最後に次の行が表示されます。

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

これは@RenderSection("scripts", false)Layout.cshtml の行を参照し、レンダリングされた HTML の に jQuery 検証スクリプトを配置します。

簡単に言えば：

  • 最後または最初のスクリプトを削除する必要があります
于 2013-08-07T10:12:25.027 に答える