Visual Studio 2019 でMySQLを使用したMVCプロジェクトを作ってみよう!

プログラミング

(この記事は2022年7月9日が最終更新日です。)

自己紹介

この記事の作成はKazuが行っています。
本業ではエンジニアとして働きつつWebサービス開発を行っております。
副業でWebエンジニア・デザインを行っています。

エンジニアに欠かせないのが学習という名の自己投資です。

いろいろな学習方法があって正直どれを選べばよいのか悩みますよね・・・

いくつもある学習方法の中から私がオススメするのはUdemy!!

購入したコースが満足いく内容でなければ返金もしてくれるので損はありません。

Udemyを試してみる!

本記事ではVisual Studio 2019 .Net Framework 4.8 とMySQLを接続してMVCモデルでデータ追加を実装する方法を初心者でも分かりやすいように画像を用いて解説していきます。

ソースコードもコピペで動くように公開するので、一緒に手を動かしながら本記事を読んでいただけると嬉しいです。

皆さんのお役に立てば幸いです。

私も勉強しながらなので至らない点があればTwitterでコメントください。

開発環境
  • 開発環境:Visual Studio 2019
  • フレームワーク:.Net Framework 4.8
  • MVCモデル
  • DB:MySQL

前提

Visual Stuido と MySQLを接続するためにはPCにMySQLをインストールする必要があります。

その他にもいくつか必要なソフトウェアをインストールする必要があります。

まだお済でない方は下記記事を参考に準備をしてくだしい。

プロジェクト作成

それでは初めていきましょう。

まずは新規プロジェクトを作成していきます。

フレームワークは『ASP.NET WEbアプリケーション (.NET Framewrok)』を選択します。

『MVC』を選択します。

MySQL接続に必要なパッケージをインストール

続いて、以下のパッケージをインストールしていきます。

  • MySql.Data 8.0.20
  • MySql.Data.EntityFramework 8.0.20

参照を右クリック→NuGetパッケージの管理 を選択します。

参照タブでMySql.Dataと調べます。

バージョン8.0.20をインストールしていきます。

ライセンスの同意が求められたら同意して下しい。

つづいて、MySql.Data.EntityFramework をバージョンを指定しインストールします。

これでプロジェクトの準備は完了です。

実装していく

ここからはゴリゴリとソースコードを書いていきましょう。

モデルクラスの作成

まずはモデルクラスを作成していきます。

Modelsフォルダを右クリック→追加→クラスを選択します。

今回は『Todo.cs』というモデルクラスを作成します。

Todo.csのソースコードは以下の通りです。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;


namespace MySQLTestApp_2019.Models
{
    public class Todo
    {
        public int Id { get; set; }

        [DisplayName("概要")]
        public string Summary { get; set; }

        [DisplayName("詳細")]
        public string Detail { get; set; }

        [DisplayName("期限")]
        public DateTime Limit { get; set; }

        [DisplayName("完了")]
        public bool Done { get; set; }
    }
}

クラス名は単数形で作成することをおすすめします。理由はテーブルが自動的に作成されるときに複数形になるからです。

コンテキストファイルを作成する。

Modelsフォルダを右クリック→追加→新しい項目を選択します。

ADO.NET Entity Data Modelを選択します。

『空のCode First モデル』を選択しでコンテキストファイルを作成していきます。

Model1.csが作成されました。

Model1.csを以下のように修正します。

修正後

using System;
using System.Data.Entity;
using System.Linq;

namespace MySQLConnectTest2019.Models
{
    public class Model1 : DbContext
    {
        // コンテキストは、アプリケーションの構成ファイル (App.config または Web.config) から 'Model1' 
        // 接続文字列を使用するように構成されています。既定では、この接続文字列は LocalDb インスタンス上
        // の 'MySQLConnectTest2019.Models.Model1' データベースを対象としています。 
        // 
        // 別のデータベースとデータベース プロバイダーまたはそのいずれかを対象とする場合は、
        // アプリケーション構成ファイルで 'Model1' 接続文字列を変更してください。
        public Model1()
            : base("name=Model1")
        {
        }

        public DbSet<Todo> Todoes { get; set; }

        // モデルに含めるエンティティ型ごとに DbSet を追加します。Code First モデルの構成および使用の
        // 詳細については、http://go.microsoft.com/fwlink/?LinkId=390109 を参照してください。

        // public virtual DbSet<MyEntity> MyEntities { get; set; }
    }

    //public class MyEntity
    //{
    //    public int Id { get; set; }
    //    public string Name { get; set; }
    //}
}

以下部分を追加しています。

public DbSet<Todo> Todoes { get; set; }

Web.configの情報を修正

Web.configの情報を修正する必要があります。

