Day 17- 依 NEWS 前台页面分析拆解後,逐步建立後台功能 (下) - 画面内容互动 - ASP.NET Web Forms C#

=x= 🌵 建立 News Manager - Content Page 後台页面 。


News Manager - Content Page 後台页面介绍 :

📌 今天的重点会放在所有之前实作过的功能组合及功能互动间如何修改,资料表内容请参考昨天的实作内容。

後台页面功能如下 :

1. 新闻发布日 + 新闻标题 (左上)

2. 新闻列表缩图 + 新闻简介 (右上)

3. 新闻上方主要内容 (左下)

4. 新闻下方组图 (右下)

https://ithelp.ithome.com.tw/upload/images/20210930/201394877Y55lw4Hj7.jpg



News Manager - Content Page 後台页面实作 :

1. 参考 DEALERS 後台及 COMPANY 後台实作文章建立其它3个区块的功能设计版面。

  • 🌵 这3个区块的 Visible 都先设成 false 不显示。


2. 将 .aspx.cs 後置程序码 Page_Load 事件的程序码修改并加入各区块方法

//宣告 List 方便用 Add 依序添加资料
private List<ImagePath> savePathList = new List<ImagePath>();
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        ckfinderSetPath();
        Calendar1.SelectedDate = Calendar1.TodaysDate; //预设选取当日日期
        loadDayNewsHeadline(); //读取新闻标题
        //如果选取当日有新闻
        if (headlineRadioBtnList.Items.Count > 0) {
            CoverList.Visible = true; //显示右上区块: 新闻列表缩图 + 新闻简介
            NewsContent.Visible = true; //显示下半区块: 新闻上方主要内容 + 新闻下方组图
            loadThumbnail(); //读取-新闻列表缩图
            loadSummary(); //读取-新闻简介
            loadNewsContent(); //读取-新闻上方主要内容
            loadImageList(); //读取-新闻下方组图
        }
    }
}


3. 参考 DEALERS 後台实作文章,以新闻日期及新闻标题为 SQL 查询条件建立 loadThumbnail(); 及 Upload 上传按钮点击事件内容。


4. 於 .aspx 页面加入新闻简介版面控制项内容如下

<h6>Summary :</h6>
<asp:TextBox ID="summaryTbox" runat="server" type="text" class="form-control" placeholder="Enter summary text" TextMode="MultiLine" Height="170px" MaxLength="325"></asp:TextBox>
<asp:Label ID="LabUploadSummary" runat="server" Text="*Upload Success!" ForeColor="green" class="d-flex justify-content-center" Visible="False"></asp:Label>
<asp:Button ID="uploadSummaryBtn" runat="server" Text="Upload Summary" class="btn btn-outline-primary btn-block mt-3" OnClick="UploadSummaryBtn_Click"/>
  • 🌵 TextBox 控制项属性加入多行TextMode="MultiLine"及限制字数MaxLength="325"


5. 於 .aspx.cs 页面建立 loadSummary(); 方法程序码如下

private void loadSummary()
{
    //取得新闻标题
    string selHeadlineStr = headlineRadioBtnList.SelectedValue;
    //取得新闻日期
    string selNewsDate = Calendar1.SelectedDate.ToString("yyyy-M-dd");
    //取得新闻简介内容
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT summary FROM News WHERE dateTitle = @selNewsDate AND headline = @selHeadlineStr";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@selNewsDate", selNewsDate);
    command.Parameters.AddWithValue("@selHeadlineStr", selHeadlineStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        summaryTbox.Text = reader["summary"].ToString();
    }
    else {
        summaryTbox.Text = "";
    }
    connection.Close();
    //渲染画面
    LabUploadSummary.Visible = false;
}
  • 🌵 渲染画面功能为关闭上传成功标签,新闻缩图及新闻上方主要内容也要加入这行。


6. 於 .aspx.cs 页面建立 Upload Summary 按钮的 OnClick 事件功能

protected void UploadSummaryBtn_Click(object sender, EventArgs e)
{
    string selHeadlineStr = headlineRadioBtnList.SelectedValue;
    string selNewsDate = Calendar1.SelectedDate.ToString("yyyy-M-dd");
    //更新新闻简介内容
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "UPDATE News SET summary = @summary WHERE dateTitle = @selNewsDate AND headline = @selHeadlineStr";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@summary", summaryTbox.Text);
    command.Parameters.AddWithValue("@selNewsDate", selNewsDate);
    command.Parameters.AddWithValue("@selHeadlineStr", selHeadlineStr);
    connection.Open();
    command.ExecuteNonQuery();
    connection.Close();

    //渲染画面
    DateTime nowtime = DateTime.Now;
    LabUploadSummary.Visible = true;
    LabUploadSummary.Text = "*Upload Success! - " + nowtime.ToString("G");
}


