=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 後台制作相关细节。