LoginSignup
2

More than 3 years have passed since last update.

ASP.net coreの探索 ~1 RazorによるMVCアプリケーション ~

Posted at

1.ASP.net core とは?

Microsoftが出しているWebフレームワーク「ASP.net」が
.net coreに対応したものです。
つまり、MacやLinuxに対応したものです。

・ ASP.netとの比較
https://www.fenet.jp/dotnet/column/environment/1344/
上記サイトによると
Core はVB.net, Webフォームに非対応
   様々なOS, 開発環境に対応
とのことで、モダンな開発になったイメージがあります。
(すみませんASP.netをやったことがないため、本当の違いがよくわかりません...)

・なぜASP.net coreを?
業務でC#を使用しているため、C#でWebをやってみたいと思った。
.net frameworkは5.0からcoreと統合されるため
今から始めるなら5.0 (.net core)に対応した
ASP.net coreの方がよいかなと思った。
また、最近はSPA(シングルページアプリケーション)を作成するようになり
ページ読み込み時に大量データを処理するため
バックエンドはコンパイル言語の方が、通信早いかなーと
直感的に思ったため。
(実際はどうかわかりません。詳しい方いましたら教えてください。)

2.このシリーズの予定

 ・まずはRazorテンプレートを用いて
  MVC(Model-View-Controller)アプリケーションを作成します。
  (Razorを使わないMVCもありますが、するかは今のところ未定)  

 ・MVCが出来たら、SPAを作成します。
 使用するフロントエンドのフレームワークは、Reactを予定しております。
 (普段はVueをメインで使っているが、ASP.net coreはなぜかVueに未対応...)

 ・最後にBlazorを用いたSPAを予定しております。

3.Webアプリケーションの作成開始

 以下のような1行掲示板を作成してみる。
1行掲示板イメージズ.png
昔よくあったCGI掲示板(チャット?)を令和のWebアプリケーションで
復元してみようと思う。

プロジェクトの作成

早速ASP.net coreのプロジェクトを作成してみます。
Visual Studio(今回は2019 バージョン16.8.3)でプロジェクトを作成します。
プロジェクト作成1.PNG
新しいプロジェクトを作成

プロジェクト作成2.PNG
「C#」「Web」を選択して
「ASP.NET Core Webアプリケーション」を選択します。

ちなみに...
プロジェクト作成_VB.PNG
「Visual Basic」ではやはり出来なかった!

Rasorプロジェクト作成.PNG
プロジェクト名と保存先を指定して、プロジェクトを作成します。

Rasorプロジェクト作成2.PNG
ASP.NET Coreのバージョンを選択して(今回は5.0)
「ASP.NET Core Wepアプリ」を選んで作成します。

これでプロジェクト作成が出来ました。
試しにデバッグボタンを押してみましょう。
debugボタン.PNG
debugページ.PNG
ブラウザが自動で立ち上がり
ASP.net coreのサンプルページが表示されました。

4.実装

実装はMicrosoftのチュートリアルに沿って作成しています。
また、ここからはWebアプリおよびC#の知識がある前提で書きます。
わかりづらい箇所や、変な書き方があったらコメントお願いします。

Modelの作成

はじめに、掲示板のデータを操作するためのModelを作成します。
投稿コメントを表すModelの Writingクラスを作成します。
Writingクラスには4つのプロパティを入れます。
・ID: データベースのキー
・Name: 投稿者名
・Comment: 投稿内容
・PostDate: 投稿日時
Razor_Modelフォルダ.PNG
プロジェクトに「Model」フォルダを作成し、「Writing.cs」というクラスを作成しします。
「Writing.cs」に以下プロパティを書きます。

Writing.cs
using System;
using System.ComponentModel.DataAnnotations;

namespace RasorSample.Model
{
    public class Writing
    {
        //データベース上のキー
        public int ID { get; set; }

        //投稿者名
        public string Name { get; set; }

        //投稿内容
        public string Comment { get; set; }

        //投稿日時
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
    }
}

ちなみにintのプロパティを最初に定義しないと
「HasNoKey」というエラーが出て、後述のスキャフォールディングが出来ません...

作成したら、Webアプリのスキャフォールディング(Scaffolding)作成します。
スキャフォールディングは「足場」という意味だそうで、
この場合はWebサイトの骨組み・ひな型みたいなものが出来ます。

Pagesフォルダに「BBS」というフォルダを作成します。
(フォルダ名は、Modelで作成したクラスと別の名前にしてください。)
「BBS」を右クリックして
「追加」->「新しいスキャフォールディングアイテム」を選択します。
2021-02-15 (2).png
Rasor_Model作成1.PNG
「Entity Frameworkを使用するRazorページ(CRUD)」を選択して追加します。
Rasor_Model作成2.PNG
「モデルクラス」をプルダウンして、先ほど作成したWritingクラスを選択します。
「データコンテキストクラス」の「+」をクリックして、データコンテキストクラスを作成します。
(このクラスがよくわからないのですが、恐らくデータを扱うためのクラスなのだと思います。)
Rasor_Model作成3.PNG

(エラーが出た場合)
プロジェクトのプロパティを開き、
パッケージで「Nugetパッケージを作成」にチェックします。

スキャフォールディングが出来たら、Modelに合うデータベースを
マイグレーションします。
Nuget パッケージマネージャーを開き
Model_マイグレーション.png

Add-Migration InitialCreate
Update-Database

と入力します。
(1行ずつしか処理されないため、1行ずつ入力します。)

これでWebアプリケーションの骨組みはできました。

5.動かしてみた

プロジェクトをビルドして、Webアプリを見てみましょう。
ブラウザが立ち上がり、localhostメインページが出るので
アドレスに「/BBS」を追加して移動します。
Model_indexページ.PNG
何かテーブルが表示されました。

アドレスを「/BBS/create」にしてみます。(もしくは画面のCreate Newをクリック)
Model_createページ.PNG
掲示板の投稿?画面ですね。
データベースにデータを"Create"する画面です。

適当に何か書き込むと
Model_indexページ_投降後.PNG
掲示板に書き込みが出来た!

余談ですが、マイグレーションをしないとエラーが出て表示されません。
(何度かやり忘れてエラーが出ました。)

さらに余談ですが、ASP.net coreのデフォルトDBは
SQL Server Express LocalDBという
SQL Serverの簡易版みたいです。
SQLiteのような組み込み形式なんですかね?
(VSCodeやMacでやるとDBがSQLiteになるそうです。)

6.まとめと次回予告

RazorでASP.net coreアプリを作る場合
Model -> スキャフォールディング -> DBのマイグレーション
だけでWebアプリが出来てしまった!

...ですが、さすがにこれでは掲示板とはいいがたいので
次回はこのWebアプリを編集して
もっと掲示板らしい掲示板にしていきたいと思います。
あとデータベースをMySQLにしてみたいとおもいます。

参考文献

https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-5.0&tabs=visual-studio
Microsoftの公式ドキュメント

https://qiita.com/gushwell/items/6d8b801923b639d9ea2e
Microsoftのチュートリアルをわかりやすく整理されています。
ちなみにこの記事の著者・出井先生が出している
『実戦で役立つ C#プログラミングのイディオム/定石&パターン』
はC#をとてもわかりやすく説明しております。
C#プログラマで、特にC#ステップアップしたいけどどうしよう?
と行き詰ってる方にはとてもおすすめの1冊です。

https://www.udemy.com/user/anderson-355/
どうしてもC#がわからないという方
ピーコックアンダーソン先生のC#講座がわかりやすいです。

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
2