Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@WeedMashroom(雑草くん)

[ASP.NET6.0][ASP.NET_MVC]MVC・スキャフォールディングを丁寧に解説

Posted at

ASP.NET6.0でスキャフォールディングする方法

この記事では

・MVC、スキャフォールディングの概念について理解する。
・ASP.NET_MVCプロジェクトを作成し、スキャフォールディングを行う。

はじめに

初めて記事を書きます。
記事を書く経緯と致しまして、理由は3つほどあります。

・ASP.NET_MVCの初心者用の記事が少ないように感じたため。
・私自身の復習のため。
・Qiitaで記事を書いてみたいと思っていたため。

まだ私自身初心者SEというところもありますので、間違っているところがある可能性が高いです。
適当に見て頂けると助かります。
まずは、なんとなく理解しようというそこのあなたに必見です。
私は文章をかなり適当に読んでしまうので、大切な部分は太くしておきます。

前置きはこのくらいにして、タイトル通り、スキャフォールディングを丁寧に解説したいと思います。

開発環境

開発環境 使用するもの
IDE VisualStudio2022
DB SQLserver
フレームワーク ASP.NET6.0
ASP.NET Core
Entity Framework Core
言語 C# CSHTML JavaScript

目次

・MVC（Model-View-Controller)って何？

・ASP.NET_MVCプロジェクトの作成

・ASP.NET_MVCプロジェクトの実行

・Modelの作成

・スキャフォールディングって何？

・スキャフォールディングを行う

・SQLserverと接続させる

・解説

・まとめ

MVC（Model-View-Controller)って何？

「みんなで何かアプリケーションを作るときに、どこにどんなプログラムを書けば、わかりやすいかなあ。」

そうだ

「どのプログラムが何をするのか、役割を決めておこう。」みたいな考え方です。

下表がそれぞれの役割です。

MVC 役割
Model 情報の集まり
View 画面(今あなたが見ているこの画面です)
Controller 裏でデータを渡したり、もらったり、取ってきたりする

詳細

Model

基本にエンティティクラスが書かれていることが多いです。
Controllerでどんな名前でどんな値を格納して、Viewに渡すのか。
そんな定義を書くところです。

例えば、ECサイトで、本の情報を載せる際に、こんな情報が最低でも必要なはずです。

・本の製造番号
・タイトル
・著作者
・価格
・発行者

画面にこういう情報を持っていきたいんだ。。。そんな時に定義します。

book.cs
namespace WEBAPP.Models
{
    public class Book
    {
        public int Id { get; set; }
        public string? Title { get; set; }
        public string? Author { get; set; }
        public int Price { get; set; }
        public string? Publisher { get; set; }
    }
}

View

Viewは画面です。
視覚情報です。
ユーザーが見ることができるものは、すべてViewだと思ってください。
HTML・CSS・JavaScriptで書かれていることが多いです。

※今回の実装ではASP.NET_MVCのWEBアプリケーションでは、CShtmlというものを用います。

キャプチ.PNG

Controller

画面に必要な情報を持ってきたりします。

多分わかりづらいと思うので、また解説する機会があればします！！

ASP.NET_MVCプロジェクトの作成

まず、はじめにこっから作業を始めていくわけですが、

「プロジェクトを間違えない」

これが大切です。

ここを間違えてしまうと、構成されているファイルなど外見から中身まで、すべて異なってしまいます。

検索窓にMVCと入力し、上から二番目のASP.NET Core Web アプリ(Model-View-Conttroller) を選択し、

右下の「次へ」ボタンを押しましょう。

sss.PNG

プロジェクト名に自分で決めたWEBアプリ名を入力してください。

※今回、私は「WEBAPP」というプロジェクト名で進めていきたいと思います。

右下の「次へ」を押しましょう。

キャプチャ.PNG

今回は、HTTPS用の構成が必要ありません。

HTTPS用の構成のチェックを外し、「作成」を押しましょう。

フレームワークなど他設定は基本的にいじらなくてOKです。

念のためフレームワークが.NET6.0になっていることを確認してください。

キャプチャ1.PNG

そしたら、なんか出てきましたね。これでプロジェクトの作成は完了です。

aaa.PNG

ASP.NET_MVCプロジェクトの実行

今の作業を行って頂くと、自動的に簡易的な(Model-View-Conttroller)が生成されます。

もうページができています。

これがフレームワークを用いる素晴らしさですね。
プログラムを自動で生成してくれます。

時代に感謝ですね。
では、一度確認してみましょう。

**「右側のちっちゃい緑の矢印ボタン」**を押してください。

sdf.PNG

すると、こんな画面が出てくるはずです。
これで成功です。
これから画面を更新する際には、「右側のちっちゃい緑の矢印ボタン」 を押します。

キャプチ.PNG

Modelの作成

とりあえず、今回はBook.csクラスをModelに作成します。

Modelのファイルにドラッグを合わせ、右クリック、追加、新しい項目 を選択してください。

asdff.PNG

下の画面が出てくるはずです。

クラスを選択し、一番下の名前をBook.csに変更

追加を押下してください。

ミスってしまって消せるので、大丈夫です。

作成してしまったBook.csにドラッグを合わせ、右クリック、削除 を選択してください。

キャsプチャ.PNG

上手く実行すれば以下のような画面が出てくるはずです。

fffff.PNG

以下コードを入れてみてください。

book.cs
namespace WEBAPP.Models
{
    public class Book
    {
        public int Id { get; set; }
        public string? Title { get; set; }
        public string? Author { get; set; }
        public int Price { get; set; }
        public string? Publisher { get; set; }
    }
}

以下のようになれば、OKです。

