=x= 🌵 NEWS 前台 View 頁面後端功能製作。

NEWS View 頁面資料介紹 :

📌 新聞內容頁則比較單純，由新聞標題、新聞主要內容區、新聞組圖，這3個區塊組成。

NEWS View 頁面後端實作 :

1. 新增 news_view.aspx 參考之前的實作，將原始的 news_view.html 內容複製並整理進頁面。

2. 分別加入新聞內容及新聞組圖的 Literal 控制項

• 🌵 新聞標題用原本的 HTML 標籤即可，記得加上runat="server"這樣才抓得到。

3. 參考以下程式碼分別設定控制項數值及使用 SQL CTE 語法取出對應的新聞列表資料

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

private void loadNews()
{
    List<ImagePath> savePathList = new List<ImagePath>();
    string guidStr = Request.QueryString["id"];
    //如果沒有網址傳值就導回新聞列表頁
    if (String.IsNullOrEmpty(guidStr)) {
        Response.Redirect("~/Tayanahtml/new_list.aspx");
    }
    //依取得 guid 連線資料庫取得新聞資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT * FROM News WHERE guid = @guid";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@guid", guidStr.Trim());
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        //渲染新聞標題
        newsTitle.InnerText = reader["headline"].ToString();
        //渲染新聞主文
        newsContent.Text = HttpUtility.HtmlDecode(reader["newsContentHtml"].ToString());
        string loadJson = HttpUtility.HtmlDecode(reader["newsImageJson"].ToString());
        //反序列化 JSON 格式
        savePathList = JsonConvert.DeserializeObject<List<ImagePath>>(loadJson);
    }
    connection.Close();
    //渲染新聞組圖
    if (savePathList?.Count > 0) {
        string imgHtmlStr = "";
        foreach (var item in savePathList) {
            imgHtmlStr += $"<p><img alt='Image' src='upload/Images/{item.SavePath}' style='width: 700px;' /></p>";
        }
        groupImg.Text = HttpUtility.HtmlDecode(imgHtmlStr);
    }
}

//用來接收組圖 JSON 資料
public class ImagePath
{
    public string SavePath { get; set; }
}

• 🌵 新聞標題用 .InnerText 設定 HTML 標籤的文字內容。

• 🌵 組圖的 HTML 需加入寬度樣式，限制圖片尺寸，否則有些圖片會超出版面。

4. 模擬頁面後測試確認新聞內容資料，完成 ~

本日總結 :

📢 今天內容比較單純，可以當成複習之前的操作，比較有趣的部份是意外發現有 .InnerText 這個方法，使用起來很方便而且不會影響外觀樣式，感覺之後可以多多使用在不需送 HTML 標籤的地方。

• 明日將介紹 Home Page 後台製作相關細節。