Day 15 - 将 COMPANY 後台储存资料提取後，送至 Certificat 前台渲染画面 - 相簿资料渲染 - ASP.NET Web Forms C#

=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 页包含後台实作的内容，对後续页面的制作来说非常实用。