=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 後端的相關細節。