=x= 🌵 建立 Dealer Manager - Content Page 後台頁面 - 國家功能。

DEALERS 前台頁面分析 :

🧠 從上圖可以發現 DEALERS 頁面的左側邊欄對應的是不同國家，而點選不同國家時，會對應的變換頁面上的一個標籤跟一個連結的文字 (右邊大區塊裡的紅色 USA 小框)，可以得知紅色大框是一個資料表；而右邊大區塊的圖文區域，可以發現資料及圖片是一組一組重複的相同型態內容，而右邊的綠色大框是另一個資料表。

Dealer Manager 後台頁面 - 國家功能介紹 :

📌 後台國家功能需要的功能如下 :

1. 增加"國家"功能。

2. 國家名稱列表，ID 及建立日期設為 ReadOnly。

Dealer Manager 後台頁面實作 :

1. 建立國家資料表

2. 在增加國家的 Add 按鈕 OnClick 事件加入以下後置程式碼

protected void BtnAddCountry_Click(object sender, EventArgs e)
{
    //1.連線資料庫
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    //2.sql語法
    string sql = "INSERT INTO CountrySort (countrySort) VALUES(@countryName)";
    //3.創建command物件
    SqlCommand command = new SqlCommand(sql, connection);
    //4.參數化避免攻擊
    command.Parameters.AddWithValue("@countryName", TBoxAddCountry.Text);
    //5.資料庫連線開啟
    connection.Open();
    //6.執行sql (新增刪除修改)
    command.ExecuteNonQuery(); //無回傳值
    //7.資料庫關閉
    connection.Close();
    //畫面渲染
    GridView1.DataBind();
    DropDownList1.DataBind();
    //清空輸入欄位
    TBoxAddCountry.Text = "";
}

3. 國家表格設定可以直接在 .aspx 頁面直接設定 GridView 控制項如下

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Width="100%" OnRowDeleted="DeltedCountry">
    <Columns>
        <asp:CommandField ButtonType="Button" CancelText="Cancel" DeleteText="Delete" EditText="Edit" HeaderText="Edit" InsertText="Insert" NewText="New" SelectText="Select" ShowEditButton="True"  ControlStyle-CssClass='btn btn-primary btn-block' ControlStyle-BorderColor="#66CCFF" ControlStyle-BorderStyle="Solid" ControlStyle-BorderWidth="1px" ControlStyle-ForeColor="White" >
        <ControlStyle BorderColor="#66CCFF" BorderWidth="1px" BorderStyle="Solid" CssClass="btn btn-primary btn-block" ForeColor="White"></ControlStyle>
        </asp:CommandField>
        <asp:BoundField DataField="id" HeaderText="ID Number" InsertVisible="False" ReadOnly="True" SortExpression="id" >
        <ItemStyle HorizontalAlign="Center" />
        </asp:BoundField>
        <asp:BoundField DataField="countrySort" HeaderText="Country Name" SortExpression="countrySort" />
        <asp:BoundField DataField="initDate" HeaderText="Creation Date" SortExpression="initDate" ReadOnly="True" InsertVisible="False" />
        <asp:TemplateField HeaderText="Delete" ShowHeader="False">
            <ItemTemplate>
                <asp:LinkButton ID="BtnDeleteCountry" runat="server" CommandName="Delete" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete？')" CausesValidation="False"></asp:LinkButton>
            </ItemTemplate>
            <ControlStyle BorderColor="#66CCFF" BorderStyle="Solid" BorderWidth="1px" CssClass="btn btn-danger btn-block" ForeColor="White" />
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="White" ForeColor="#000066" />
    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
    <RowStyle ForeColor="#000066" />
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#007DBB" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TayanaYachtConnectionString %>" SelectCommand="SELECT * FROM [CountrySort]" DeleteCommand="DELETE FROM [Dealers] WHERE [country_ID] = @id; DELETE FROM [CountrySort] WHERE [id] = @id" UpdateCommand="UPDATE [CountrySort] SET [countrySort] = @countrySort WHERE [id] = @id">
    <DeleteParameters>
        <asp:Parameter Name="id" Type="Int32" />
    </DeleteParameters>
    <UpdateParameters>
        <asp:Parameter Name="countrySort" Type="String" />
        <asp:Parameter Name="id" Type="Int32" />
    </UpdateParameters>
</asp:SqlDataSource>

• 🌵 同時刪除主表資料與附表資料的作法 : DeleteCommand="DELETE FROM [Dealers] WHERE [country_ID] = @id; DELETE FROM [CountrySort] WHERE [id] = @id"

• 👺 可以在設計頁面使用"自動格式化"選擇喜歡的樣式後再調整樣式比較容易。
  
  

4. 在國家表格 GridView 的 OnRowDeleted 事件中的後置程式碼建立刷新國家下拉列表

protected void DeltedCountry(object sender, EventArgs e)
{
    DropDownList1.DataBind(); //刷新國家下拉列表資料
}

本日總結 :

📢 由於對於初次製作後台來說，此頁功能有點多拆成兩天介紹，明日會再繼續介紹下半部代理商資料功能，本日的學習重點放在如何美化 GridView 表格，從選定一個主題佈置並啟用修改跟刪除功能後，再去進行微調會比較快，調好之後其它頁面如果有用到同類表格，可以複製整段代碼修改沿用，這樣做非常方便且外觀帶有一致性，需要注意的是表格內的按鈕外觀修改，用來帶入 Bootstrap4 樣式的地方是在 ControlStyle 的 CssClass 內，刪除警告可以把警告的文字內容放在 OnClientClick 中，而 SqlDataSource 可以用來直接進行 SQL 語法的操作，在 Parameter 參數化的地方要注意 Type 的型別有些不太一樣，可以先查一下範例。

• 明日將介紹製作代理商資料表的相關細節。