ASP.NET (MVC) Web 画面構築手順書

※僕と同じように真似すれば間違えるリスクが減ります。

「Visual Studio2019」を起動して「新しいプロジェクトの作成」を選択します。

「ASP.NET Web アプリケーション(.NET Freamwork)」を選択する。 必ず「C#」版を選

択してください。「Visual Basic」も他にあるので要注意！！

．任意の「プロジェクト名」を設定する。

僕は ShinmaiWebApp にしたよ。

「プロジェクト名」を記入したら作成ボタンを押下

少し作成時間がかかるので待ちましょう。

作成が完了するとこの画面が表示されます。

「MVC」選択し、作成ボタンを押下

この画面が表示されましたら、「IIS Express（Google Chrome）」を押下する。

サンプルの画面が立ち上がることを確認します。（起動には少し時間がかかります）

※もし警告画面、何かを確認する画面が出たら「はい」を押下する。 確認が出来たら、当

画面は閉じて下さい。

「ソリューションエクスプローラー」で新たに「cshtml」ファイルを作成する。

「Views」→「Home」を選択し右クリック、「追加」→「ビュー」を選択する。

「ビュー名」に任意で名前を入力して「追加」を押下する。

僕は WebTest にしました。

「(ビューで記入した名前).cshtml」が作成されたことを確認する。

僕の場合は WebTest と入力したので WebTest.cshtml が作成

「ソリューションエクスプローラー」で「Controllers」→「HomeController.cs」を押下

HomeController クラス内に以下の追記。

「(ビューで記入した名前).cshtml」タブを選択して「IIS Express（～～～）」を押下

僕と同じの人は WebTest.cshtml をタブ選択して「IIS Express（～～～）」を押下

「ソリューションエクスプローラー」で「Models」を選択して、 右クリックして「追加」

→「新しい項目」を押下。

「Visual C#」→「クラス」を選択し「名前」に「（任意名）.cs」と入力し「追加」を押下。

僕は、「WebTest.cs」で作成します。

C#から DB 接続するために接続文字列の設定

「表示」→「SQL Server オブジェクトエクスプローラー(S)」を選択。

「(localdb)\MSSQLLocalDB ...」が表示されたら「データベース」を右クリックし、「新しい

データベースの追加」を選択。

任意のデータベース名を入力し「OK」を選択。

僕は「TestDB」で作成

作成したデータベースのテーブルを右クリックして「新しいテーブルの追加」を選択。

テーブル名はデフォルトで[Table]となっています。変えても変えなくてもどちらでも

いいです。僕は、[testTable]に変更してみたよ。

・今回「Id」、「Product」「Price」列を作成したのでマネする人はマネして「更新」を

選択してください。列名は別名カラム名と言い表の項目名のことです。

「データベースの更新」を選択

SQL Server オブジェクトエクスプローラーに表示されていれば作成完了。

ちなみに Table はデフォルトのテーブル名の時、名前を変更した人はその名前が表

示されていえば大丈夫です。(テーブル名は後から変更できます！)

ソリューションエクスプローラーから「参照」を右クリックし「参照の追加」を選択

「System.Configurasion」を選択し「OK」を選択してください。

(チェックが入っていれば OK)

ソリューションエクスプローラーの「参照」に「System.Configurasion」が表示されてい

れば OK。

先ほど作成した「(任意).cs」を選択し赤枠の部分を追加してください。

僕と同じ人は「WebTest.cs」

先ほど作成したデータベースを右クリックし「プロパティ」を選択。

プロパティの「接続文字列」をコピーしてください。(Data Source = …)

プロジェクト直下にある「Web.config」を開く。 →（他に Views 直下にも同名ファイル

があるため注意が必要）※一番下の Web.config を選択してください。

赤枠の部分を追加してください。

・name =”ココ” ⇐ここには任意の名前を入力してください

・先ほどコピーした接続文字列を connectionStrings=”ココ”

※不安な人は僕のマネしてください。(接続文字列は異なります。)

「HomeController.cs」を選択→赤線の部分を追加してください。

先ほど作成した「(任意).cs」を選択→赤線の部分を追加してください。

僕と同じ人は「WebTest.cs」を選択→赤線の部分を追加してください。

これで以上になります！お疲れ様です！！！