=x= 🌵 Yachts 前台頁面 OverView - Content Page 後端功能製作。

OverView 內容區塊資料分析介紹 :

📌 由於 Yachts 頁面大部分都已製作成主版，我們只需要專注在內容頁的處理 :

1. 橘色區塊 - 後台存為圖文編輯，因為新型號沒有太多資訊時會直接圖文說明。
2. 綠色區塊 - 標題標籤文字，後台存為型號字串，沒尺寸資料時不顯示尺寸區塊。
3. 紫色區塊 - 表格標籤內容，後台存為 JSON 資料。
4. 藍色區塊 - 表格內嵌圖面，後台存為圖片檔名資料，沒圖片資料時不顯示。
5. 粉色區塊 - 連結標籤及顯示文字，後台存為 JSON 資料，沒檔案資料時不顯示下載區塊。

OverView - Content Page 頁面後端實作 :

1. 於前台資料夾右鍵新增"使用主版頁面的 Web Form" 並指定 Yachts.Master為主版。

2. 於內容區塊內放入 OverView 分頁內容程式碼，並使用 asp:Literal 等修改參考如下

3. 於後置程式碼 Page_Load 事件內加入讀取內容方法 loadContent(); 參考如下

protected void Page_Load(object sender, EventArgs e)
{
    //會先跑 Content 頁的 Page_Load 才跑 Master 頁的 Page_Load
    if (!IsPostBack) {
        loadContent();
    }
}

4. 建立取得 OverView 分頁內容 loadContent(); 方法邏輯如下

private void loadContent()
{
    //取得 Session 共用 GUID，Session 物件需轉回字串
    string guidStr = Session["guid"].ToString();
    //依 GUID 取得遊艇資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT * FROM Yachts WHERE guid = @guidStr";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@guidStr", guidStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    StringBuilder dimensionsTableHtmlStr = new StringBuilder();
    List<RowData> saveRowList = new List<RowData>();
    if (reader.Read()) {
        string yachtModelStr = reader["yachtModel"].ToString();
        string contentHtmlStr = HttpUtility.HtmlDecode(reader["overviewContentHtml"].ToString());
        string loadJson = HttpUtility.HtmlDecode(reader["overviewDimensionsJSON"].ToString());
        string dimensionsImgPathStr = reader["overviewDimensionsImgPath"].ToString();
        string downloadsFilePathStr = reader["overviewDownloadsFilePath"].ToString();
        saveRowList = JsonConvert.DeserializeObject<List<RowData>>(loadJson);

        //渲染型號主要內容
        ContentHtml.Text = contentHtmlStr;

        //渲染 DIMENSIONS 尺寸資料區塊 (第 3 筆開始才是尺寸資料)
        if (saveRowList?.Count > 2) {
            //渲染尺寸表型號標題
            string[] yachtModelArr = yachtModelStr.Split(' ');
            dimensionTitle.InnerText = yachtModelArr[1] + " DIMENSIONS";

            //加入渲染 DIMENSIONS 尺寸資料
            int count = 1;
            foreach (var item in saveRowList) {
                //第1筆是 Video 網址，第2筆是 Download 檔名，從第3筆開始取
                if (count > 2) {
                    dimensionsTableHtmlStr.Append($"<tr><th>{item.SaveItem}</th><td>{item.SaveValue}</td></tr>");
                }
                count++;
            }
            //渲染尺寸表格文字內容
            DimensionsTableHtml.Text = dimensionsTableHtmlStr.ToString();

            //渲染尺寸表格圖片內容，無圖片時不執行
            if (!String.IsNullOrEmpty(dimensionsImgPathStr)) {
                DimensionsImgHtml.Text = $"<td><img alt='{yachtModelStr}' src='upload/Images/{dimensionsImgPathStr}' Width='278px' /></td>";
            }
        }
        else {
            //無尺寸資料則隱藏整個區塊
            dimensionTable.Visible = false;
        }


        //渲染下方 Downloads 區塊
        if (!String.IsNullOrEmpty(downloadsFilePathStr)) {
            string downloadsTitle = saveRowList[1].SaveValue;
            if (String.IsNullOrEmpty(downloadsTitle)) {
                //如果沒設定 PDF 標題文字，則顯示文字改為 PDF 檔名
                downloadsTitle = downloadsFilePathStr;
            }
            //渲染下載連結
            DownloadsHtml.Text = $"<a id='HyperLink1' href='upload/files/{downloadsFilePathStr}' target='blank' >{downloadsTitle}</a>";
        }
        else {
            //無下載連結則隱藏整個區塊
            divDownload.Visible = false;
        }
    }
    connection.Close();
}

//表格欄位 JSON 資料
public class RowData
{
    public string SaveItem { get; set; }
    public string SaveValue { get; set; }
}

• 🌵 尺寸區及下載區如果沒資料時要分別隱藏整個區塊。

5. 模擬頁面檢查是否正確呈現，完成~

本日總結 :

📢 可以發現今天的實作內容好像還比昨天的主版內容少，因為主版裡有太多東西而且不同分頁都共用主版，這就是建立主版好用的地方，內容只要注意會出現新型號，資料還不多的時候，會只使用圖文說明，或是尺寸沒有附圖及沒有 PDF 檔案，所以頁面要跟著資料去做版面的變動。

• 明日將介紹製作 Specification Manager - Content Page 後台的相關細節。