ASP.Net 2023.11.21

案例一: 設計一個可以從資料庫取得資料後，能讓使用者輸入購買數量後，按下按鈕後就能算出總價的功能

1. 建立資料庫
   1. 伺服器總管視窗若沒出現時: 執行檢視 > 伺服器總管
      
   2. 選擇左下視窗上的伺服器總管後然後選擇項目: 伺服器下的資料連接後，
      滑鼠右鍵選擇加入連接
      
      • 伺服器名稱: (localdb)mssqllocaldb
      • 登入伺服器: 使用 Windows 驗證
      • 新資料庫名稱: im
        
        
        
2. 建立資料表
   1. 資料表上，按下滑鼠右鍵，選擇加入新的資料表。
      

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

   2. 切換到頁籤: T-SQL，將 [Table] 命名成 [PRODUCT]，然後執行 更新
      
   3. 按下 更新資料庫
      
   4. 回到伺服器總管按下 更新，就可以看到資料表 PRODUCT
      

      若重複產生一樣名稱的資料表，它會報錯。

3. 新增資料
   選擇資料表 PRODUCT 後，點擊滑鼠右側，選擇顯示資料表資料，然後在出現視窗上開始編輯與新增資料
   

   PID	PNAME	PTYPE	PRICE
   P01	Monitor	A	13000
   P02	Case	B	12000
   P03	CPU	A	5000
   P04	Power	B	9000

   

4. 開始建立新專案: 檔案 > 新增 > 專案
   
   
   
   
5. 於專案項目上，滑鼠右鍵選擇加入 Web 表單
   
   指定項目的名稱: WebForm1 即表單項目名稱
   
6. 到設計界面，加入一資料控制項 SqlDataSource，來與資料庫連結、下達 SQL 指令，取得資料庫回傳的資料，點擊控制項上的設定控制項
   
   設定資料來源: 連接資料庫
   
   設定資料來源: 儲存連線字串到 Web.config
   
   設定資料來源: 下達 SQL 命令
   
   設定資料來源: 查詢結果與完成
   
7. 介面加入 GridView 控制項來產生多筆資料顯示。
   1. 加入 CSS 樣式效果
      點擊自動格式化後，選擇專業效果後，按下確定按鈕。
      
      
   2. 資料繫結: 將取得資料來源 SqlDataSource1 與 GridView1 做 Data Bind(資料繫結)選擇資料來源: 點擊選擇資料來源為SqlDataSource1
      
8. 執行 WebForm1 檢視輸出
   
9. GridView 介面上，新增一個欄位 Quantity，
   
   可用的欄位
   • CommandField: 意指這個欄位是指令功能(對某筆資料要做何動作)，有些標準指令(新增、刪除、修改、查詢)
   • TemplateField: 意指自己要設計的功能。
   • DynamicField: 動態取得的欄位(PID、PNAME、PTYPE、PRICE)資料
     所以這裡選擇 加入 > TemplateField
     
     然後開始設計這 TemplateField 欄位的屬性
     於欄位 HeaderText 輸入 Quantity 後，按下確定
     
     執行結果得到了一新欄位: Quantity，但目前還不能輸入資料:
     
     於欄位 Quantity 項目中能輸入內容可加一 TextBox，作法編輯TemplateField 樣版欄位，設計每筆欄位要做什麼。
     點擊 GrideView 控制項上的 編輯樣板:
     
     拖曳 TextBox 控制項到 ItemTemplate 視窗內:
     
     
     執行結果，畫面輸出:
     
10. 接著增加一按鈕來處理，當點擊按鈕時，就可以計算出總價。
    1. 介面加入 Button1 控制項，設 Button1.Text = Total
    2. 介面加入 Label1 控制項，設 Label1.Text = ""，顯示總價格
       
