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

この記事でわかること

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

システム
エンジニア

jQueryをASP.NETでも使用したいです。読み込みと使い方を教えてください。

プロジェクト
マネージャー

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を使用します。

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

<div style="width: 25%"> <div id="box" style="height:30px; width:30px; background-color:crimson;"></div> </div> <input type="button" id="btn" value="動かす"> <div id="tabs"> <ul> <li><a href="#tab1">タブ1</a></li> <li><a href="#tab2">タブ2</a></li> <li><a href="#tab3">タブ3</a></li> </ul> <div id="tab1">1つ目のタブ</div> <div id="tab2">2つ目のタブ</div> <div id="tab3">3つ目のタブ</div> </div> @section scripts{ <script> $(function(){ $("#tabs").tabs(); $("#btn").click(function() { $("#box").animate({marginLeft:"95%"}, 700) }); }); </script> }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<div style="width: 25%">     <div id="box" style="height:30px; width:30px; background-color:crimson;"></div> </div> <input type="button" id="btn" value="動かす"> <div id="tabs">     <ul>         <li><a href="#tab1">タブ1</a></li>         <li><a href="#tab2">タブ2</a></li>         <li><a href="#tab3">タブ3</a></li>     </ul>     <div id="tab1">1つ目のタブ</div>     <div id="tab2">2つ目のタブ</div>     <div id="tab3">3つ目のタブ</div> </div> @section scripts{     <script>         $(function(){             $("#tabs").tabs();             $("#btn").click(function() {                 $("#box").animate({marginLeft:"95%"}, 700)             });         });     </script> }

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

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

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

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

コードの解説

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

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

JavaScript

$("#btn").click(function() { $("#box").animate({marginLeft:"95%"}, 700) });

19 20 21

$("#btn").click(function() {     $("#box").animate({marginLeft:"95%"}, 700) });

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

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

JavaScript

$("#tabs").tabs();

18	$("#tabs").tabs();

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

<div id="tabs"> <ul> <li><a href="#tab1">タブ1</a></li> <li><a href="#tab2">タブ2</a></li> <li><a href="#tab3">タブ3</a></li> </ul> <div id="tab1">1つ目のタブ</div> <div id="tab2">2つ目のタブ</div> <div id="tab3">3つ目のタブ</div> </div>

5 6 7 8 9 10 11 12 13 14

<div id="tabs">     <ul>         <li><a href="#tab1">タブ1</a></li>         <li><a href="#tab2">タブ2</a></li>         <li><a href="#tab3">タブ3</a></li>     </ul>     <div id="tab1">1つ目のタブ</div>     <div id="tab2">2つ目のタブ</div>     <div id="tab3">3つ目のタブ</div> </div>

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

システム
エンジニア

ASP.NETでも、特別難しい処理が不要で、jQueryが使えるのですね。

プロジェクト
マネージャー

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

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

• スマホアプリから業務系システムまで

  

  スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

• 充実した研修制度

  

  毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

• 資格取得を応援

  

  スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

• 東証プライム上場企業グループ

  

  オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

  安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

ASP.NET新着案件New Job

• Web受注システム運用保守/VB.NET/東京都港区/【WEB面談可】

  月給50万～60万円
  東京都港区(品川駅)
  • VB.NET
  • ASP.NET

• Web受注システム開発のテスター/VB.NET/東京都港区/【WEB面談可】

  月給25万～35万円
  東京都港区(品川駅)
  • VB.NET
  • ASP.NET

• 営業フロントシステム運用保守/ASP.NET/東京都江東区/【WEB面談可】

  月給50万～60万円
  東京都江東区(木場駅)
  • ASP.NET
  • VB.NET
  • SQLServer
  • JavaScript

• 営業フロントシステム開発のテスター/ASP.NET/東京都江東区/【WEB面談可】

  月給25万～35万円
  東京都江東区(木場駅)
  • ASP.NET
  • VB.NET
  • SQLServer
  • JavaScript

• 営業フロントシステム開発/ASP.NET/東京都江東区/【WEB面談可】

  月給35万～41万円
  東京都江東区(木場駅)
  • ASP.NET
  • VB.NET
  • SQLServer
  • JavaScript

• Web受注システム開発/VB.NET/東京都港区/【WEB面談可】

  月給45万～60万円
  東京都港区(品川駅)
  • VB.NET
  • ASP.NET