Day 29 - 将 Yacht 後台储存资料提取後，送至前台渲染 Layout&deck 及 Video 版面内容区块 - 嵌入 YouTube 影片 - ASP.NET Web Forms C#

=x= 🌵 Yachts 前台页面 Layout & deck plan / Video - Content Page 後端功能制作。

Layout & deck plan / Video 内容区块资料分析介绍 :

📌 Layout & deck plan 跟 Video 分页内容较简单，所以就一起介绍如何处理 :

Layout & deck plan - 带有 CSS 样式的连续图片。

Video - 嵌入 YouTube 影片。

Layout & deck plan - Content Page 页面後端实作 :

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

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

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

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

4. 建立取得 Layout & deck plan 分页内容 loadContent(); 方法逻辑如下

private void loadContent()
{
    //取得 Session 共用 Guid，Session 物件需转回字串
    string guidStr = Session["guid"].ToString();
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    //依 Guid 取得型号资料
    string sql = "SELECT layoutDeckPlanImgPathJSON FROM Yachts WHERE guid = @guidStr";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@guidStr", guidStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    StringBuilder layoutHtmlStr = new StringBuilder();
    List<LayoutPath> saveImagPathList = new List<LayoutPath>();
    if (reader.Read()) {
        string loadImgJson = HttpUtility.HtmlDecode(reader["layoutDeckPlanImgPathJSON"].ToString());
        //加入页面组图 HTML
        saveImagPathList = JsonConvert.DeserializeObject<List<LayoutPath>>(loadImgJson);
        foreach (var item in saveImagPathList) {
            //加入每张图片
            layoutHtmlStr.Append($"<li><img src='upload/Images/{item.SavePath}' alt='layout' Width='670px' /></li>");
        }
        //渲染画面
        ContentHtml.Text = layoutHtmlStr.ToString();
    }
    connection.Close();

}

//页面组图 JSON 资料
public class LayoutPath
{
    public string SavePath { get; set; }
}

🌵 <img> 属性加上 Width='670px' 避免图片太大超出画面。

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

Video - Content Page 页面後端实作 :

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

2. 去 YouTube 任意影片点击分享，并选择嵌入功能，设定想要的模式後点击复制

🌵 点击复制後会将上方的 <iframe> 全选并复制。
👺 如果勾选启用隐私权加强保护模式，连结会变成 www.youtube-nocookie.com 但是这样做无法用於内嵌影片，请不要勾选。

3. 於内容区块内放入 Video 分页内容程序码，并贴上复制的 `<iframe>` 程序码，将 `<iframe>` 的 `src` 属性内容改为 `"#"` ，并加入 `id` 及 `runat="server"` 参考如下

🌵 需自行换算尺寸调整为适合页面的长宽比。
🌵 src="#" 为无意义连结，後面会带入各型号的连结。

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

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

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

private void loadContent()
{
    List<RowData> saveRowList = new List<RowData>();
    //取得 Session 共用 Guid，Session 物件需转回字串
    string guidStr = Session["guid"].ToString();
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    //依 Guid 取得型号资料
    string sql = "SELECT overviewDimensionsJSON FROM Yachts WHERE guid = @guid";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@guid", guidStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        string loadJson = HttpUtility.HtmlDecode(reader["overviewDimensionsJSON"].ToString());
        saveRowList = JsonConvert.DeserializeObject<List<RowData>>(loadJson);
        // List<T> 第一笔资料是放影片连结
        string youtubeUrlStr = saveRowList[0].SaveValue;
        //如果没有影片连结就导回 OverView 分页
        if (String.IsNullOrEmpty(youtubeUrlStr)) {
            Response.Redirect($"Yachts_OverView.aspx?id={guidStr}");
        }
        else {
            //将取出的 YouTube 连结字串分离出 "影片 ID 字串"
            //使用者如果是用分享功能复制连结时处理方式
            string[] youtubeUrlArr = youtubeUrlStr.Split('/');
            //使用者如果是直接从网址复制连结时处理方式
            string[] vedioIDArr = youtubeUrlArr[youtubeUrlArr.Length - 1].Split('=');
            //将 "影片 ID 字串" 组合成嵌入状态的 YouTube 连结
            string strNewUrl = "https:/" + "/youtube.com/" + "embed/" + vedioIDArr[vedioIDArr.Length - 1];
            //更新 <iframe> src 连结
            video.Attributes.Add("src", strNewUrl);
        }
    }
    connection.Close();
}

// JSON 资料
public class RowData
{
    public string SaveItem { get; set; }
    public string SaveValue { get; set; }
}