はじめに
前回までの記事で、MVCモデルとは何かについて説明をしました。
今回からは、ASP.NET Core MVC アプリの作成方法を学習していきます。
新規プロジェクトの作成
はじめに、新規プロジェクトを作成します。
Visual Studioを起動して、新しいプロジェクトの作成を開き、プロジェクトテンプレートの一覧から「ASP.NET Core Web アプリ(Model-View-Controller)」を選択して [次へ]ボタンをクリックします。
新しいプロジェクトの作成
続いてプロジェクト名を入力します。
ここでは「AddressBookApp」としました。
プロジェクト名を入力したら [次へ] ボタンをクリックします。
プロジェクト名の入力
続いて、「追加情報」の画面が表示されます。
特に変更せずに[次へ]ボタンを栗っっくします。
追加情報の設定
プロジェクトの作成が完了したら、実行ボタンをクリックして、アプリを起動してみます。
アプリの実行
既定のブラウザが起動して「Welcome」が表示されていれば、プロジェクトの作成が成功しています。
ブラウザの起動
コントローラーの追加方法を覚えよう
コントローラーとは、第3回：初心者でもわかるMVCの基礎で説明した通り、住所録の一覧ページを要求したときに、Modelから住所の一覧を取得し、適切なビューに渡す処理を行います。
住所録アプリのMVCパターンイメージ
まずは、コントローラーの追加方法を覚えましょう。
ここでは HelloWorldControler というコントローラーを追加してみます。
ソリューションエクスプローラーで「Controllers」を右クリックして[追加]-[コントローラー]の順に選択します。
コントローラーの追加
続いて、一覧から「MVCコントローラー – 空」を選択して[追加]ボタンをクリックします。
MVCコントローラー – 空の追加
名前欄に「HelloWorldController.cs」と入力して[追加]ボタンをクリックします。
HelloWorldControllerの追加
コントローラーのコードの編集
続いて、追加した HelloWorldControllerのコードを編集してみましょう。
既存の Index メソッドはコメントアウトして、新しく Indexメソッドと Welcomeメソッドを追加してください。
using Microsoft.AspNetCore.Mvc;
namespace AddressBookApp.Controllers
{
public class HelloWorldController : Controller
{
//public IActionResult Index()
//{
// return View();
//}
public string Index()
{
return "Hello World!!";
}
public string Welcome()
{
return "いらっしゃい!!";
}
}
}
上記のように、コントローラークラス内に定義したメソッドを、「アクションメソッド」と呼びます。
１つ目のメソッドは URL https://localhost:{ポート番号}/HelloWorld に紐づきます。
実際にアプリを起動して https://localhost:{ポート番号}/HelloWorld と入力すると、Index メソッドが実行されて「Hello World!!」が表示されます。
表示された Hello World
次に、https://localhost:{ポート番号}/HelloWorld/Welcome と入力すると、Welcomeメソッドが実行されて「いらっしゃい!!」が表示されます。
Welcomeメソッドの実行
ルーティングのルール
ルーティングとは、インターネットのような広大なネットワークの中で、データ（メール、Webページなど）が目的地まで無事にたどり着けるように、最適な経路を決める仕組みのことです。
https://localhost:{ポート番号}/HelloWorld や https://localhost:{ポート番号}/HelloWorld/Welcome といったルーティングルールは、Program.cs のapp.MapControllerRoute で決められています。
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
controller には Homeが、action にはIndexが指定されていることがわかります。
「Home」は「Homeコントローラー」のことを指していて、「Index」は「Indexメソッド」を指しています。よって https://localhost:{ポート番号}/ にアクセスした場合は、Homeコントローラーの Indexメソッドを実行した結果が表示されます。
試しに以下のように編集をしてみると、アプリを起動したとに HelloWorldコントローラーの Welcomeメソッドが実行されて「いらっしゃい!!」が表示されます。
app.MapControllerRoute(
name: "default",
pattern: "{controller=HelloWorld}/{action=Welcome}/{id?}");
ルーティングルールの変更
動作が確認できたら、コードを元に戻しておきましょう。
パラメータを受け取るアクションメソッドを作成するには？
最後に、パラメータを受け取るアクションメソッドを作成してみましょう。
Welcomeメソッドを以下のように修正してください。
public string Welcome(string name, int age = 20)
{
return $"いらっしゃい{age}歳の{name}さん!!";
}
修正したら、https://localhost:7096/HelloWorld/Welcome?name=HIRO&age=50 のように入力してみましょう。
実行すると、受け取ったパラメータを使用して作成したメッセージが表示されます。
パラメータを受け取るアクションメソッドの実行例
このように、メソッドに引数を持たせることで、クエリ文字列を渡すことができるようになります。
補足：クエリ文字列とは
WebページのURLの末尾に「?」から始まる部分が付いてることがありますよね。この部分がクエリ文字列です。
クエリ文字列は、Webサーバーに対して、「このページを表示する際に、以下の情報を追加で使ってね」という指示を与える役割を持っています。
クエリ文字列の構造
クエリ文字列は、以下の様な形式で書かれます。
?パラメータ名=値&パラメータ名=値&…
- ?：クエリ文字列の始まりを示します。
- パラメータ名: 送りたい情報の種類を表します。
- =: パラメータ名と値を結びつけます。
- 値: パラメータの具体的な内容です。
- &: 複数の情報を送りたい場合に、パラメータと値のペアを区切るために使います。
まとめ
今回は、新規プロジェクトを作成してコントローラーを追加するとともに、実際にパラメータを受け取るコントローラーの作り方までを学びました。
次回は、ビューの追加とページレイアウトのテンプレートについて解説をする予定です。
コメント