11. 設計 Button1 事件的方法，雙擊 Button1 進入:

    protected void Button1_Click(object sender, EventArgs e)
    {
        int sum=0;
        int temp;
     //從 GridView 取出資料， GridView 裡面有多筆的 GridViewRow 
        foreach (GridViewRow item in GridView1.Rows)
        {
            //有輸入值
            if (((TextBox)item.Cells[4].FindControl("TextBox1")).Text != "")
            {
                //頁面上要找控制項使用 FindControl()
                // 每一筆 GridView 有 5 個欄位 (PID、PNAME、PTYPE、PRICE、Quantity) 
                //item.Cells[4].Text  指該欄位名稱
                //item.Cells[4].FindControl("TextBox1")  會回傳 Control，不管是哪一控制項
                //((TextBox) item.Cells[4].FindControl("TextBox1")).Text  得到是字串
                temp = Int32.Parse(((TextBox)item.Cells[4].FindControl("TextBox1")).Text);
            }
            else
            {
                temp = 0;
            }
         sum += sum + temp * Int32.Parse(item.Cells[3].Text);
        }
     Label1.Text = sum.ToString();
    }       

    執行結果
    

案例二 有一個 GideView 可顯示所有產品資料，如果要購買該項產品，可以按一下那一列，那產品就能丟到一個 ListBox 上做顯示，可以做取消，最後確定後按下按鈕計算出總價

1. 介面設計
   1. 加入一個 WebForm2
      
   2. 然後表單內加入資料來源 SqlDataSource
      到設計界面，加入一資料控制項 SqlDataSource，來與資料庫連結、下達 SQL 指令，取得資料庫回傳的資料，點擊控制項上的設定控制項
      
      設定資料來源: 連接資料庫
      
      設定資料來源: 儲存連線字串到 Web.config
      
      設定資料來源: 下達 SQL 命令
      
      設定資料來源: 查詢結果與完成
      
   3. 將 SqlDataSource 資料顯示出來:
      1. 加入 CSS 樣式效果
         點擊自動格式化後，選擇專業效果後，按下確定按鈕。
         
         
      2. 資料繫結: 將取得資料來源 SqlDataSource1 與 GridView1 做 Data Bind(資料繫結)選擇資料來源: 點擊選擇資料來源為SqlDataSource1
         
   4. 在 GridView 上列出的產品若被選擇到將輸出至 ListBox 上
      1. 加入 ListBox1
         
   5. 加入兩個按鈕與一個標籤
      1. Button1.Text = "Remove" 取消按鈕
      2. Button2.Text = "Total" 計算出總價
      3. Label1.Text = "" 總價
         
   6. 如何讓 GridView 每筆項目上，能有一個按鈕功能.
      1. 展開 GridView1 功能列表，選擇 編輯資料行
         
      2. 希望該按鈕欄位有 SQL 指令功能，選擇 CommandField 欄位，因為這欄位具有 (編輯、更新、取消、選取、刪除) 功能，現在需要選取某筆資料項目，所以選擇 選取 欄位。
         
      3. 修改欄位樣式: Button Type選擇 Button
         
      4. 這個欄位按鈕具有 PostBack 功能，當按下這按鈕要把選取那一筆的資料，丟到 ListBox 上，雙擊該 選取 按鈕，開始設計方法:
         

         protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
         {
          // 把被選擇到的產品丟到 ListBox
          // ListBox 裏有一個 Items 屬性，是一動態陣列，也是一個容器，裏面有很多 ListItem 元素，每一元素上都有 Text 與 Value 屬性
          ListItem item = new ListItem();
          // 哪一筆被選取到
          // GridView1.SelectedRow.Cells[1] 指 PNAME
          // GridView1.SelectedRow.Cells[3] 指 PRICE
          item.Text = GridView1.SelectedRow.Cells[1].Text;
          item.Value = GridView1.SelectedRow.Cells[3].Text;
          ListBox1.Items.Add(item);
         }         

      5. 測試結果: GridView1 上，是否被選取那一筆的產品名稱被放到 ListBox 上。
         
      6. 計算總價，雙擊 Total 按鈕，產生事件對應方法:

         protected void Button2_Click(object sender, EventArgs e)
         {
         int sum = 0;
         foreach (ListItem item in ListBox1.Items)
         {
             sum += Int32.Parse(item.Value);
         }
         Label1.Text = sum.ToString();
         }

      7. 刪除功能，雙擊 Remove 按鈕，產生事件對應方法:

         protected void Button1_Click(object sender, EventArgs e)
         {
         ListBox1.Items.Remove(ListBox1.SelectedItem);
         //移除掉項目後， ListBox1 上顯示的項目要清除
         Label1.Text = "";
         }        