7. 参考 COMPANY 後台实作文章,以新闻日期及新闻标题为 SQL 查询条件建立 loadNewsContent(); 方法及 Upload 上传按钮点击事件内容。


8. 参考 COMPANY 後台实作文章,以新闻日期及新闻标题为 SQL 查询条件建立 loadImageList(); 方法,并修改上传按钮 OnClick 事件限制一次上传大小参考如下

//上传按钮 OnClick 事件修改,加入判断上传一次选取的图片容量总和是否超过10M
protected void UploadImgBtn_Click(object sender, EventArgs e)
{
    if (imageUpload.HasFile) {
        //取得上传档案大小 (限制 10MB)
        int fileSize = imageUpload.PostedFile.ContentLength; //Byte
        if (fileSize < 1024 * 1000 * 10) {
        //这里省略原始程序码,细节参考相簿功能文章
        }
        else {
            Response.Write("<script>alert('*The maximum upload size is 10MB!');</script>");
        }
    }
}
  • 🌵 路径请记得改成 "~/Tayanahtml/upload/Images/"

  • 🌵 1024 Byte = 1 KB,1 KB * 1000 = 1000 KB = 1 MB,1 MB * 10 = 10 MB。

  • 👀 单位换算参考 : 百万位元组


9. 修改 Web.config 调高上传上限如下 (预设只有 4 MB)

https://ithelp.ithome.com.tw/upload/images/20210930/201394879QMQlUm2i0.jpg


10. 日历区的新闻标题 Add Headline 按钮的 OnClick 事件功能下方的渲染画面加入修改如下

//渲染画面
deleteNewsBtn.Visible = false; //隐藏:日历区删除新闻标题按钮
DelImageBtn.Visible = false; //隐藏:新闻下方组图删除图片按钮
CBoxIsTop.Checked = false; //将焦点新闻选项设为不勾选
headlineRadioBtnList.Items.Clear(); //清空日历区的新闻标题选项
RadioButtonListImg.Items.Clear(); //清空新闻下方组图的图片选项
loadDayNewsHeadline(); //读取新闻标题
//如果选取当日有新闻,显示其它3个区块并载入内容
if (headlineRadioBtnList.Items.Count > 0) {
    CoverList.Visible = true;
    NewsContent.Visible = true;
    loadThumbnail();
    loadSummary();
    loadNewsContent();
    loadImageList();
}
else {
    //选取当日无新闻,隐藏其它3个区块,只留日历区
    CoverList.Visible = false;
    NewsContent.Visible = false;
}


11. 日历区的删除新闻 Delete News 按钮的 OnClick 事件加入修改如下

protected void deleteNewsBtn_Click(object sender, EventArgs e)
{
    //隐藏删除钮
    deleteNewsBtn.Visible = false;
    //取得选取项目内容
    string selHeadlineStr = headlineRadioBtnList.SelectedValue;
    //取得日历选取日期
    string selNewsDate = Calendar1.SelectedDate.ToString("yyyy-M-dd");
    //连线资料库
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);

    //删除图档(缩图)
    string savePath = Server.MapPath("~/Tayanahtml/upload/Images/");
    string sql = "SELECT thumbnailPath FROM News WHERE dateTitle = @selNewsDate AND headline = @selHeadlineStr";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@selNewsDate", selNewsDate);
    command.Parameters.AddWithValue("@selHeadlineStr", selHeadlineStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        string thumbnailPath = reader["thumbnailPath"].ToString();
        if (!String.IsNullOrEmpty(thumbnailPath)) {
            File.Delete(savePath + thumbnailPath);
        }
    }
    connection.Close();

    //删除图档(组图)
    string sql2 = "SELECT newsImageJson FROM News WHERE dateTitle = @selNewsDate AND headline = @selHeadlineStr";
    SqlCommand command2 = new SqlCommand(sql2, connection);
    command2.Parameters.AddWithValue("@selNewsDate", selNewsDate);
    command2.Parameters.AddWithValue("@selHeadlineStr", selHeadlineStr);
    connection.Open();
    SqlDataReader reader2 = command2.ExecuteReader();
    if (reader2.Read()) {
        string loadJson = HttpUtility.HtmlDecode(reader2["newsImageJson"].ToString());
        //反序列化JSON格式
        savePathList = JsonConvert.DeserializeObject<List<ImagePath>>(loadJson);
    }
    connection.Close();
    if (savePathList?.Count > 0) {
        foreach (var item in savePathList) {
            File.Delete(savePath + item.SavePath);
        }
    }

    //删除资料库该笔资料
    string sqlDel = "DELETE FROM News WHERE dateTitle = @selNewsDate AND headline = @selHeadlineStr";
    SqlCommand commandDel = new SqlCommand(sqlDel, connection);
    commandDel.Parameters.AddWithValue("@selNewsDate", selNewsDate);
    commandDel.Parameters.AddWithValue("@selHeadlineStr", selHeadlineStr);
    connection.Open();
    commandDel.ExecuteNonQuery();
    connection.Close();

    //渲染画面
    deleteNewsBtn.Visible = false;
    DelImageBtn.Visible = false;
    CBoxIsTop.Checked = false;
    headlineRadioBtnList.Items.Clear();
    RadioButtonListImg.Items.Clear();
    loadDayNewsHeadline();
    if (headlineRadioBtnList.Items.Count > 0) {
        CoverList.Visible = true;
        NewsContent.Visible = true;
        loadThumbnail();
        loadSummary();
        loadNewsContent();
        loadImageList();
    }
    else {
        CoverList.Visible = false;
        NewsContent.Visible = false;
    }
}
  • 🌵 集合 List<ImagePath> 与新闻内容组图功能共用。


