=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 的型别有些不太一样，可以先查一下范例。

• 明日将介绍制作代理商资料表的相关细节。