=x= 🌵 Home 前台页面 - 新闻图卡後端功能制作。

Home 页面资料介绍 :

📌 Home 页面新闻图卡内容 :

1. 依客户发文频率来决定取得时间范围内 3 则最新新闻。

2. TOP 新闻的排序会最优先。

3. 依 TOP 新闻加入标签。

Home 新闻图卡内容後端实作 :

1. 新闻图卡使用 asp 控制项来送内容，细节参考如下 :

a. 红色区块 : 使用 Image 控制项，来控制 TOP 标签切换显示。

b. 绿色区块 : 使用 Literal 控制项，来送新闻缩图 HTML 内容。

• 👺 如果直接使用 Image 控制项，客户上传图片名称如果有中文 .ImageUrl 会将中文转码导致无法正确取得图片位置。

c. 蓝色区块 : 使用 Label 控制项，来送新闻日期标题文字内容。

d. 紫色区块 : 使用 HyperLink 控制项，来送新闻简介文字内容及超连接网址。

• 🌵 记得分别设定 3 组新闻图卡共 12 个控制项。

2. 後端 index.aspx.cs 的 Page_Load 事件加入 loadNews(); 方法

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

3. 建立读取新闻图卡内容 loadNews(); 方法

private void loadNews()
{
    //设定首页 3 笔新闻的时间范围
    DateTime nowTime = DateTime.Now;
    string nowDate = nowTime.ToString("yyyy-MM-dd");
    int startDate = -1;
    DateTime limitTime = nowTime.AddMonths(startDate);
    string limitDate = limitTime.ToString("yyyy-MM-dd");

    //计算设定的时间范围内新闻数量
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT COUNT(id) FROM News WHERE dateTitle >= @limitDate AND dateTitle <= @nowDate";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@nowDate", nowDate);
    command.Parameters.AddWithValue("@limitDate", limitDate);
    connection.Open();
    //用 ExecuteScalar() 来算数量
    int newsNum = Convert.ToInt32(command.ExecuteScalar());
    //时间范围设定持续往前 1 个月，直到取出新闻数量超过 3 笔
    while (newsNum < 3) {
        startDate--;
        limitTime = nowTime.AddDays(startDate);
        limitDate = limitTime.ToString("yyyy-MM-dd");
        SqlCommand command2 = new SqlCommand(sql, connection);
        command2.Parameters.AddWithValue("@nowDate", nowDate);
        command2.Parameters.AddWithValue("@limitDate", limitDate);
        newsNum = Convert.ToInt32(command2.ExecuteScalar());
    }
    connection.Close();

    //取出时间范围内首 3 笔新闻，且 TOP 会放在取出项的最前面
    connection.Open();
    string sql2 = "SELECT TOP 3 * FROM News WHERE dateTitle >= @limitDate AND dateTitle <= @nowDate ORDER BY isTop DESC, dateTitle DESC";
    SqlCommand command3 = new SqlCommand(sql2, connection);
    command3.Parameters.AddWithValue("@nowDate", nowDate);
    command3.Parameters.AddWithValue("@limitDate", limitDate);
    SqlDataReader reader = command3.ExecuteReader();
    int count = 1; //第几笔新闻
    while (reader.Read()) {
        string isTopStr = reader["isTop"].ToString();
        string guidStr = reader["guid"].ToString();
        if (count == 1) {
            //渲染第1笔新闻图卡
            string newsImg = reader["thumbnailPath"].ToString();
            LiteralNewsImg1.Text = $"<img id='thumbnail_Image1' src='upload/Images/{newsImg}' style='border-width: 0px;' />";
            DateTime dateTimeTitle = DateTime.Parse(reader["dateTitle"].ToString());
            LabNewsDate1.Text = dateTimeTitle.ToString("yyyy/M/d");
            HLinkNews1.Text = reader["headline"].ToString();
            HLinkNews1.NavigateUrl = $"new_view.aspx?id={guidStr}";
            if (isTopStr.Equals("True")) {
                ImgIsTop1.Visible = true;
            }
        }
        else if (count == 2) {
            //渲染第2笔新闻图卡
            string newsImg = reader["thumbnailPath"].ToString();
            LiteralNewsImg2.Text = $"<img id='thumbnail_Image2' src='upload/Images/{newsImg}' style='border-width: 0px;' />";
            DateTime dateTimeTitle = DateTime.Parse(reader["dateTitle"].ToString());
            LabNewsDate2.Text = dateTimeTitle.ToString("yyyy/M/d");
            HLinkNews2.Text = reader["headline"].ToString();
            HLinkNews2.NavigateUrl = $"new_view.aspx?id={guidStr}";
            if (isTopStr.Equals("True")) {
                ImgIsTop2.Visible = true;
            }
        }
        else if (count == 3) {
            //渲染第3笔新闻图卡
            string newsImg = reader["thumbnailPath"].ToString();
            LiteralNewsImg3.Text = $"<img id='thumbnail_Image3' src='upload/Images/{newsImg}' style='border-width: 0px;' />";
            DateTime dateTimeTitle = DateTime.Parse(reader["dateTitle"].ToString());
            LabNewsDate3.Text = dateTimeTitle.ToString("yyyy/M/d");
            HLinkNews3.Text = reader["headline"].ToString();
            HLinkNews3.NavigateUrl = $"new_view.aspx?id={guidStr}";
            if (isTopStr.Equals("True")) {
                ImgIsTop3.Visible = true;
            }
        }
        else break; //超过3笔後停止
        count++;
    }
    connection.Close();
}

• 🌵 记得取到 3 组新闻图卡资料後就可以用 break 停止回圈。

4. 模拟页面检查是否正确呈现，完成~

本日总结 :

📢 一开始写的时候没有限制时间范围，这样会因为 Top 会排前面，导致最前面的 3 篇新闻会出现很旧但却标注为 TOP 的新闻，後来就把时间起始范围加入，这样可以调整取出的新闻日期范围，但这样有可能会出现时间范围内不足 3 笔新闻状况，因此写回圈自动减去天数来计算新闻数量，考量使用网页实际使用情形，往前的指标设定为月，只要取出的新闻不足，就会把时间范围往前调 1 个月，直到取出的新闻有满足 3 笔以上。

• 明日将介绍制作 Overview Manager 後台功能相关细节。