=x= 🌵 Yachts 前台页面 Specification - Content Page 後端功能制作。

Specification 内容区块介绍 :

📌 Specification 内容区块的重点会是所有型号细节全部存在同一张表，需使用型号 GUID 来比对型号的 ID，标题也要用 ID 来比对，然後相同细节的标题只会出现一次，没有细节的标题不会出现，实作会介绍如何使用精灵来帮助产出 SQL 语法。

Specification - Content Page 页面後端实作 :

1. 於前台资料夹右键新增"使用主版页面的 Web Form" 并指定 Yachts.Master为主版。

2. 於内容区块内放入 Specification 分页内容程序码，并使用 asp:Literal 等修改参考如下

3. 於後置程序码 Page_Load 事件内加入读取内容方法 loadContent(); 参考如下

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        loadContent();
    }
}

4. 开启 Microsoft SQL Server Management 使用查询精灵协助取得 SQL 语法参考

• 👀 MSSQL 参考操作 : SQL语法-表与表之间的关系 Join 也可使用小精灵产生Join

• 🌵 下面执行时会增加 GUID 做为筛选条件。

5. 建立取得 Specification 分页内容 loadContent(); 方法逻辑如下

private void loadContent()
{
    string guidStr = Session["guid"].ToString();
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT Yachts.guid, Specification.detail, DetailTitleSort.detailTitleSort"
                + " FROM DetailTitleSort INNER JOIN"
                    + " Specification ON DetailTitleSort.id = Specification.detailTitleSort_ID INNER JOIN"
                    + " Yachts ON Specification.yachtModel_ID = Yachts.id WHERE Yachts.guid = @guidStr";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@guidStr", guidStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    StringBuilder detailHtmlStr = new StringBuilder();
    //用於检查 Title 是否相同
    string checkTitle = "";
    while (reader.Read()) {
        string detailTitle = reader["detailTitleSort"].ToString();
        //需使用 HtmlDecode ，因为存入时有使用 HtmlEncode 转换换行用标签 <br>
        string detailStr = HttpUtility.HtmlDecode(reader["detail"].ToString());
        // 加入第一个标题，并更新检查用变数
        if (String.IsNullOrEmpty(checkTitle)) {
            detailHtmlStr.Append($"<p>{detailTitle}</p><ul>");
            checkTitle = detailTitle;
        }
        // Title 不相同时就更新确认用变数并加入 Title 的 HTML 语法
        else if (!checkTitle.Equals(detailTitle)) {
            checkTitle = detailTitle;
            detailHtmlStr.Append($"</ul><p>{detailTitle}</p><ul>");
        }
        detailHtmlStr.Append($"<li>{detailStr}</li>");
    }
    connection.Close();
    //结束 HTML 字串并渲染画面
    detailHtmlStr.Append($"</ul>");
    ContentHtml.Text = detailHtmlStr.ToString();
}

• 🌵 使用 MSSQL 精灵产生的语法并加上筛选条件WHERE Yachts.guid = @guidStr。

• 🌵 SQL 语法换行记得不要漏掉空格。

6. 模拟页面检查是否正确呈现，完成~

本日总结 :

📢 今天的内容原本是写成 3 个 SQL 命令去分别执行，後来才改成这样，顺便介绍用精灵来协助产生 SQL 的 JOIN 语法，比较需要思考一下的地方是，标题回圈的逻辑，可以都不管列表的解尾标签 </ul>，页面还是可以正常渲染，不过还是用完整的方式写出来了。

• 明日将介绍制作前台 Layout & deck plan / Video - Content Page 後端的相关细节。