こんにちは新米です。
今回は、C#とSQL SERVERでテーブルのデータを検索してブラウザに表示する方法を紹介していきます。
実行結果
今から紹介していくコードを実行すると以下の実行結果が表示されます。
①テーブルのデータを表示
②テキストボックスに文字列を入力→「検索」を押下
③検索にヒットしたデータが表示される。
今回はCSSなどのデザイン要素はありませんので
そこはご自身でカスタマイズしていってください！
DBの設定
テーブル内のデータをブラウザ上に表示するので、まずはテーブルの「デザイン」と「データ」を設定していきましょう。
今回「testTable」というテーブル名にしました。(テーブル名はお好みでどうぞ)
①テーブルのデザイン設定
上記のように真似してください。
「名前」や「データ型」をそれぞれ入力するか、もしくは青色の範囲選択と同じ様に記述してください。
必ず入力し終わりましたら、画面左上の「更新(U)」を押して更新完了してください。
②テーブルのデータ設定
テーブル内のデータは適当に作成してください。
カラムIdは上記と異なると思いますが気にしないでください。
以上でテーブルの設定は完了です。
C#で検索機能を作成する方法
今から検索機能を作成する為のコード紹介と
各処理の解説をしていきたいと思います。
.cshtml(ビュー)
「＠」マークを付与することで、html内でC#が記述できます。
@model ShinmaiWebApp.Models.WebTest
@{
ViewBag.Title = "WebTest";
}
<h2>商品一覧</h2>
<form method="post">
<p>
<input type="text" name="SearchProduct" placeholder="商品名を入力してください">
<input type="submit" name="SearchBtn" value="検索" >
<input type="submit" value="クリア">
</p>
<!--テーブル作成-->
<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>
HTMLでは、画面のレイアウトを作成します。
9~11行目では商品名を入力する為のテキストボックスと検索ボタン、クリアボタンを作成しています。
14行目〜30行目でデータを表示する為のテーブルを作成しています。
type=”submit”のsubmitはボタンが押された時にC#の処理を行う為だよ！
.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>
/// 登録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 string SearchProduct { set; get; }
/// <summary>
/// 検索ボタン
/// </summary>
public string SearchBtn { set; get; }
/// <summary>
/// テーブル内の情報を取得する
/// </summary>
public void GetProductInfo()
{
//DB接続
using (var conn = new SqlConnection(
ConfigurationManager.ConnectionStrings["TestDB"].ConnectionString))
{
try
{
//DB接続開始
conn.Open();
var cmd = conn.CreateCommand();
//全てのデータを抽出
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"]));
}
}
//DB接続終了
conn.Close();
}
catch
{
//例外処理を書きます。(今回は省略)
}
}
}
/// <summary>
/// 商品名を検索し取得する
/// </summary>
public void SearchProductInfo()
{
//DB接続
using (var conn = new SqlConnection(
ConfigurationManager.ConnectionStrings["TestDB"].ConnectionString))
{
try
{
//DB接続開始
conn.Open();
var cmd = conn.CreateCommand();
//検索したレコードを抽出
cmd.CommandText = @"SELECT * FROM dbo.testTable WHERE Product LIKE CONCAT(@SearchProduct,'%')";
cmd.Parameters.Add(new SqlParameter("@SearchProduct", SearchProduct));
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"]));
}
}
//DB接続終了
conn.Close();
}
catch
{
//例外処理を書きます。(今回は省略)
}
}
}
}
}
41行目〜78行目のGetProductInfo()メソッド内では、テーブルのデータを全てブラウザに表示する処理を行っています。
→GetProductInfo()メソッドの細かい説明は省略します。
詳しく知りたい方は以下の記事で説明しています！
83行目〜120行目のSearchProductInfo()メソッド内のSQL文()であいまい検索を行っています。
「あいまい検索をする方法」 SELECT 抽出したいカラム FROM テーブル名 WHERE カラム名 LIKE CONCAT(@変数,'ワイルドカード')
あいまいな検索を行うには「ワイルドカード」を使用します。
C#ではSQL文に直接値を記述しないで以下の処理を加えます。(97行目)
これは「SQLインジェクション攻撃」を未然に防ぐ為です。
cmd.Parameters.Add(new SqlParameter("@変数２", 変数１));
変数1(今回ブラウザで入力した文字列)を→変数2に代入しSQL文で使用します。
.controller(コントローラー)
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
{
/// <summary>
/// 一覧機能、検索機能
/// </summary>
/// <param name="wt"></param>
/// <returns></returns>
public ActionResult WebTest(WebTest wt)
{
//検索押下時に実行
if (!string.IsNullOrEmpty(wt.SearchBtn))
{
wt.SearchProductInfo();
}
else
{
wt.GetProductInfo();
}
return View(wt);//ブラウザに描画
}
}
}
コントローラーでは、.cs内で記述したメソッドを実行する為にあります。
21行目のif文で検索ボタンの押下判定を行っています。
検索ボタンを押した場合、SearchProductInfo()メソッドの処理を行う流れになっています。
検索ボタンを押さない場合は、elseに飛びGetProductInfo()メソッドが実行される仕組みになっています。
よりわかりやすく説明しますと・・・
if(検索ボタンを押下したら以下の処理を行う){
あいまい検索の処理を実行(.csの86~126行目)
}
else{
テーブルの全データを取得する処理を実行(.csの41~81行目)
}
処理結果をブラウザに表示
まとめ
いかがだったでしょうか。
今回はASP.NET(MVC)であいまい検索を行いデータをブラウザに表示する方法を紹介しました。
MVCは初め慣れない間は複雑に感じると思いますが、調べながらコードを書いていくことで徐々に慣れていきます。
それぞれの役割を理解しながら学習に取り組んでいきましょう！
この記事のようにC#でWeb開発をしたい入門者に向けての教材になります。
ロングセラーである「やさしいC#」
プログラミングがはじめての人でもしっかり習得できます！
もちろんVisual Studio 2019に対応しています。
＞＞C#プログラミングのイディオム/宝石＆パターン(中級者向け)
一通り文法を理解している中級者向けの参考書となっております。
実戦で使えるような内容が書かれており仕事のスキルアップにつながります！
コメント