ASP.NET 2023.11.14

日期: 2023.11.14 星期二

案例: 將資料庫的產品資料取出來後，讓使用者能輸入訂購數量，然後按下按鈕就可以算出總價，使用微軟控制項元件來製作

建立資料庫
1. 伺服器總管視窗若沒出現時: 執行檢視 > 伺服器總管
2. 選擇左下視窗上的伺服器總管後然後選擇項目: 伺服器下的資料連接後，
  滑鼠右鍵選擇加入連接
  - 伺服器名稱: (localdb)mssqllocaldb
  - 登入伺服器: 使用 Windows 驗證
  - 新資料庫名稱: im
建立資料表
1. 資料表上，按下滑鼠右鍵，選擇加入新的資料表。
  
  名稱資料型別允許 Null 預設值
  
  PID varchar(50) Not Null
  
  PNAME varchar(50) Not Null
  
  PRICE int Not Null
2. 切換到頁籤: T-SQL，將 [Table] 命名成 [PRODUCT]，然後執行 更新
3. 按下 更新資料庫
4. 回到伺服器總管按下 更新，就可以看到資料表 PRODUCT
  
  若重複產生一樣名稱的資料表，它會報錯。
新增資料
選擇資料表 PRODUCT 後，點擊滑鼠右側，選擇顯示資料表資料，然後在出現視窗上開始編輯與新增資料

PID PNAME PRICE

P01 Monitor 1200

P02 Case 3900

P03 CPU 12000

P04 Power 3000

打完一筆資料庫管理系統自動將這筆資料寫入資料庫，可以按下左上角確認內容，刪除可以顯取該筆後，點擊滑鼠右鍵後選擇刪除。
開始建立新專案: 檔案 > 新增 > 專案
於專案項目上，滑鼠右鍵選擇加入 Web 表單

指定項目的名稱: WebForm1 即表單項目名稱
WebForm1 上，滑鼠右鍵，選擇設計工具檢視，進入設計界面

名稱	資料型別	允許 Null	預設值
PID	varchar(50)	Not Null
PNAME	varchar(50)	Not Null
PRICE	int	Not Null

PID	PNAME	PRICE
P01	Monitor	1200
P02	Case	3900
P03	CPU	12000
P04	Power	3000

請替一家餐廳設計一個訂餐頁面，這家餐廳的產品有蛋炒飯，牛肉麵，以及排骨飯。產品價格分別為蛋炒板 100 元,牛肉麵 200元·排骨飯 150 元。餐廳老闆希望客戶在訂購時使用下拉式選單選擇產品。然後輸入購買數量。當數量輸入完成按下「下單」按鈕便可把一筆購買數量資料顯示在下方螢幕，購買資料包含產品名稱，數量與總價。下單過程可重複發生，亦即客戶可在同一頁面輸入不同產品與需求數量，顯示部分可同時顯示多筆購買資料。當不再選擇繼續購買餐點時客戶可按下「結帳」按鈕，在另一頁面會顯示最終消費的總金額(Note: 可利用 Session 技術來儲存與計算最終消費總金額)。

下拉式選單，資料來自資料庫。

介面: WebForm1.aspx 表單上製作介面。
- DropdownList1
  因為資料來自資料庫，所以選擇 控制項 > SqlDataSource，來產生資料
- SqlDataSource
- 文字: 價格 + Label1.Text = ""
滑鼠指向控制項 SqlDataSource1 後，點擊設定資料來源
1. 選擇已經連結過的資料庫，點選連接字串來觀察已經建立好的連接字串，然後按下下一步
2. 詢問是否要將這連結字串寫入 Web.config 檔案內，勾選是，
3. 詢問 SQL 指令的操作內容是什麼:
  - 指定資料表: Product
  - 指定欲查詢資料顯示結果的欄位有哪些欄位: PIP、PNAME、PRICE
    
    透過以上操作，得到 SQL 指令為: SELECT [PIP],[PNAME],[PRICE] FROM [PRODUCT]
