MVCアプリケーションでJquery_jqueryを使用する方法

まえがき: あっという間に11月も中旬になり、今日からASP.NET MVCの詳しい使い方を勉強していくので、この読書メモと個人的な体験談をまとめて書こうと思います。誰もが何かを学べるようにブログを書いています。私が読んだ本は「ASP.NET MVC Advanced Programming」です。以下では、MVC で JavaScript と Jquery を使用する方法について説明します。私たちが今よく使っているAjaxもあります。

1. Ajax の概要

(1) 現在私たちが作成しているほぼすべての Web アプリケーションは Ajax テクノロジーを使用しています。技術的に言えば、Ajax は Asynchronous JavaScript and XML (Ajax) の略です。実際には、優れたユーザー エクスペリエンスを備えた応答性の高い Web アプリケーションを構築するために使用されるすべてのテクニックを表します。

(2) ASP.NET MVC4 は最新の Web フレームワークであり、他の最新の Web フレームワークと同様に、最初から Ajax テクノロジをサポートしています。Ajax サポートの中核は、オープン ソースの JavaScript ライブラリ Jquery に由来します。

(3) MVC で Ajax を使用したい場合は、Jquery を学習する必要があります。Jquery はこのブログの主な焦点ではないため、これまで学習したことがない場合は、同じ最初の学習から始めることをお勧めします。私のJqueryの学習は「Sharp Jquery」から来ています。

2. MVC アプリケーションで Jquery を使用する方法

(1) Visual Studio プロジェクト テンプレートを使用して新しい ASP.NET MVC プロジェクトを作成すると、デフォルトで、Jquery を使用するために必要なすべてのコンテンツが生成され、各新しいプロジェクトには、多数の .js ファイルを含む Scripts フォルダーが含まれます。図に示すように、新しい mvc プロジェクトを作成して確認できます。

(2) JQuery コア ライブラリは、Jquery-.js という名前のファイルです。私は VS 2012 を使用しているため、JQuery のバージョンは 1.7.1 です。このファイルには、JQuery のソース コードが含まれています。 Jquery-.min.js ファイルもあります。名前に「.min」が含まれる圧縮 JavaScript ファイルは、対応する非圧縮ファイルよりも占有するスペースが少なくなります (通常は半分)。不要な空白文字やコメントは含まれておらず、ローカル変数名はすべて 1 文字の長さです。縮小されたファイルを開くと、読み取れない JavaScript コードが大量に表示されます。写真に示すように:

(2) クライアント上での圧縮された JavaScript スクリプト ファイルの動作と機能は、圧縮されていないファイルと同じですが、圧縮されたファイルの方がサイズが小さいため、通常は圧縮されたファイルを送信することができます。 (ダウンロードされるデータ バイト数を削減できるため、ロードと実行が高速化されるため)。

(3) ASP.NET MVC アプリケーションのデフォルトのレイアウト ビュー (_Layout.cshtml) は、通常、次のスクリプト タグを使用して Jquery の簡易バージョンを参照します。

注: MVC で Jquery を使用したい場合は、レイアウト ビューを通じて上記のスクリプト タグを HTML タグに配置する必要があります。

3. ノード にスクリプトを配置します。

(1) 出力にスクリプトを挿入するもう 1 つの方法は、Razor セクションを定義してスクリプトを防止することです。たとえば、レイアウト ビュー (_Layout.cshtml) で、Scripts という名前のノードをレンダリングし、それをオプションとして追加できます。 。コードは次のとおりです:

@RenderSection("スクリプト"、必須: false);

(2) これで、レイアウトを参照するスクリプトを任意のビューに追加して、ビューの先頭に特定のスクリプトを挿入できるようになります: Index.cshtml

@{

ViewBag.Title = "ホームページ";

}

@セクションスクリプト{

}

(3) この時点で、F5 キーを押して Web サイトを実行し、Web サイトのホームページを開きます:

http://localhost:34147/home/index。jquery.validate であることがわかります。追加した js ファイルが JS 引用符の下部に表示されます。写真に示すように:

(4) 上記で紹介した方法では、スクリプト タグの正確な位置を設定して、必要なスクリプトが適切な順序で表示されるようにすることができます。

4. Scripts ディレクトリ内のその他のファイル

(1) MVC アプリケーションを作成すると、システムがデフォルトで Scripts フォルダーを追加します。このフォルダーには多くの JavaScript ファイルが含まれています。では、これらのファイルは何に使用されるのでしょうか。それについては別途お話しましょう

(2) Jquery コア ライブラリに加えて、Scripts ディレクトリには、Jquery UI と Jquery 検証という 2 つの Jquery プラグインも含まれています。これらの拡張機能により、Jquery コア ライブラリの機能が向上します。

(3) スクリプト内の名前に「vsdoc」を含むファイルがあることに気付いた人もいるかもしれません。これらのファイルは、Visual Studio がより優れたインテリジェント センシング機能サービスを提供できるように特別に設計されています。直接参照する必要はありません。これらのファイルはプログラム内にあるため、クライアントに送信する必要はありません。スクリプト内で参照されるカスタム スクリプト ファイルを使用するときに、Visual Studio がこれらのファイルを自動的に検出します。

(4) 名前に「unobtrusive」という単語が含まれるディレクトリ内のファイルは Microsoft によって作成されており、これらの非侵入型スクリプトは Jquery および ASP.NET MVC フレームワークを統合し、上記の非侵入型 JavaScript 機能を提供します。 . ASP.NET MVC フレームワークの Ajax 機能を実装する場合は、これらのファイルを使用する必要があります。

(5) このディレクトリには、名前が Microsoft という単語で始まるファイル (MicrosoftAjax.js など) もいくつか含まれており、これらのファイルには Microsoft Ajax ライブラリが含まれているか、Microsoft Ajax ライブラリの上に ASP.NET MVC3 アプリケーションとして構築されています。デフォルトの依存関係は Jquery であるため、ASP.NET MVC3 フレームワークで作成されたプログラムにはこれらのファイルは必要ないため、アプリケーションから安全に削除できます。これらのファイルがここに含まれている理由は、主に下位互換性のためです。

今日はここで終わりにしましょう。MVC での jQuery の使用方法については、後で詳しく説明します。