現在はデフォルトのSQL Serverに接続するようになっていますが、MySQLに接続先を変更する必要があります。

【修正後】※一部抜粋

  <connectionStrings>
    <add name="Model1" connectionString="server=localhost;user id=root;password=Administrator;database=mysqlconnecttest2019db" providerName="MySql.Data.MySqlClient" />
  </connectionStrings>

接続先のDBを作成する

MySQLにログインし以下のSQL文を実行します。

CREATE DATABASE MySQLConnectTest2019DB;

構文↓

CREATE DATABASE (データベース名);

共通レイアウトを作成する

Viewsフォルダを右クリック→追加→MVC5 レイアウトページ(Razor) を選択します。

ファイル名はデフォルトのままでOKです。

ファイル名:_LayoutPage1

ビルドを実施

ここで一度ソリューションビルドをしてください。

コントローラーをこれから作成するため、モデルをプロジェクトに読み込む必要があります。

ビルド→ソリューションのビルド を選択します。

Todoに対するコントローラーを作成する。

Controllersフォルダを右クリック→追加→コントローラー を選択します。

『Entity Frameworkを使用した、ビューがあるMVC 5コントローラー』を選択します。

モデルクラスは作成したTodo.csを選択します。

データコンテキストクラスはModel1.csを選択します。

レイアウトページは_LayoutPage1.cshtmlを選択します。

設定ができたら追加ボタンをクリックします。

スキャフォールディングが正常にできると、Controllersフォルダ配下にTodoesController.csが作成されます。

Viewsフォルダ配下にTodoesフォルダが作成され、その中にCRUDの機能ページが作成されます。

初期画面の変更

App_Startフォルダ配下のRouteConfig.cs を修正します。

修正後

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MySQLTestApp_2019
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Todoes", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

修正箇所は以下の

controller = "Todoes"

conrollerの値をViewsフォルダ配下の作成されたTodoesに変更します。

このままではエラーが出るのでCretae.cshtmlとEdit.cshtmlの修正を行います。

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

上記の部分を削除します。ここでエラーが出るからです。

マイグレーションを行う。

パッケージマネージャーコンソールにて以下のコマンドを実行します。

Enable-Migrations

作成された、Configuration.csの修正を行います。

修正後

namespace MySQLConnectTest2019.Migrations
{
    using System;
    using System.Data.Entity;
    using System.Data.Entity.Migrations;
    using System.Linq;
    // 追加
    using MySql.Data.EntityFramework;

    internal sealed class Configuration : DbMigrationsConfiguration<TestMysqlMVCApp.Models.Model1>
    {
        public Configuration()
        {
            AutomaticMigrationsEnabled = false;

            // 追加
            SetSqlGenerator("MySql.Data.MySqlClient",
                            new MySqlMigrationSqlGenerator());
        }

        protected override void Seed(TestMysqlMVCApp.Models.Model1 context)
        {
            //  This method will be called after migrating to the latest version.

            //  You can use the DbSet<T>.AddOrUpdate() helper extension method 
            //  to avoid creating duplicate seed data. E.g.
            //
            //    context.People.AddOrUpdate(
            //      p => p.FullName,
            //      new Person { FullName = "Andrew Peters" },
            //      new Person { FullName = "Brice Lambson" },
            //      new Person { FullName = "Rowan Miller" }
            //    );
            //
        }
    }
}

追加とコメントしているところを追加しています。

パッケージマネージャーコンソールにて以下のコマンドを実行します。

Add-Migration InitialCreate

InitialCreateは作成されるファイル名なので任意でOKです。

警告が出た場合は、もう一度同じコマンドを実行してください。

パッケージマネージャーコンソールにて以下のコマンドを実行します。

Update-Database

マイグレーションは上記手順で完了です。DBにモデルクラスを元にテーブルが作成されていると思います。

MySQLにて以下のSQL文を実行し確認します。

SHOW tables;

動作確認

デバックモードを実行し、データの追加ができることを確認してみます。

画面上は追加できています。

サーバーエクスプローラーでも確認してみます。

追加できていますね。

以上で、Visual Studio 2019 でMySQLを使用したMVCプロジェクトの作成は完了です。

おわりに

繰り返しになりますが、システムエンジニアとして生きていく上で勉強は欠かせません!
書籍を購入して勉強するのもいいですが専門書は高いし、質問もできません。
私はいつも世界最大級のオンライン学習サイトUdemyで学習を行っています。
Udemyでは具体的な方法を教えてくれるし質問も可能なのでとても学習しやすいと感じています。
セールも定期的に実施されています。90%オフの講義もたくさんあるのでセールのタイミングを狙って購入しています。

「Udemy」公式サイト

コメント

タイトルとURLをコピーしました