それぞれの役割を理解しながら学習に取り組んでいきましょう！
皆さんこんにちは新米です。
今回はテーブルのデータをSQLで抽出して、ブラウザに一覧形式で表示する方法を紹介していきます。
コピペするだけではなくちゃんと処理の流れも理解しましょう。
ASP.NET(MVC)の環境構築がまだの人、上手く構築できない人はこちら⬇️
実行結果
今から紹介していくコードを実行すると以下の実行結果が表示されます。
今回は商品一覧を作成してみましょう！
今回一覧を表示するだけなのでCSSなどデザイン要素はありませんので、そこはご自身でカスタマイズしてください。
DBの設定
テーブル内のデータをブラウザ上に表示するので、まずはテーブルの「デザイン」と「データ」を設定していきましょう。
今回「testTable」というテーブル名にしました。(テーブル名はお好みでどうぞ)
データベース自体の作成方法がわからない方は、「SQL Serverオブジェクトエクスプローラー/データベースを右クリック/新しいデータベースの追加」を選択し作成してください。
①テーブルのデザイン設定
上記のように真似してください。
「名前」や「データ型」をそれぞれ入力するか、もしくは青色の範囲選択と同じ様に記述してください。
必ず入力し終わりましたら、画面左上の「更新(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は初め慣れない間は複雑に感じると思いますが、調べながらコードを書いていくことで徐々に慣れていきます。
それぞれの役割を理解しながら学習に取り組んでいきましょう！
コメント
[…] 【ASP.NET MVC】C#でテーブルのデータを表示する方法(SQL SERVER)今回はASP.NETでC#… […]