.net column

.NET開発者のためのブログメディア
パソコン操作

ASP.NETでjQueryを読み込む方法と使い方

2020年01月10日

JavaScriptを便利に使えるライブラリにjQueryがあります。
jQueryを使用すると高度な機能がより簡単に実装できるようになり、Webアプリケーション作成の幅が広がります。
ASP.NETでも利用可能ですので、読み込み方法と使い方を紹介します。

SE
jQueryをASP.NETでも使用したいです。読み込みと使い方を教えてください。
PM
ASP.NETでjQueryを使うのは簡単にできます。方法を一緒に確認しましょう!

ASP.NETでjQueryを読み込む方法

jQueryを読み込む方法は必要なファイルをダウンロードする方法と、CDNから読み込む方法の2通りがあります。簡単なのは、CDNから読み込む方法です。

以下の記事でGoogleを利用するCDNの方法を紹介しています。

「jQuery UIのダウンロードの手順と使い方」
https://www.fenet.jp/dotnet/column/tool/588/

ASP.NETでjQueryの使用例

ASP.NET MVCを使った使用例の紹介です。
ASP.NET MVCの場合、headタグは_Layout.cshtmlに記載するため、jQueryの定義も_Layout.cshtmlに記載します。

画面の表示部分は、View部分に記載するので、Viewsフォルダ以下のファイルを使います。
この記事では、ルートアクセスで使用される、HomeフォルダのIndex.cshtmlを使用します。

以下のようにコードを記載してください。

実行すると、画面の表示は以下のようになります。

コード実行結果画面

動かすボタンをクリックすると、下記のように赤いボックスが右に移動します。

動かすボタンクリック

タブには3つのタブが表示されています。
タブ2をクリックすると、以下のようにタブが切り替わり、表示内容が変更されます。

タブ2

タブ3をクリックした場合も同様に、表示内容が変更されます。

タブ3

コードの解説

続いてコードの解説をします。

まず、ボタンをクリックすると、赤いボックスが移動するのは以下の処理です。

animateメソッドを使用して、アニメーションを実行しています。
引数に指定しているのが、アニメーションの内容で、marginLeftを指定すると左に余白を入れることができるので、左から右へ移動する処理が実現できます。
2つ目の引数で、動く際のスピードをミリ秒で指定しています。

続いて、タブの切り替えは以下の処理です。

タブの切り替えでは、jQuery UIというライブラリを使用しています。
以下のようにタブに表示する内容をdivタグで定義しています。
divタグを指定して、tabsメソッドを呼び出すことで、タブの切り替えが行えるようになります。

このように、ASP.NETでも、jQueryを使用することができました。

SE
ASP.NETでも、特別難しい処理が不要で、jQueryが使えるのですね。
PM
そうですね。ASP.NETでjQueryを使用する場合でも、ASP.NET特有の処理は不要で、問題なく使用することができます。

そのままASP.NETでjQueryを使用できる

ASP.NETでjQueryを使う方法を紹介しました。
ASP.NETだからといって、特有の処理は不要で簡単に使用することができます。
jQueryは様々な処理が実装できますので、理解したら使ってみてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)