案例三 產品資料編輯與更新

1. 新增一個 WebForm3.aspx
   
2. 然後表單內加入資料來源 SqlDataSource
   到設計界面，加入一資料控制項 SqlDataSource，來與資料庫連結、下達 SQL 指令，取得資料庫回傳的資料，點擊控制項上的設定控制項
   
   設定資料來源: 連接資料庫
   
   設定資料來源: 儲存連線字串到 Web.config
   
   設定資料來源: 下達 SQL 命令，這裡如果要有查詢以外功能，須點擊 進階後，勾選產生 INSERT、UPDATE 和 DELETE 陳述式
   
   
3. 介面加入 GridView 控制項來產生多筆資料顯示。
   1. 加入 CSS 樣式效果
      點擊自動格式化後，選擇專業效果後，按下確定按鈕。
      
      
   2. 資料繫結: 將取得資料來源 SqlDataSource1 與 GridView1 做 Data Bind(資料繫結)選擇資料來源: 點擊選擇資料來源為SqlDataSource1，並且勾選 啟用編輯 與 啟用刪除 功能
      
   3. 展開 GridView1 功能列表後，選擇 編輯資料行
      
      先修改 Command 欄位的 Button 樣式為: Button
      
   4. 刪除按鈕 功能直接做刪除較危險，所以增加防呆處理
      展開 GridView1 功能列表後，選擇 編輯資料行，選取的欄位中 將 CommandField 欄位，轉換成 TemplateField 後才能修改按鈕上制式的功能。
      
      然後按下 確定 按鈕
      
      在到原始碼上去修改
      
      找到刪除按鈕
      
      增加一屬性 OnClientClick="return confirm('Are you sure?')"，修改如下:

      按下刪除按鈕，會跳出一視窗，詢問 確定 還是 取消，當按下 確定 按鈕，回傳 True， Submit 指令就會執行回傳給伺服器。若是按下 取消 按鈕，回傳 False，產生 error，不執行 Submit，不會送出到伺服器端。
      輸出:
      

   5. 讓使用者於 PTYPE 欄位輸入資料時，可以做 下拉式選單 功能，因為預設是 TextBox 樣式。
      1. 展開 GridView1 功能列表後，選擇 編輯資料行，於 選取的欄位中 選取 PTYPE 欄位，轉換成 TemplateField 後才能修改按鈕上制式的功能。
         
      2. 按下確定後，回到 GridView1 功能列，展開點擊 編輯樣板。
         
      3. 選取正確的 PTYPE 樣板欄位，應該是 Column[4] 裏面的編輯項目
         EditItemTemplate

         目前有兩個 TemplateField 欄位，一個是 Column[0] 是 CommandField 轉換後的 TemplateField，一個是 PTYPE 欄位，轉換後的 TemplateField。
         
         選取後，可以看到裡面的內容是 TextBox
         
         將它換成 DropdownList。
         
         因為 DropDownList 項目只有 A 與 B 所以直接作項目編輯就可以。

         1. 展開 DropdownList 功能項，加入 3 個成員與各自的屬性:
            
            
            
            
         2. 結束樣版編輯後儲存。

      4. 執行專案
         原第二筆項目上顯示資料 B
         
         但按下項目 編輯後
         下拉式選單出現值為 A
         
         這時若按下 更新 按鈕將出錯
         
         問題癥結於，下拉式選單不知如何與資料作連結。
         解決方式: 回到 GridView1 的樣版編輯，找到 Column[4] 的 EditItemTemplate:
         
         下拉式選單旁邊有一個功能選項，展開後選擇 編輯 DataBinding
         
         指定要繫結的資料是選擇到的值(A、B、C)，所以是 SelectValue
         這個值要繫結的欄位叫做 PTYPE，一定要勾選 雙向資料繫結 這樣資料才會同步更新(資料庫與 DropdownList 選擇值)。