Day 26 - 将 Yacht 後台储存资料提取後，送至前台渲染 OverView 版面内容区块 - 前台 Content Page 制作 - ASP.NET Web Forms C#

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

OverView 内容区块资料分析介绍 :

📌 由於 Yachts 页面大部分都已制作成主版，我们只需要专注在内容页的处理 :

橘色区块 - 後台存为图文编辑，因为新型号没有太多资讯时会直接图文说明。
绿色区块 - 标题标签文字，後台存为型号字串，没尺寸资料时不显示尺寸区块。
紫色区块 - 表格标签内容，後台存为 JSON 资料。
蓝色区块 - 表格内嵌图面，後台存为图片档名资料，没图片资料时不显示。
粉色区块 - 连结标签及显示文字，後台存为 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; }
}