ASP.NET 2023.11.16

日期: 2023.11.16 星期四

建立資料庫
1. 伺服器總管視窗若沒出現時: 執行檢視 > 伺服器總管
2. 選擇左下視窗上的伺服器總管後然後選擇項目: 伺服器下的資料連接後，
  滑鼠右鍵選擇加入連接
  - 伺服器名稱: (localdb)mssqllocaldb
  - 登入伺服器: 使用 Windows 驗證
  - 新資料庫名稱: im
建立資料表
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
  
  若重複產生一樣名稱的資料表，它會報錯。
新增資料
選擇資料表 PRODUCT 後，點擊滑鼠右側，選擇顯示資料表資料，然後在出現視窗上開始編輯與新增資料

PID PNAME PTYPE PRICE

P01 Monitor A 13000

P02 Case B 12000

P03 CPU A 5000

P04 Power B 9000
開始建立新專案: 檔案 > 新增 > 專案
於專案項目上，滑鼠右鍵選擇加入 Web 表單

指定項目的名稱: WebForm1 即表單項目名稱
案例: 不寫程式，使用控制項將資料表 PRODUCT 以表格方式顯示在 WebForm1 表單上。
1. 使用控制項 SqlDataSource 將資料庫連接、下 SQL 指令，得到結果；在表單加入 SqlDataSource
2. 設定資料來源
  選擇資料庫
  
  勾選: 連接字串，查看連線字串內容後，按下下一步。
  
  將連線字串存入 Web.config，按下下一步。
  
  選擇資料表與查詢結果顯示欄位: PID、PNAME、PTYPE、PRICE，然後按下下一步。
  
  按下測試查詢，結果顯示沒問題後，按下完成。
3. 要將查詢資料全部筆數顯示於介面上，使用 Gtidview 來達成。
  WebForm1 上，滑鼠右鍵，選擇設計工具檢視，加入 Gridview，選取自動格式化來選取表格樣式。
4. 將 Gridview 與 SqlDataSource 做資料繫結:
  - 點擊 Griwview 上的小箭頭，然後選擇資料來源: SqlDatSource1
  - 可以勾選分頁，指定頁數，屬性 PageSize = "2"
  - 可以勾選排序: 啟用後，欄位名稱出現連結符號，可以讓我們指定用哪一欄位做排序。
5. 結果測試
案例: 讓它(Gridview)上的資料可做編輯功能(新增、刪除、修改)
1. 回到 SqlDataSource1 上，設定資料來源
2. 按下下一步
3. 設定 Select 陳述式
  1. 檢查 SqlDataSource1 控制項顯示之原始碼上檢視，會發現預設只有提供查詢功能:
    檢查 WebForm1.aspx，原始檔內容。
  2. 如果要能有 新增、修改、刪除 功能，回到設定資料來源的*設定 Select 陳述式，按下進階`，勾選 產生 INSERTUPDATE 和 DELETE 陳述式
  3. 在回到檢查 WebForm1.aspx，原始檔內容時，就會發現 SqlDataSource1 控制項上有了其他功能。
```
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:imConnectionString %>" DeleteCommand="DELETE FROM [PRODUCT] WHERE [PID] = @PID" InsertCommand="INSERT INTO [PRODUCT] ([PID], [PNAME], [PTYPE], [PRICE]) VALUES (@PID, @PNAME, @PTYPE, @PRICE)" SelectCommand="SELECT [PID], [PNAME], [PTYPE], [PRICE] FROM [PRODUCT]" UpdateCommand="UPDATE [PRODUCT] SET [PNAME] = @PNAME, [PTYPE] = @PTYPE, [PRICE] = @PRICE WHERE [PID] = @PID">
```
4. 到 Gridview 控制項上，展開功能項，可以看到新增了 啟用編輯、啟用刪除、樞紐分析表讀取模式，勾選啟用編輯、啟用刪除
5. 執行 WebForm1.aspx
6. 幫刪除連結功能加上防呆
  1. 選擇 Gridview1 後，按下功能展開按鈕，點選編輯資料行
    - 可用欄位(A): 這些欄位可以被選取加入到 Gridview 上顯示。
    - 選取的欄位(S): 代表目前顯示於 Gridview1 的欄位有哪些。
      
      CommandField 指編輯，刪除欄位
  2. 點擊 CommandField 後，右側出現設定 CommandField 屬性畫面
    - ButtonType: Button 按鈕外觀樣式(Link、Button、圖片)
  3. 因為 CommandField 是不能修改，需轉換成 TemplateField 才能修改，所以點擊 將這個欄位轉換為 TemplateField 連結。
  4. 修改後，檢視原始碼，如下:
```
<asp:TemplateField ShowHeader="False">
 <EditItemTemplate>
   <asp:Button ID="Button1" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
   &nbsp;<asp:Button ID="Button2" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
 </EditItemTemplate>
 <ItemTemplate>
    <asp:Button ID="Button1" runat="server" CausesValidation="False" CommandName="Edit" Text="編輯" />
    &nbsp;<asp:Button ID="Button2" runat="server" CausesValidation="False" CommandName="Delete" Text="刪除" />
 </ItemTemplate>
