【初心者向け】C#-ASP.NET (WEB) 入力した情報をデータベースに登録する実装方法

皆さんこんにちは新米です。

Webアプリ開発をする際に、必ずと言っていいほど必要になってくるのがデータベースです。この記事では初心者でもコピペをするだけでデータベースに値を登録する機能が作れます！

新米太郎

さっそく手順通りにやっていきましょう！

【VisualStudio】インストール・環境構築がまだな人はこちらから⬇️

【Visual Studio2019】C# ASP.NET(MVC) Webアプリ環境構築のやり方

今回は、C＃でWebアプリケーションをつくりたいけどWebアプリを作るための環境構築のやり方がわからない、環境構築に時間がかかる人のための記事となります。HTMLからC#のDB接続まで全てやり方を画像にそって詳しくPDFにまとめました。

テーブルの設定は必須です！！初めにやりましょう！
コピペOK！実際に実装してみよう！

テーブルの設定は必須です！！初めにやりましょう！

まず始めにテーブルのカラム名(名前)・データ型を設定しなければいけません。

今回は以下のテーブルを作成してください。

カラムIdは登録時、自動的にId番号を昇順登録されるように「IDENTITY」を加える設定をします。

・NULLと”,”(カンマ)の間に「IDENTITY」を入力→更新を選択

データベースの更新(U)を選択(テーブル作成完了)

コピペOK！実際に実装してみよう！

・6行目：using 「ソリューション名」.Models; を追加

・12行目〜16行目をコピー

➡︎12行目では[.cs]で定義したクラス名を入力

➡︎13行目では[.cs]で定義したメソッド名を入力

[HomeControllers.cs]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ShinmaiWebApp.Models;

namespace ShinmaiWebApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult WebTest(WebTest wt)//.csのメソッド名
        {
            wt.Registration();//Registrationメソッドの実行結果を呼び出し
            return View(wt);//ブラウザに描画
        }
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

・1行目〜14行目：まるまるコピー

➡︎1行目は @model [ソリューション名].Models.[.csで定義したクラス名]

[.cshtml]

@model ShinmaiWebApp.Models.WebTest
@{
   VeiwBag.Title = "WebTest";
 }

<h2>商品登録</h2>

<form method="post">
    <label>商品 :</label><input type="text" name="ProductName"><!--商品入力欄-->
    <br><!--改行-->
    <label>金額 :</label><input type="text" name="Price"><!--金額入力欄-->
    <br>
    <input type="submit" value="登録"><!--登録ボタン-->
</form>

一度正しく表示されるか確認しましょう。

[.cshtml]を選択 →実行

こんな感じの画面が表示されればOK！

一度ブラウザを閉じて[.cs]に移りましょう。

・12行目〜54行目をコピー

[.cs]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data.SqlClient;

namespace ShinmaiWebApp.Models
{
    public class WebTest
    {
        /// <summary>
        /// 入力した商品の値をcshtmlからもらってきています。
        /// </summary>
        public string ProductName { set; get; }

        /// <summary>
        /// 入力した金額の値をcshtmlからもらってきています。
        /// </summary>
        public string Price { set; get; }

        /// <summary>
        /// 入力した商品と金額を登録
        /// </summary>
        public void Registration()
        {
            //DB接続
            using (var conn = new SqlConnection(
             ConfigurationManager.ConnectionStrings["TestDB"].ConnectionString))//[ ]の中はWeb.configのnameの値
            {
                try
                {
                    //DB接続開始
                    conn.Open();
                    var cmd = conn.CreateCommand();

                    //入力した値をテーブルのカラムに挿入(登録)
                    cmd.CommandText = @"INSERT INTO dbo.testTable (Product,Price) VALUES (@ProductName,@Price) ";
                    cmd.Parameters.Add(new SqlParameter("@ProductName", ProductName != null ? ProductName : System.Data.SqlTypes.SqlString.Null));//@ProductNameに値渡し
                    cmd.Parameters.Add(new SqlParameter("@Price", Price != null ? Price : System.Data.SqlTypes.SqlString.Null));//@Priceに値渡し

                    cmd.ExecuteNonQuery();
                }
                catch
                {
                    //ここにはエラー文を書きます。(今回は省略)
                }
                finally
                {
                    //DB接続終了
                    conn.Close();
                }
            }
        }
    }
}

[.cs]の28行目、29行目の[“TestDB”]は自分の[Web.config]内の赤線の部分と同じか確認してください。

[Web.config]⬅️ソリューションエクスプローラーの直下にあります。