【ASP.NET MVC】C#でテーブルのデータを表示する方法(SQL SERVER)




それぞれの役割を理解しながら学習に取り組んでいきましょう!

新米太郎
新米太郎

 

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

今回はテーブルのデータをSQLで抽出して、ブラウザに一覧形式で表示する方法を紹介していきます。

コピペするだけではなくちゃんと処理の流れも理解しましょう。

ASP.NET(MVC)の環境構築がまだの人、上手く構築できない人はこちら⬇️

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

実行結果

今から紹介していくコードを実行すると以下の実行結果が表示されます。

今回は商品一覧を作成してみましょう!

新米太郎
新米太郎

今回一覧を表示するだけなのでCSSなどデザイン要素はありませんので、そこはご自身でカスタマイズしてください。

DBの設定

テーブル内のデータをブラウザ上に表示するので、まずはテーブルの「デザイン」と「データ」を設定していきましょう。

今回「testTable」というテーブル名にしました。(テーブル名はお好みでどうぞ)

データベース自体の作成方法がわからない方は、「SQL Serverオブジェクトエクスプローラー/データベースを右クリック/新しいデータベースの追加」を選択し作成してください。

>>詳しくはこちらのPDF(p11~14を参照)

 

①テーブルのデザイン設定

上記のように真似してください。

「名前」や「データ型」をそれぞれ入力するか、もしくは青色の範囲選択と同じ様に記述してください。

必ず入力し終わりましたら、画面左上の「更新(U)」を押して更新完了してください。


②テーブルのデータ設定

テーブル内のデータは適当に作成してください。

カラムIdは上記と異なると思いますが気にしないでください。

以上でテーブルの設定は完了です。
では、コードに参りましょう。

HTML

」マークを付与することで、html内でC#が記述できます。

@model ShinmaiWebApp.Models.WebTest
@{
    ViewBag.Title = "WebTest";
}
    <h2>商品一覧</h2>

    <form method="post">
        <!--テーブルにデータがあるか判定-->
        @if(Model.IdList != null)
         {
            <!--テーブル作成-->
            <table border="1">
                <tr>
                    <th style="width: 150px;">選択</th>
                    <th style="width: 150px;">商品名</th>
                    <th style="width: 150px;">金額</th>
                </tr>
                <!--DB内の商品名金額すべて一行づつ表示-->
                @for (var i = 0; i < @Model.IdList.Count; i++)
                 {
                    <tr>
                        <!--レコードの数分チェックボタン表示(複数選択可)-->
                        <th style="width: 150px;"><input type="checkbox" name="choice" value="@Model.IdList[i]" /></th>
                        <th style="width: 150px;">@Model.ProductList[i]</th>
                        <th style="width: 150px;">@Model.PriceList[i]</th>
                    </tr>
                 }
            </table>
         }
    </form>


5~30行目をコピペしてください。

9行目でテーブル内にデータがあるかif文で判定しています。今回nullの場合だとテーブルを作成しません。

12~28行目で一覧テーブルを作成しており、19行目でテーブル内のレコードの数だけループします。

C#

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>
        /// 登録ID取得
        /// </summary>
        public List<string> IdList { set; get; } = new List<string>();

        /// <summary>
        /// 商品名取得
        /// </summary>
        public List<string> ProductList { set; get; } = new List<string>();

        /// <summary>
        /// 金額取得
        /// </summary>
        public List<string> PriceList { set; get; } = new List<string>();

        /// <summary>
        /// テーブル内の情報を取得する
        /// </summary>
        public void GetProductInfo()
        {
            //DB接続
            using (var conn = new SqlConnection(
             ConfigurationManager.ConnectionStrings["TestDB"].ConnectionString))
            {
                try
                {
                    //DB接続開始
                    conn.Open();
                    var cmd = conn.CreateCommand();
                    
                    //testTableのレコードを全て抽出
                    cmd.CommandText = @"SELECT * FROM dbo.testTable";
                    SqlDataReader reader = cmd.ExecuteReader();

                    //testTable内にデータが入っているか判定
                    if (reader.HasRows)
                    {
                        //レコード分ループする
                        while (reader.Read())
                        {
                            //リストにそれぞれのカラム情報を格納
                            IdList.Add(string.Format("{0}", reader["Id"]));
                            ProductList.Add(string.Format("{0}", reader["Product"]));
                            PriceList.Add(string.Format("{0}", reader["Price"]));
                          
                        }
                    }
                }
                catch
                {
                    //例外処理を書きます。(今回は省略)
                }
                finally
                {
                    //DB接続終了
                    conn.Close();
                }
            }
        }
    }
}

 

16,21,26行目で「Id,Product,Price」のデータを格納するためのリストを宣言しています。

修飾子 List<データ型> 変数名 { set; get; } = new List<データ型>();

 

44行目でテーブル内のデータを全てSELECTで抽出しています。

cmd.CommandText = @"SELECT * FROM テーブル名";//"*"は全カラム抽出
cmd.CommandText = @"SELECT Product FROM テーブル名";//カラムProductのみ抽出

 

45行目、SQL文の結果を変数readerに格納します。

54~56行目で各カラムのデータを前に定義したリストに格納しています。

変数名.Add(string.Format("{0}", reader["カラム名"]));

 

コントローラー

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)
        {
            wt.GetProductInfo();//Registrationメソッドの呼び出し
            return View(wt);//ブラウザに描画
        }
        public ActionResult Index()
        {
            return View();
        }
    }
}

 

14行目で.cs内のGetProductInfo()メソッドを呼び出し、returnで結果を返しています。

修飾子 ActionResult .csで定義したクラス名(クラス名 変数) { 
変数. .csで定義したメソッド名();
return View(変数);
}

まとめ

いかがだったでしょうか。

今回はASP.NETで一覧表を表示する方法を紹介しました。

MVCは初め慣れない間は複雑に感じると思いますが、調べながらコードを書いていくことで徐々に慣れていきます。

それぞれの役割を理解しながら学習に取り組んでいきましょう!




コメント

  1. […] 【ASP.NET MVC】C#でテーブルのデータを表示する方法(SQL SERVER)今回はASP.NETでC#… […]

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