6

私は MVC アプリケーションで AngularJS を使用しており、両方の長所を活用しようとしています。MVC でビューモデルに検証ロジックを設定し、かみそりビューで jQuery 検証を使用してクライアント側の検証をほとんど手間をかけずに生成できる方法が本当に気に入っています。AngularJS を使用して、ルーティングなどで SPA の動作を取得しますが、ページに挿入するために使用するカミソリ ビューを作成するときは、次のようにします。 <div data-ng-view="data-ng-view"></div>

その後、ビューが挿入されたページでスクリプト ファイルが参照されていても、jQuery 検証は機能しなくなります。私のかみそりのビューについては、以下を参照してください。

@model BandViewModel
<div data-ng-controller="App.BandCreateCtrl">
    <form name="startBandForm">
        @Html.ValidationSummary(true)
        <br />
        @Html.LabelFor(m => m.Name)
        @Html.TextBoxFor(m => m.Name, new { data_ng_model = "band.Name" })
        @Html.ValidationMessageFor(m => m.Name)
        <br/>
        <input data-ng-disabled="startBandForm.$invalid" type="submit" data-ng-click="createBand(band)" value="Create"/>
    </form>
</div>
4

5 に答える 5

4

この問題の解決策をまだ探している人には、それを機能させる簡単な方法があります。

    var currForm = $("#myForm");
currForm.removeData("validator");
currForm.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(currForm);
currForm.validate();

このコードを $viewContentLoaded またはコード内の関連する他の場所に配置できます。

MVC ビューを Angular コードのテンプレートとして使用することを思いとどまらせるいくつかのビューについては理解していますが。私の理由は、角度で物事を行う自然な方法ではないため、このような問題に遭遇する可能性があります. しかし、MVC ビューをテンプレートとして使用するメリットがある場合は、地獄への道ではありません。IT は機能し、あなたにも利益をもたらします。私のプロジェクトには、MVC ビューを使用することが非常に理にかなっている 2 つのユース ケースがあります。

  1. 私のプロジェクトには、実際には、クライアントが特定のフィールドで必要な検証をオフにできるという要件があります。このため、単一のクラスを使用してビューをレンダリングするときにデータ注釈を追加または削除できるようにする MVC カスタム データ注釈バリデーターを使用します。 angular で同じ柔軟性を構築する場合は、さらに多くのコードを記述する必要があります。したがって、カスタム データ注釈は DisplayFor および EditorFor ヘルパーによってトリガーされるため、MVC ビューはここでうまく機能します。
  2. 私たちは国際化に多額の投資を行っており、angular は他のものに優れていますが、国際化はその強力なスイートではありません (少なくともこれを書いている時点では).RESX を使用した MVC での国際化サポートはうまく機能しており、長い間ここにいます。これも、DisplayAttribute のデータ注釈機能を使用しています。

TLDR : MVC ビューをテンプレートとして使用すると、いくつかの予期しない問題が発生する可能性がありますが、Microsoft によって作成されたデータ注釈パイプラインの機能を十分に活用している場合は、その価値があります。

願わくば、将来、誰かが Angular HTML Helpers ライブラリを思いつくことで、これはもっと簡単になるでしょう。

于 2015-06-05T11:42:59.800 に答える
4

どこを見ても、「HTML はただのテンプレートであるべきだ」という同じ返事が返ってくるのはつらいです。おそらくですが、すべてを JavaScript に委譲する準備ができていないだけです

HTML 属性を渡すために匿名オブジェクトを使用する代わりに、Dictionary を使用してみてください。

@Html.TextBoxFor(m => m.Name, new Dictionary<string, object>(){{ "data_ng_model",  "band.Name" }})

であることを確認してください

Dictionary<string, object>

そしてそうではない

Dictionary<string, string>

それ以外の場合、コンストラクターはそれを混乱させます

object HtmlAttribute

それほどきれいではありません...しかし、ほとんどの場合は機能します。

最後に、jQuery の後に AngularJS を含めると、セレクターに jQuery が使用されることに注意してください。

于 2013-10-30T22:45:41.147 に答える
1

おそらく、検証にAngularを使用することは、あなたが思っているよりも簡単です. いくつかのカスタム ディレクティブを使用すると、次のような単純なマークアップで Razor に非常に近いものを簡単に取得できます。

    <validated-input name=username display="User Name" ng-model=model.username required</validated-input>

ここで私のサンプルをチェックし、そのインスピレーションをここでチェックしてください。現時点では、required と number のみを実装していますが、カスタマイズは簡単なはずです。

于 2013-11-05T10:21:03.813 に答える
1

ngvalライブラリを使用できます。angularjs 検証ディレクティブとしてクライアント側にデータ注釈をもたらします。

于 2014-01-03T10:14:47.633 に答える