2

Helpers.cshtml ファイルに多くの HTML ヘルパーがありますが、一部のヘルパー (html) には jquery アクションが必要です。helpers.cshtml 内で jquery を呼び出すにはどうすればよいですか?

js ファイルをヘッダーまたは特定のページに保持できることはわかっていますが、そのようにしたくありません。特定のヘルパーをロードしたページでのみ jquery または javascript を使用したいと考えています。

誰でもこれについて考えがありますか？私のシナリオは、ヘルパーから適切にロードされているリスト ボックス コントロールがありますが、カスタム テーマをリスト ボックスに適用する必要があります。

もう少し明確に

//in index.cshtml
@Helpers.testListBox("mylist" "1,2,3,4,5,6,7")


//in Helpers.cshtml
@helper testListBox(string listName, string listData){

    //...... HTML code .........

    //Javascript here?

}
4

3 に答える 3

5

Webフォームを使用すると、特定のサーバーコントロールがページで使用されたときに、フレームワークにJavascriptを（1回）自動的に含めることができます。ASP.NetMVCにはそのような機能はありません。これがあなたが見逃しているもののように聞こえます。

それを行う方法はクライアントにあります。http://requirejs.org/でRequireJSを見てください。これは、Javascriptの依存関係を管理するためのクライアント側のライブラリです。これはWebフォームが行ったことを実行しますが、より優れており、さらに多くのことを実行します。マスターレイアウトには、次のようなスクリプトタグがあります。

<script src="/Scripts/require.js" type="text/javascript" data-main="/Scripts/main"></script>

これは、すべてのページに含める唯一のスクリプトタグにすることができます。それ以外はすべて、RequireJSで必要な場合にのみ動的にロードできます。これをすべてのページにロードするのは事実ですが、jQueryよりも小さく、多くのことを実行できるため、その地位を獲得しています。

あなたの例を使用して、あなたがこのマークアップを持っているとしましょう：

@Helpers.testListBox("mylist" "1,2,3,4,5,6,7")

HTMLをレンダリングし、jQueryスクリプトが必要です。これをレンダリングします：

// HTML for list box here

<script type="text/javascript>
require(['jquery'], function($) {
  // Do your jQuery coding here:
  $("myList").doSomething().whatever();
});
</script>

関数は、requirejQueryが既にロードされていない限り、jQueryをロードしてから、コードを実行します。jQueryスニペットがHTMLヘルパーの使用ごとに1回繰り返されるのは事実ですが、それは大したことではありません。そのコードは短くする必要があります。

RequireJSは依存関係を効果的に管理します。モジュールA、Aに依存するモジュールB、およびBに依存するモジュールCを使用できます。クライアントコードがモジュールCを要求すると、AとBがCとともに、正しい順序で1回だけロードされます。各。さらに、require.jsの初期ロードを除いて、スクリプトは非同期でロードされるため、スクリプトのロードによってページのレンダリングが遅れることはありません。

Webサーバーにサイトをデプロイするときは、Javascriptファイル間の依存関係を調べて、それらを1つまたは少数のファイルに結合し、それらを最小化するツールがあります。マークアップを変更する必要はまったくありません。開発中は、デバッグを容易にするために多数の小さなモジュラーJavascriptファイルを操作できます。デプロイするときは、それらを組み合わせて最小化することで効率を高めます。

これは、Webフォームフレームワークが行ったことよりもはるかに優れており、完全にクライアント側であり、私の意見ではそれが属している場所です。

于 2012-02-08T17:36:58.690 に答える
0

部分ビューの例としては、次のようになります。

@model Member.CurrentMemberModel
@{

    var title = "Test View";
}

        <script type="text/javascript">
            // Javascript goes in here, you can even add properties using "@" symbol
            $(document).ready(function () {
                //Do Jquery stuff here
            });
        </script>

@if (currentMember != null)
{
     <div>Hello Member</div>
}
else
{
    <div>You are not logged in</div>
}
于 2012-02-08T15:40:42.720 に答える
0

<script>ヘルパー本体にタグを付けることができます。

于 2012-02-08T15:28:33.507 に答える