4. 按下測試，來檢查資料庫系統使否有執行查詢，並將結果回傳
5. 執行上述完後，就可以得到一個物件 SqlDataSource。
告訴 DropdownList1 控制項資料來源來自哪裏:
於控制項 DropdownList1 上，點選選擇資料來源
- 資料來源自: 剛剛建立的 SqlDataSource，
- 要顯示於 DropdownList 中的欄位是: PNAME
- 要顯示於 DropdownList 中的值欄位是: PRICE
Label1 控制項上要顯示資料，需在伺服器上來執行將 Client 端提交的項目值，取得後在執行 WebForm1.aspx 將結果回傳，所以需有 Postback 功能。
於 DropdownList 控制項上，勾選AutoPostBack，點擊編輯項目，然後按下下一步

執行 Postback 要做的事，雙擊 DropdownList 加入事件方法:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = DropDownList1.SelectValue;
}

測試結果

開始擴充現行功能，按下按鈕可以新增產品。

UI 設計
新增一按鈕， Button1.Text = New
新增一 WebForm2.aspx 表單。

其中介面有:
- 文字: ID TextBox1.Text = ""
- 文字: NAME TextBox2.Text = ""
- 文字: PRICE TextBox3.Text = ""
- Button1.Text = "Add"，使用者按下這按鈕將新增資料到資料庫裏面。
- Button2.Text = "Back"，使用者按下這按鈕將回到 Webform2.aspx 表單。
回到 WebForm1.aspx 表單。
當按下 Button1 時，要轉向 Webform2.aspx，雙擊 New 按鈕產生事件方法
```
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("WebForm2.aspx");
}
```

在到 WebForm2.aspx 表單，當按下按鈕 Add 時，會新增一筆資料，雙擊 Add 按鈕，開始設計事件方法:

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

namespace _20231014
{
 public partial class WebForm2 : System.Web.UI.Page
 {
     protected void Page_Load(object sender, EventArgs e)
     {

     }

     protected void Button2_Click(object sender, EventArgs e)
     {
         Response.Redirect("WebForm1.aspx");
     }

     protected void Button1_Click(object sender, EventArgs e)
     {
         //新增資料大部分手動(透過 Ado.Net)，少用控制項操作
         //1. 要與 MSSQL 連結，所以須引用 using System.Data.SqlClient;
         //2. 要到 Web.config 取資料，所以 using System.Web.Configuration;
         //取出連線字串，參考 Wen.config 上的連線字串
         string strcon = WebConfigurationManager.ConnectionStrings         ["imConnectionString"].ConnectionString;
         //C# 使用 using 語法除了 import 功能，另外也可產生物件與對此物件做管理
         //產生一個 sqlcon 物件後，這 sqlcon 物件要做 {  .. }，當離開 {} 後，sqlcon 會自動         消失掉(被回收)
         using (SqlConnection sqlcon = new SqlConnection(strcon))
         {
             //連結資料庫
             sqlcon.Open();
             //產生  SqlCommand 物件
             SqlCommand sqlcmd = new SqlCommand();
             //指定透過哪一連接(資料庫)要將 SQL Command 丟給她
             sqlcmd.Connection = sqlcon;
             //SQL 指令，使用集合變數寫法 @變數名稱
             sqlcmd.CommandText = @"INSERT INTO  PRODUCT (PID, PNAME, PRICE)          VALUES(@pid, @pname, @price)";
             //利用這方法 AddWithValue() 方法，將會過濾輸入的不合法資料，確保安全
             sqlcmd.Parameters.AddWithValue("@pid", TextBox1.Text);
             sqlcmd.Parameters.AddWithValue("@pname", TextBox2.Text);
             //微軟處裡這類 SQL 指令，會自動將輸入資料做轉型後在給資料庫相對的欄位
             //sqlcmd.Parameters.AddWithValue("@price", Int32.Parse(TextBox3.         Text));
             sqlcmd.Parameters.AddWithValue("@price", TextBox3.Text);
             //執行 SqlCommand，因為是新增，所以只要資料交給資料庫處理就可以，不須資料庫的資料         了，所以不需要有 SqlReader
             //不須查詢做資料回傳
             sqlcmd.ExecuteNonQuery();
         }
     }
 }
}

