4

私が取り組んでいるサイトの束にjQueryテンプレートを使用していますが、クライアント側で検証を実装する方法を決定する必要があるところまで来ました。サーバーサイドは、さまざまなモデルを扱う Asp.Net Mvc Restful サービスです。モデルは、検証を説明する DataAnnotations で装飾されています。以下に例を示します (エラー コピーにリソース ファイルを使用していることに注意してください)。

    [Required(
        ErrorMessageResourceType = typeof(Validation),
        ErrorMessageResourceName = "HomeAddressRequired")]
    [StringLength(250,
        ErrorMessageResourceType = typeof(Validation),
        ErrorMessageResourceName = "HomeAddressStringLength")]
    public string Address { get; set; }

以前は、Razor (または Mvc 3 に切り替えるまでは古い Asp.Net ビュー エンジン) を使用していました。これは、jquery.validate.js がフックするために必要なすべてのクライアント側の装飾の生成を処理しました。jQuery テンプレートを使用するようになったので、これはそれほど実行可能ではありません。

ここに 3 つのオプションがあります。

  1. テンプレートを変更して、検証とエラーのコピーを手動で含めます。クライアント側とサーバー側の検証を別々に維持する必要があるため、これは最悪です。それは、DataAnnotations のアイデア全体をちょっと殺してしまいます。

  2. Razor と Mvc 3 の控えめな JavaScript アプローチを活用して、テンプレートのレンダリングを支援します。それは私のために検証を再現するので、より良いですが、パフォーマンスが低下します。また、テンプレートをレンダリングするためにサーバーサイドのテンプレート エンジンを使用していることも意味します。出力キャッシュにより、パフォーマンスへの影響を最小限に抑えることができます。

  3. モデルのモデル状態を返すリモート検証のみに依存し、jQuery Validate 用の独自のアダプターを作成して、適切な要素へのルーティング エラーを処理します。これは、Razor を使用しなければならないことを回避しますが、純粋なクライアント側の検証を無効にし、複雑なプラグインを作成する必要があることを意味します。

理想的には、これをデプロイするときに、バックエンドに直接依存することなく、テンプレートを静的ファイルとしてクライアントに提供できるようにする必要があります。

だから、私の質問に:私のモデルのサーバー側で jQuery テンプレートのクライアント側と DataAnnotations を活用すると、自分自身を繰り返さずに検証を処理する最も効果的な手段は何ですか?

4

1 に答える 1

2

2）で行きます

エラー テンプレートは、クライアント側に置くことができます。パフォーマンスに適していないサーバー側コードは、jQuery.validation のルールを設定するコードです。しかし、ルールは .NET モデルで定義されているため、これを避けることはできません。

今日も同様の問題がありますが、スタイリングに関しては、jQuery.validation がラベルを作成する方法があまり好きではありません。出力を jQuery テンプレートでオーバーライドしたい。また、出力をテーブルの別のセルに配置したいと考えています。

どうやら、プラグインで validator.prototype.showLabel 関数をオーバーライドできます。これで、どこに表示するか、何かが失敗した場合に何を表示するかを完全に制御できます。

次に例を示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>


    <script type="text/javascript">
        $.extend($.validator.prototype, {
            showLabel: function (element, message) {
                $(element).siblings('.validationLabel').remove();
                $('#tmplValidationLabel').tmpl({ Message: message }).insertAfter($(element));
            }
        });
    </script>
</head>
<body>


<form>
    <div><input type="text" name="Email" /></div>
    <div><input type="text" name="SomeName" /></div>
    <input type="submit" value="Submit" />
</form>



<script type="x-jquery-tmpl" id="tmplValidationLabel">
<span class="validationLabel">
    <b>${Message}</b> <span> :( </span>
</span>
</script>

<script type="text/javascript">
    $(function () {

        $('form').validate({
            rules: {
                Email: { required: true, email: true },
                SomeName: "required"
            },
            messages: {
                Email: { required: "Enter Email", email: "Not an email" },
                SomeName: "Enter something man!"
            }
        });
    });
</script>
</body>
</html>

それが役に立てば幸い、

カイ

于 2011-02-16T23:11:23.383 に答える