案例一: 設計一個可以從資料庫取得資料後，能讓使用者輸入購買數量後，按下按鈕後就能算出總價的功能
- 建立資料庫
- 伺服器總管視窗若沒出現時: 執行檢視 > 伺服器總管
- 選擇左下視窗上的伺服器總管後然後選擇項目: 伺服器下的資料連接後，
滑鼠右鍵選擇加入連接
- 伺服器名稱:
(localdb)mssqllocaldb - 登入伺服器:
使用 Windows 驗證 - 新資料庫名稱:
im
- 伺服器名稱:
- 伺服器總管視窗若沒出現時: 執行檢視 > 伺服器總管
- 建立資料表
- 資料表上，按下滑鼠右鍵，選擇加入新的資料表。
名稱 資料型別 允許 Null 預設值 PID varchar(50) Not Null PNAME varchar(50) Not Null PTYPE char(1) Not Null PRICE int Not Null - 切換到頁籤:
T-SQL，將[Table]命名成[PRODUCT]，然後執行更新
- 按下
更新資料庫
- 回到伺服器總管按下
更新，就可以看到資料表PRODUCT
若重複產生一樣名稱的資料表，它會報錯。
- 資料表上，按下滑鼠右鍵，選擇加入新的資料表。
- 新增資料
選擇資料表PRODUCT後，點擊滑鼠右側，選擇顯示資料表資料，然後在出現視窗上開始編輯與新增資料
PID PNAME PTYPE PRICE P01 Monitor A 13000 P02 Case B 12000 P03 CPU A 5000 P04 Power B 9000 
- 開始建立新專案: 檔案 > 新增 > 專案
- 於專案項目上，滑鼠右鍵選擇加入
Web 表單
指定項目的名稱: WebForm1即表單項目名稱
- 到設計界面，加入一資料控制項
SqlDataSource，來與資料庫連結、下達SQL指令，取得資料庫回傳的資料，點擊控制項上的設定控制項
設定資料來源: 連接資料庫
設定資料來源: 儲存連線字串到Web.config
設定資料來源: 下達SQL命令
設定資料來源: 查詢結果與完成
- 介面加入
GridView控制項來產生多筆資料顯示。- 加入
CSS樣式效果
點擊自動格式化後，選擇專業效果後，按下確定按鈕。
- 資料繫結: 將取得資料來源
SqlDataSource1與GridView1做 Data Bind(資料繫結)選擇資料來源: 點擊選擇資料來源為SqlDataSource1
- 加入
- 執行
WebForm1檢視輸出
GridView介面上，新增一個欄位Quantity，
可用的欄位CommandField: 意指這個欄位是指令功能(對某筆資料要做何動作)，有些標準指令(新增、刪除、修改、查詢)TemplateField: 意指自己要設計的功能。DynamicField: 動態取得的欄位(PID、PNAME、PTYPE、PRICE)資料
所以這裡選擇 加入 >TemplateField
然後開始設計這TemplateField欄位的屬性
於欄位HeaderText輸入Quantity後，按下確定
執行結果得到了一新欄位:Quantity，但目前還不能輸入資料:
於欄位Quantity項目中能輸入內容可加一TextBox，作法編輯TemplateField樣版欄位，設計每筆欄位要做什麼。
點擊GrideView控制項上的編輯樣板:
拖曳TextBox控制項到ItemTemplate視窗內:
執行結果，畫面輸出:
- 接著增加一按鈕來處理，當點擊按鈕時，就可以計算出總價。
- 介面加入
Button1控制項，設Button1.Text=Total - 介面加入
Label1控制項，設Label1.Text=""，顯示總價格
- 介面加入
- 設計
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 上做顯示，可以做取消，最後確定後按下按鈕計算出總價
- 介面設計
- 加入一個
WebForm2
- 然後表單內加入資料來源
SqlDataSource
到設計界面，加入一資料控制項SqlDataSource，來與資料庫連結、下達SQL指令，取得資料庫回傳的資料，點擊控制項上的設定控制項
設定資料來源: 連接資料庫
設定資料來源: 儲存連線字串到Web.config
設定資料來源: 下達SQL命令
設定資料來源: 查詢結果與完成
- 將
SqlDataSource資料顯示出來:- 加入
CSS樣式效果
點擊自動格式化後，選擇專業效果後，按下確定按鈕。
- 資料繫結: 將取得資料來源
SqlDataSource1與GridView1做 Data Bind(資料繫結)選擇資料來源: 點擊選擇資料來源為SqlDataSource1
- 加入
- 在
GridView上列出的產品若被選擇到將輸出至ListBox上- 加入
ListBox1
- 加入
- 加入兩個按鈕與一個標籤
Button1.Text="Remove"取消按鈕Button2.Text="Total"計算出總價Label1.Text=""總價
- 如何讓
GridView每筆項目上，能有一個按鈕功能.- 展開
GridView1功能列表，選擇編輯資料行
- 希望該按鈕欄位有
SQL指令功能，選擇CommandField欄位，因為這欄位具有 (編輯、更新、取消、選取、刪除) 功能，現在需要選取某筆資料項目，所以選擇選取欄位。
- 修改欄位樣式:
Button Type選擇Button
- 這個欄位按鈕具有
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); } - 測試結果:
GridView1上，是否被選取那一筆的產品名稱被放到ListBox上。
- 計算總價，雙擊
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(); } - 刪除功能，雙擊
Remove按鈕，產生事件對應方法:protected void Button1_Click(object sender, EventArgs e) { ListBox1.Items.Remove(ListBox1.SelectedItem); //移除掉項目後， ListBox1 上顯示的項目要清除 Label1.Text = ""; }
- 展開
- 加入一個
案例三 產品資料編輯與更新
- 新增一個
WebForm3.aspx
- 然後表單內加入資料來源
SqlDataSource
到設計界面，加入一資料控制項SqlDataSource，來與資料庫連結、下達SQL指令，取得資料庫回傳的資料，點擊控制項上的設定控制項
設定資料來源: 連接資料庫
設定資料來源: 儲存連線字串到Web.config
設定資料來源: 下達SQL命令，這裡如果要有查詢以外功能，須點擊 進階後，勾選產生 INSERT、UPDATE 和 DELETE 陳述式
- 介面加入
GridView控制項來產生多筆資料顯示。- 加入
CSS樣式效果
點擊自動格式化後，選擇專業效果後，按下確定按鈕。
- 資料繫結: 將取得資料來源
SqlDataSource1與GridView1做 Data Bind(資料繫結)選擇資料來源: 點擊選擇資料來源為SqlDataSource1，並且勾選啟用編輯與啟用刪除功能
- 展開
GridView1功能列表後，選擇編輯資料行
先修改Command欄位的Button樣式為:Button
刪除按鈕功能直接做刪除較危險，所以增加防呆處理
展開GridView1功能列表後，選擇編輯資料行，選取的欄位中將CommandField欄位，轉換成TemplateField後才能修改按鈕上制式的功能。
然後按下確定按鈕
在到原始碼上去修改
找到刪除按鈕
增加一屬性OnClientClick="return confirm('Are you sure?')"，修改如下:<ItemTemplate> <asp:Button ID="Button1" runat="server" False" Text="編輯" /> <asp:Button ID="Button2" sesValidation="False" e" urn confirm('Are you " /> </ItemTemplate>按下刪除按鈕，會跳出一視窗，詢問
確定還是取消，當按下確定按鈕，回傳True，Submit指令就會執行回傳給伺服器。若是按下取消按鈕，回傳False，產生error，不執行Submit，不會送出到伺服器端。輸出:
- 讓使用者於
PTYPE欄位輸入資料時，可以做下拉式選單功能，因為預設是TextBox樣式。- 展開
GridView1功能列表後，選擇編輯資料行，於選取的欄位中選取PTYPE欄位，轉換成TemplateField後才能修改按鈕上制式的功能。
- 按下確定後，回到
GridView1功能列，展開點擊編輯樣板。
- 選取正確的
PTYPE樣板欄位，應該是Column[4]裏面的編輯項目
EditItemTemplate目前有兩個
TemplateField欄位，一個是Column[0]是CommandField轉換後的TemplateField，一個是PTYPE欄位，轉換後的TemplateField。
選取後，可以看到裡面的內容是TextBox
將它換成DropdownList。
因為DropDownList項目只有A與B所以直接作項目編輯就可以。- 展開
DropdownList功能項，加入 3 個成員與各自的屬性:
- 結束樣版編輯後儲存。
- 展開
- 執行專案
原第二筆項目上顯示資料B
但按下項目編輯後
下拉式選單出現值為A
這時若按下更新按鈕將出錯
問題癥結於，下拉式選單不知如何與資料作連結。
解決方式: 回到GridView1的樣版編輯，找到Column[4]的EditItemTemplate:
下拉式選單旁邊有一個功能選項，展開後選擇編輯 DataBinding
指定要繫結的資料是選擇到的值(A、B、C)，所以是SelectValue
這個值要繫結的欄位叫做PTYPE，一定要勾選雙向資料繫結這樣資料才會同步更新(資料庫與DropdownList選擇值)。
- 展開
- 加入
留言