Day 15 - 將 COMPANY 後台儲存資料提取後，送至 Certificat 前台渲染畫面 - 相簿資料渲染 - ASP.NET Web Forms C#

13th鐵人賽 c# asp.net webforms

龜人

團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

2021-09-29 00:45:41

857 瀏覽

=x= 🌵 COMPANY - Certificat 前台頁面後端功能製作。

COMPANY - Certificat 頁面資料介紹 :

📌 Certificat 頁面內容分為 : 文字區、直式並排圖片區、橫式並排圖片區。

1. 文字區 - 資料庫內容 : 單純文字物件。

2. 直式並排圖片區 - 資料庫內容 : JSON 格式文字物件。

3. 橫式並排圖片區 - 資料庫內容 : JSON 格式文字物件。

🌵 製作時要把 JSON 格式反序列化為 List 才能使用。

COMPANY 頁面 - Certificat 內容後端實作 :

1. 新增 company1.aspx 將原始 company1.html 的 `<head>` 及 `<body>` 內的內容分別複製到 .aspx 檔案中。

2. 刪除與 VIEWSTATE 有關的程式碼。

3. 使用取代功能將 .html 都取代為 .aspx 。

👀 以上操作可參考 Day 9 文章內容。

4. 這裡因為內容拆成3個區塊，所以需要3個 Literal 控制項來接收

5. 後端 company1.aspx.cs 的 Page_Load 事件加入以下方法

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        loadContentText();
        loadContentImgV();
        loadContentImgH();
    }
}

6. 建立讀取文字內容 loadContentText(); 方法

private void loadContentText()
{
    //從資料庫取內文資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlCountry = "SELECT TOP 1 certificatContent FROM Company";
    SqlCommand command = new SqlCommand(sqlCountry, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        //渲染畫面
        ContentText.Text = reader["certificatContent"].ToString();
    }
    connection.Close();
}

7. 建立讀取直式圖片內容 loadContentImgV(); 方法

private void loadContentImgV()
{
    //會重複添加內容所以用 StringBuilder 效能較好
    StringBuilder ImgVHtml = new StringBuilder();
    //用 List<T> 來存取 JSON 格式圖片檔名
    List<ImagePathV> savePathListV = new List<ImagePathV>();
    //從資料庫取出直式圖檔檔名
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlLoad = "SELECT TOP 1 certificatVerticalImgJSON FROM Company";
    SqlCommand command = new SqlCommand(sqlLoad, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        string loadJson = HttpUtility.HtmlDecode(reader["certificatVerticalImgJSON"].ToString());
        //反序列化JSON格式
        savePathListV = JsonConvert.DeserializeObject<List<ImagePathV>>(loadJson);
    }
    connection.Close();
    // ?. 可用來判斷不是 Null 才執行 Count
    if (savePathListV?.Count > 0) {
        foreach (var item in savePathListV) {
            ImgVHtml.Append($"<li><p><img src='images/{item.SaveName}' alt='Tayana ' /></p></li>");
        }
    }
    //渲染畫面
    ContentImgV.Text = ImgVHtml.ToString();
}

// JSON 資料 V 直式
public class ImagePathV
{
    public string SaveName { get; set; }
}

8. 建立讀取橫式圖片內容 loadContentImgH(); 方法

private void loadContentImgH()
{
    //會重複添加內容所以用 StringBuilder 效能較好
    StringBuilder ImgHHtml = new StringBuilder();
    //用 List<T> 來存取 JSON 格式圖片檔名
    List<ImagePathH> savePathListH = new List<ImagePathH>();
    //從資料庫取出橫式圖檔檔名
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlLoad = "SELECT TOP 1 certificatHorizontalImgJSON FROM Company";
    SqlCommand command = new SqlCommand(sqlLoad, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        string loadJson = HttpUtility.HtmlDecode(reader["certificatHorizontalImgJSON"].ToString());
        //反序列化JSON格式
        savePathListH = JsonConvert.DeserializeObject<List<ImagePathH>>(loadJson);
    }
    connection.Close();
    // ?. 可用來判斷不是 Null 才執行 Count
    if (savePathListH?.Count > 0) {
        foreach (var item in savePathListH) {
            ImgHHtml.Append($"<li><p><img src='images/{item.SaveName}' alt='Tayana ' width='319px' height='234px' /></p></li>");
        }
    }
    ContentImgH.Text = ImgHHtml.ToString();
}

// JSON 資料 H 直式
public class ImagePathH
{
    public string SaveName { get; set; }
}

🌵 記得帶入原本頁面 HTML 編碼裡橫式圖片就有額外設定的寬高尺寸。

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

本日總結 :

📢 昨天跟今天的 COMPANY 頁面，因為有兩個獨立的內容，所以可以完整的練習到，需要拆解分類的畫面，以及只要一口氣送出全部的畫面，認真覺得如果沒有先練習這些，很難直接去挑戰 NEWS 頁跟 Yachts 頁的內容，建議大家要真的搞懂 COMPANY 頁包含後台實作的內容，對後續頁面的製作來說非常實用。