💭

【ASP.NET Core MVC】DBに接続してWebアプリをつくる②

2024/02/02に公開

.NET

前回の記事の続きになります。
ASP.NET Core MVCでプロジェクト作成～DB接続の流れは以下を確認してください。↓↓

今回は前回作ったWebアプリに
さらに便利になるよう、検索機能などを変更を加えていきます。

各々必要な部分だけ読んでいただければと思います。

では、やっていきます！！！

作るもの

今回実装する機能や、修正箇所たちです。
環境が同じであれば、コピペで実装できるように記載していきます。

1.初期表示画面から自作ページに遷移できるようにする
2.主キー（ID）を表示させる
3.リストのプロパティ名を任意のものに変更する
4.検索機能を追加する

環境

・Visual Studio 2022 Community
前回と同じです。

1.初期表示画面から自作ページに遷移できるようにする

現状は「https://localhost:ポート番号」にアクセスすると、
Ｗelcomeページが表示される状態ですよね。

今のところ特に使用されていない画面上部のHomeタグがありますので、
これをを押下すると、自作のEmployeeページに遷移されるように手を加えていきます。
毎回リンクを打ち込むのはさすがに億劫なので...

この部分ですね↓↓
赤枠部を押下すると自作のEmployeeページに遷移できるようにしていきます！

赤枠部分を以下ソースコードに変更することで解決できます。

Views/_Layout.cshtml(23行目)

<a class="nav-link text-dark" asp-area="" asp-controller="Employees">Employees</a>

主に実施していることは、URLに紐づいているページの変更です。
具体的には、asp-controller属性に対象のコントローラーの名前を指定することで実現できます。

また、aタグ内にEmployeesと記載すると、画面上部に表示されるタブの名称を
変更することが可能です。

これで初期画面から直接Employeeページに遷移することができました！

2.主キー（ID）を表示させる

現状、主キーとして設定していたIDがＷebサイト上に表示されていません。
せっかく設定したので、表示できるように変更を加えていきます。
index.cshtmlの赤枠部に以下のコードを追加してみてください。

Views/Employees/index.cshtml(15行目)↓↓

<th>
　@Html.DisplayNameFor(model => model.Id)
</th>

Views/Employees/index.cshtml(31行目)↓↓

<td>
　@Html.DisplayFor(modelItem => item.Id)
</td>

15行目は、プロパティ名を表示させる役割、
31行目は、DBに登録したデータを表示させる役割がある部分です。
上記を追加することにより、主キーとして設定していたIDを表示させることができます。

実行してみると、主キーとして設定したIDが表示されています！

3.リストのプロパティ名を任意のものに変更する

表題の通り、うまく説明できているか微妙なところですが、
現状では、Ｗebサイト上では設定したプロパティ名が英語表記になってしまっている部分を日本語へ変更します。
以下赤枠部を任意の名前に変更するイメージです。

Employee.csを以下コードに変更してみてください。

Controllers/EmployeesController↓↓

using System.ComponentModel.DataAnnotations;
namespace WebApplication1.Models
{
    public class Employee
    { 
        [Display(Name = "id")]
        public int Id { get; set; }

        [Display(Name = "名前")]
        public string Name { get; set; }

        [Display(Name = "エリア")]
        public string Area { get; set; }

        [Display(Name = "入社日")]
        [DataType(DataType.Date)]
        public DateTime HireDate { get; set; }

    }
}

プロパティ名の上に[Display(Name = "〇〇")]を追加することで、
好きな名前に変更することが可能です。
〇〇に任意の文字列を入れてみてください。

私の場合は、単純に日本語に変更したかったので、
プロパティ名をそのまま日本語で表示できるようにしました。

実行してみると、サイト上のプロパティ名が任意で設定した名前に変更されていると思います。

4.検索機能を追加する

最後に検索機能を追加して終わろうと思います。
DBに登録した内容を検索し、検索結果を表示できるように変更を加えていきます。
以下の対象ファイルを変更していきます。

まず、index.cshtmlから検索項目の入力欄、検索ボタンを実装します。
今回は、エリアごとに検索ができるようにしていきます。
index.cshtmlの赤枠部に以下を追加してみてください。

Views/Employees/index.cshtml↓↓

12行目↓↓

<form asp-controller="Employees" asp-action="Index" method="get">
        <input type="text" name="strSerch" placeholder="エリア" />
        <input type="submit" value="検索" />
</form>

上記を追加すれば、検索項目の入力欄と検索ボタンは実装できると思います！

次に、EmployeesControllerを変更し、エリアごとに検索できるようにしていきます。
EmployeesControllerのIndexメソッドを以下に変更してください。

Controllers/EmployeesController↓↓

public async Task<IActionResult> Index(string strSerch)
{
　if (_context.Employee == null)
　{
　　　return Problem("Entity set 'WebApplication1Context.Employee'  is null.");
　}

　//クエリを使用して、DBのデータを全件取得
　var employee = from E in _context.Employee
　　　　　　　select E;

　//検索欄に値が入っていれば、その値を検索
　if (!String.IsNullOrEmpty(strSerch))
　{
　　employee = employee.Where(e => e.Area.Contains(strSerch));
　}

　return View(await employee.ToListAsync());
　}

大体のことはコメントとしてコード内に残したので、そちらを参照してみてください。
今回修正したcontrollerは前回記事①のほうで、スキャフォールドしてつくったものなので、
作ってもらった部分を生かしつつ、作成しています。

これで、以下のように検索ボックスに値をいれると、その値を検索してくれるようになりました。

ちなみに、この検索機能は部分一致となっています。
特にこだわってはいないのですが、一番使いやすいかなと思い...

5.ひとまず完成...

お疲れさまでした。
そして、閲覧いただき、ありがとうございました。
ここまでで、必要最低限の機能は実装されていると思います。

私もまだまだ分からないことだらけですが、日々精進します！！！