iT邦幫忙

2021 iThome 鐵人賽

DAY 26
2
Modern Web

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

Day 26 - 將 Yacht 後台儲存資料提取後,送至前台渲染 OverView 版面內容區塊 - 前台 Content Page 製作 - ASP.NET Web Forms C#

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


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

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

https://ithelp.ithome.com.tw/upload/images/20211010/20139487uJSLL6VefE.jpg

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


OverView - Content Page 頁面後端實作 :

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


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

https://ithelp.ithome.com.tw/upload/images/20211010/20139487lgng1ki5Fr.jpg

https://ithelp.ithome.com.tw/upload/images/20211010/20139487BBD934qqkV.jpg


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

上一篇
Day 25 - 將 Yacht Manager 後台儲存資料提取後,送至前台渲染 Yachts 版面重覆區塊 - 前台 Master Page 製作 - ASP.NET Web Forms C#
下一篇
Day 27 - 依 Yachts - Specification 前台頁面分析拆解後,逐步建立 Specification 後台功能 - 換行跳脫字元 - ASP.NET Web Forms C#
系列文
ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#30

尚未有邦友留言

立即登入留言