回到 WebForm2.aspx 表單，當按下按鈕 Back 時，會回到 WebForm1.aspx，雙擊按鈕 Back 產生事件方法。
```
protected void Button2_Click(object sender, EventArgs e)
{
Response.Redirect("WebForm1.aspx");
}
```

不使用 SqlCommand 的方式，使用 DataAdapter(資料匹配器) 方法
現在的方式是每次都是先連結到資料庫，然後下指令讓資料庫系統操作執行。
如果想從資料庫系統將資料取得先放置 local 端，讓我好像擁有一離線的資料庫，所以 DatAdapter 有點像是 Database 和 Local 間的橋樑，要如何操作!

先建立 WebForm3.aspx
ListBox1 資料來源從本地端(先從資料庫系統取得資料放到本地端)，此方法，優點取資料快，但缺點是記憶體夠大(因取回的資料是擺在記憶體內)。

Page_Load() 事件將資料放置 ListBox1

using System.Data.SqlClient;
using System.Web.Configuration;
using System.Data;

namespace _20231014
{
 public partial class WebForm3 : System.Web.UI.Page
 {
     protected void Page_Load(object sender, EventArgs e)
     {
         //1. 要與 MSSQL 連結，所以須引用 using System.Data.SqlClient;
         //2. 要到 Web.config 取資料，所以 using System.Web.Configuration;
         //3. Dataset 本地端放資料的地方 using System.Data; 跟 MSSQL 資料庫無關，但跟資料         有關聯
         //不是 Postback 才須執行
         if (! this.IsPostBack)
         {
             string strcon = WebConfigurationManager.ConnectionStrings         ["imConnectionString"].ConnectionString;
             //C# 使用 using 語法除了 import 功能，另外也可產生物件與對此物件做管理
             //產生一個 sqlcon 物件後，這 sqlcon 物件要做 {  .. }，當離開 {} 後，sqlcon          會自動消失掉(被回收)
             using (SqlConnection sqlcon = new SqlConnection(strcon))
             {
                 //Adapter 會自動處理連結，當執行 Fill() 方法時
                 //sqlcon.Open();
                 //建構子可以給 SQL Command
                 SqlDataAdapter sqladp = new SqlDataAdapter("select pid, pname,          price from product", sqlcon);
                 //設定資料集，可以有多個資料表，電腦記憶體中
                 DataSet ds = new DataSet();
                 //透過 Adapter 取資料後填滿於 Dataset 中，賦予一名稱
                 sqladp.Fill(ds, "prod");
                 //使用資料
                 ListBox1.DataSource = ds.Tables["prod"];
                 ListBox1.DataTextField = "pname";
                 ListBox1.DataValueField = "price";
                 //做繫結
                 ListBox1.DataBind();

             }
         }
     }
 }
}

測試結果

想將整筆資料記錄取得，放在一個類似 `Table` 的東西來顯示

作法: 新增 WebForm4.aspx 表單
設計 UI
加入 SqlDataSource。
1. 設定資料來源:
2. 選擇已經連結過的資料庫，點選連接字串來觀察已經建立好的連接字串，然後按下下一步
3. 詢問是否要將這連結字串寫入 Web.config 檔案內，勾選是，
4. 詢問 SQL 指令的操作內容是什麼:
  - 指定資料表: Product
  - 指定欲查詢資料顯示結果的欄位有哪些欄位: PIP、PNAME、PRICE
    
    透過以上操作，得到 SQL 指令為: SELECT [PIP],[PNAME],[PRICE] FROM [PRODUCT]
5. 按下測試，來檢查資料庫系統使否有執行查詢，並將結果回傳
6. 執行上述完後，就可以得到一個物件 SqlDataSource。
7. 加入資料控制項 Gridview1(資料會轉換成一個 HTML Table 的形式)
  
  資料來源選擇 SqlDataSource1
8. 執行 WebForm4.aspx，輸出結果
9. 輸出頁面上，滑鼠右鍵，「檢視網頁原始碼」，可發現轉成一 <table> … </table> 的資料內容。
10. 外觀可以做自動格式化功能
11. 自動分頁功能
12. 設定頁數功能