</asp:TemplateField>
```
  5. 修改上面程式碼，於刪除按鈕按鈕語句內加入一屬性。
```
:
<ItemTemplate>
    <asp:Button ID="Button1" runat="server" CausesValidation="False" CommandName="Edit" Text="編輯" />
    &nbsp;<asp:Button ID="Button2" runat="server" CausesValidation="False" CommandName="Delete" OnClientClick ="return confirm('Are you sure?')" Text="刪除"/>
</ItemTemplate>
```
    OnClientClick ="return confirm('Are you sure?')"，ASP.NET 會自動轉成 onclick ="return confirm('Are you sure?')"
  6. 測試結果: 刪除多了一次確認詢問提示視窗出現
  7. 檢視瀏覽頁面，滑鼠右鍵檢視原始程式碼，在刪除按鈕，屬性上看到:
  8. 新增功能，參考上周二說明製作。
案例: 上面的設計是為管理者設計的功能，現在設計另一個新表單來作為 Client 端的畫面，功能是輸入使用者購買數量後，計算出總價的的功能(使用控制項來製作，不寫程式的方法)。
1. 專案項目上，滑鼠右鍵加入表單，
2. 介面設計
  1. 資料來源:
    加入 SqlDataSource 控制項，展開功能項目，開始
    1. 設定資料來源:
    2. 選擇資料庫
    3. 設定 Select 陳述式: 選擇顯示欄位: PID、 PNAME、PTYPE、PRICE，按下下一步
    4. 按下測試查詢 後，檢視資料，按下完成
  2. 資料顯示:
    加入 Gridview 控制項，展開功能項目，選擇自動格式化後，選擇專業
    
    選擇資料來源: SqlDataSource1
    
    點擊編輯資料行
    
    新增一資料欄: 可以選擇點擊加入新資料行或編輯資料行來操作，這裡用編輯資料行
    
    因要自己設計欄位，所以選擇TemplateField後，按下加入會將該TemplateField加入到選取的欄位視窗內
    
    點擊「選取的欄位」視窗內的TemplateField，開始修改外觀屬性 HeaderText 指欄位的標題文字，設定為Quantity
    
    這時回到設計界面就可看到新增了一個欄位: Quantity
    
    編輯資料行只能新增顯示的欄位，如果要異動 Gridview裡面的資料，需要使用編輯樣板功能
    
    編輯樣板視窗顯示這個 TemplateField 欄位的內容，可以在裡面加入一個 TextBox
    
    然後，展開功能項，點選結束樣板編輯
    
    就會看到欄位 Quantity 每筆項目中出現了 TextBox 輸入項目
  3. 執行 WebForm2.aspx，察看結果。