sdfsdfsdf.PNG

Modelの作成については完了です。

ここまでが下準備です。

ここからスキャフォールディングをおこなっていきます。

そのまえに・・・・

スキャフォールディングって何？

そもそも、「スキャフォールディングって何？」っていう話だと思います。

私もASP.NET_MVCを始めるときに、なんぞこれってなりました。

簡単に申し上げますと、

Modelに対応したコントローラやDBとの接続などのプログラムの自動生成機能です。

今回、私と同じように実装を行うと

・自動的にDBとのやり取りを行うことができるViewを作成することができる。

・Modelに即したデータの「CRUD」コントローラを作成することができる。

スキャフォールディングを行う

Controllerのファイルにドラッグを合わせ、右クリック、追加、新規スキャフォールディングアイテム を選択してください。

s.PNG

以下画面が出てきたら成功です。

ここからはASP.NET Core にある Entity Framework Core　というフレームワークを使用していくことになります。
(インストールしましょう。)

Entity Framework を使用したビューがあるMVCコントローラーを選択し、追加を押してください。

adsfasdfasdfadsffffda.PNG

行うと以下のような画面が出てくると思います。

123.PNG

ここ、ミスりやすいので注意です。ミスったらやり直しです。

モデルクラス：Book(←先ほど作成したお手製のclassです)
データコンテキスト　クラス：始めはここに何もありません。

そのため、右の＋ボタンを押してください。

すると以下画面が出てくると思うので、追加を押します。

image.png

以下画面と一致しているを確認し、追加を押してください。

345.PNG

もしやり直し等をしてミスってしまい、ビルドエラーが出た場合、初心者のあなたは、もう一度一から手順を始めましょう。

（そちらの方が早いです。）

無事成功すると、以下のような画面が出てきます。

コントローラファイルにbookControllerが生成されています。

あれ？なんか先ほどまでなかったものまで入ってる。
Dataファイルなんてあったっけ？？
なんだーこれ？（ロバート山本)

後に解説させて頂きますが、作業を続けたいと思います。

456.PNG

以下画面のSharedファイルにある**_Layout.cshtmlをダブルクリックしてください。**

5555.PNG

この画面が開けるはずです。
下の

タグの部分に少し開業を加えてスペースを空けて

6666.PNG

以下のhtmlをコピーして貼り付ける。

_layout.cshtmlの一部
 <li class="nav-item">
 <a class="nav-link text-dark" asp-area="" asp-controller="Books" asp-action="Index">Books</a>
 </li>

以下のようになるはずです。
画面を更新してみましょう。
さっきやりましたよね？？？
「右側のちっちゃい緑の矢印ボタン」 を押します。

7777.PNG

こんな感じで、BOOKsが追加されました。やったね。

88888.PNG

SQLserverと接続させる

今からの作業はSQLserverとの接続に必要な部分についての解説・作業を行います。

appsettings.jsonをダブルクリックし、中のコードをいじります。

sql2.PNG

以下画面のWEBAPPContextを変更します。
ここは、自分のSQLserverの認証方式、データベースによって、変わってくる部分です。

sql1.PNG

以下サイトが接続文字列としてわかりやすかったので、載せておきます。

こんな感じで記載します。
認証方法も結構DBにより変わりますので、そこは調べましょう。

appsettingsの一部
"ConnectionStrings": {
    "WEBAPPContext": "Server=[サーバ名]\\SQLEXPRESS01;Database=[テーブル名];Trusted_Connection=True;MultipleActiveResultSets=true"
  }

自分の指定したサーバ・データベース上にBookクラスと同じテーブルを作成します。

Bookのテーブル
CREATE TABLE Book (
	Id INT NOT NULL PRIMARY KEY IDENTITY(1,1)
	,Title NVARCHAR(50)
	,Author NVARCHAR(50)
	,Price INT 
	,Publisher NVARCHAR(50)
);

さあ画面を開いてみよう。
88888.PNG

そうして、以下画面のBooksを押下してみると。。。
こんな画面がでてきたぞ！！
これでCRUDの画面を生成することができました。

9999.PNG

これで何ができるようになったの？？？？

まあ見てなさい。
下の画面みたいに入力すると、

100000.PNG

HTML上でも以下のように更新される！！

1010101010.PNG

まさか、DBにもと思ったあなた。。。

正解。

DBも更新されます。

1.PNG

本来であれば、DB接続には、以下のようなコードを書かないといけなかったはず。。。

このようなめんどくさい作業をスキャフォールディングで自動生成することができます。

しかも、詳しく見ればわかるのですが、非同期処理が施されていたり、かなり便利です。

SQL接続の為の文
using System.Configuration;
using System.Data.SqlClient;
 
public void Connect1()
{
    // 接続文字列の取得
    var connectionString = ConfigurationManager.ConnectionStrings["sqlsvr"].ConnectionString;
 
    // データベース接続の準備
    var connection = new SqlConnection(connectionString);
 
    // データベースの接続開始
    connection.Open();
 
    // 実行するSQLの準備
    var command = new SqlCommand();
    command.Connection = connection;
    command.CommandText = @"SELECT count(*) FROM T_USER";
 
    // SQLの実行
    command.ExecuteNonQuery();
 
    // データベースの接続終了
    connection.Close();
}

解説

疲れたので、のちに更新

まとめ

ASP.NETのフレームワークやスキャフォールディングを行うことのメリット

・Modelを作成することで、DBとの接続を自動生成することができる。

・コーディングミスによる遅延減少を見込める

・非同期処理を行っているので、データの独立性も高くなる。

こんなもんでしょうか。また、何か気づいたら足していきたいと思います。

5
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?