12. 於新闻标题选取项目按钮选取改变时的 OnSelectedIndexChanged 事件功能底部加入

//底部附加渲染画面
RadioButtonListImg.Items.Clear(); //清除新闻下方组图图片选项
loadThumbnail();
loadSummary();
loadNewsContent();
loadImageList();


13. 加入修改日历日期选取改变时的 OnSelectionChanged 事件功能

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
    //渲染画面
    deleteNewsBtn.Visible = false;
    DelImageBtn.Visible = false;
    LabIsTop.Visible = false;
    headlineRadioBtnList.Items.Clear();
    RadioButtonListImg.Items.Clear();
    loadDayNewsHeadline();
    //日期有新闻才显示其它区块
    if (headlineRadioBtnList.Items.Count > 0) {
        CoverList.Visible = true;
        NewsContent.Visible = true;
        loadThumbnail();
        loadSummary();
        loadNewsContent();
        loadImageList();
    }
    else {
        CoverList.Visible = false;
        NewsContent.Visible = false;
    }
}


14. 模拟页面并测试功能是否正常,完成後台功能 ~



本日总结 :

📢 今天实作内容重点在处理功能间开关显示,及清除选项的交互作动,练习使用日历区来驱动其他区块的显示,在其他区块的外侧 <div> 标签加上 ID 来进行开关显示,可以隐藏画面不必要的内容,确定新增或选择到有新闻的日期时,再把细节内容秀出来,由於是以日历区作为主要控制,所以多数渲染画面增加的设定都与此区有关,思考时如果有抓到感觉其实很好控制,初次面对这种多的区块间的交互可能不太习惯,可以参考之前各个功能文章先做完功能後,自行切换模拟画面,感受哪些项目需要切换显示及清除,会更能掌握内容的交互作动,当然调整後务必反覆於画面中测试验证有无显示不合理的错误。

  • 明日将介绍制作 Pagination 分页功能的相关细节。

<<:  Day 16 撰写一个 dockerfile,和 vue-cli 服务进行整合开发

>>:  Day 19 - C strings 字串,我好想吃串烧

从零开始学 3D 游戏设计:入门程序实作 Part.1 死亡岩浆

这是 Roblox 从零开始系列,入门章节的第七个单元,今天你将学会如何去打造一个让人闻风丧胆的死亡...

#0 - SCSS 不负责任快速入门

在铁人赛正式开始之前,想先写一下SCSS。 因为我的CSS全部都是SCSS写的...怕大家看不懂马上...

[Day27]快快乐乐一起打靶机

之後玩完漏洞平台之後,就可以练在玩线上靶机罗~ 这次要推荐的是 Hack the Box:https...

TypeScript 能手养成之旅 Day 1 出发

TypeScript 能手养成之旅 Day 1 出发 前言 学习程序满一年了,转职成为工程师也有半年...

[生日优惠-3] 汉来海港餐厅Buffet #当日寿星6折

早上去经济部的中区服务中心处理一点事情,回程时,想顺便解决午餐,开启我的寿星优惠口袋List,首选就...