iT邦幫忙

2021 iThome 鐵人賽

DAY 29
1
Modern Web

ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#系列 第 29

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 分頁內容較簡單,所以就一起介紹如何處理 :

  1. Layout & deck plan - 帶有 CSS 樣式的連續圖片。

https://ithelp.ithome.com.tw/upload/images/20211013/20139487ks0BXZZ7l3.jpg

  1. Video - 嵌入 YouTube 影片。

https://ithelp.ithome.com.tw/upload/images/20211013/20139487BH4h5RtEUh.jpg



Layout & deck plan - Content Page 頁面後端實作 :

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


2. 於內容區塊內放入 Layout & deck plan 分頁內容程式碼,並使用 asp:Literal 等修改參考如下

https://ithelp.ithome.com.tw/upload/images/20211013/20139487SGG47MVRt7.jpg


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 任意影片點擊分享,並選擇嵌入功能,設定想要的模式後點擊複製

https://ithelp.ithome.com.tw/upload/images/20211013/20139487ino2vZSWdm.jpg

  • 🌵 點擊複製後會將上方的 <iframe> 全選並複製。

  • 👺 如果勾選啟用隱私權加強保護模式,連結會變成 www.youtube-nocookie.com 但是這樣做無法用於內嵌影片,請不要勾選。


3. 於內容區塊內放入 Video 分頁內容程式碼,並貼上複製的 <iframe> 程式碼,將 <iframe>src 屬性內容改為 "#" ,並加入 idrunat="server" 參考如下

https://ithelp.ithome.com.tw/upload/images/20211013/20139487DyVzfXtgr4.jpg

  • 🌵 需自行換算尺寸調整為適合頁面的長寬比。

  • 🌵 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; }
}
  • 🌵 YouTube 連結需加入 /embed/ 才是嵌入模式。

  • 🌵 YouTube 分享功能的連結,最後一個反斜線之後的字串是影片的唯一 ID。

  • 🌵 YouTube 瀏覽器網址的連結,最後一個等於符號之後的字串是影片的唯一 ID。


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



本日總結 :

📢 今天的內容就是單純的圖片跟影片嵌入頁面,影片嵌入的小細節只要仔細觀察連結,就可以發現嵌入的連結跟一般分享的連結不同,還有不同影片最後面的字串不同,所以最後面的字串就是影片識別 ID,也做了如果使用者直接從網址複製連結的處理,另外,如果要設定自動撥放,要設成靜音才能自動撥放。

  • 明日將介紹專案製作完成後可以進行優化的相關細節。

上一篇
Day 28 - 將 Specification 後台儲存資料提取後,送至前台渲染 Specification 版面內容區塊 - MSSQL 查詢精靈 - ASP.NET Web Forms C#
下一篇
Day 30 - 遊艇網頁專案完成後的優化方向 - ASP.NET Web Forms C#
系列文
ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#30

尚未有邦友留言

立即登入留言