Day 16 - 依 NEWS 前台页面分析拆解後,逐步建立後台功能 (上) - Calendar 日历功能应用 - ASP.NET Web Forms C#

=x= 🌵 建立 News Manager - Content Page 後台页面 - 日历功能。


NEWS 前台页面分析 :

https://ithelp.ithome.com.tw/upload/images/20210930/20139487m9NFwBOt3n.jpg

📌 从 NEWS 页面点进页面後,会见到新闻的列表页,每个红框都是一则新闻,每则新闻都会有绿框的"新闻缩图"、橘框的"新闻发布日"、蓝框的"新闻标题"可点连结、紫框的新闻"内文简介",然後从新闻标题点进去後,可以见到完整的"新闻内容",新闻内容下方为"一连串的图片",然後仔细看网址内容,尾段的网址传值内容为"一组 GUID 随机码"用来识别是哪则新闻。

https://ithelp.ithome.com.tw/upload/images/20210930/20139487s5zVaR2E2p.jpg

  • 👀 GUID 维基百科介绍 : 全域唯一识别码

  • 👀 GUID 微软官网介绍 : Guid 结构

  • 🌵 微软官网介绍 : GUID 是128位整数 (16 个位元组) 可在需要唯一识别码的任何地方,在所有电脑和网路上使用。 这种识别码的机率很低。



News Manager 後台页面 - Calendar 日历功能应用介绍 :

🧠 後台 Calendar 日历功能应用内容如下 :

1. 选取日历日期做为新闻发布日期。

2. 当天日期为预设选取。(下图灰底为当天日期)

3. 有新闻内容的日期会有醒目标示。

4. 选取日期後可依日期加入新闻标题。(下图蓝底为选取日期)

5. 可勾选该则新闻是否有焦点提示。(为焦点新闻选取时会出现下图黄底的特别提示)

6. 删除新闻功能。

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



Calendar 日历功能应用实作 :

1. 建立新闻资料表,发布日期的资料类型设为 date,表示不含时间,方便使用

https://ithelp.ithome.com.tw/upload/images/20210930/20139487OYpWRquYFh.jpg

  • 🌵 勾选是否为焦点的栏位预设值设为((0)),代表不去勾选时就认定不是焦点新闻。


2. 在 .aspx 页配置 Calendar 控制项及相关配置参考如下

<h6>Date :</h6>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="190px" NextPrevFormat="FullMonth" Width="100%" OnSelectionChanged="Calendar1_SelectionChanged" OnDayRender="Calendar1_DayRender">
    <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
    <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" />
    <OtherMonthDayStyle ForeColor="#999999" />
    <SelectedDayStyle BackColor="#3399FF" ForeColor="White" Font-Bold="True" />
    <TitleStyle BackColor="White" BorderColor="#3399FF" BorderWidth="3px" Font-Bold="True" Font-Size="12pt" ForeColor="#3399FF" />
    <TodayDayStyle BackColor="#CCCCCC" />
</asp:Calendar>
<hr />
<h6>Headline : <asp:Label ID="LabIsTop" runat="server" Text="* Select item is top news !" ForeColor="Red" Visible="False" class="badge badge-pill badge-warning text-dark"></asp:Label></h6>
<asp:RadioButtonList ID="headlineRadioBtnList" runat="server" class="my-3" AutoPostBack="True" OnSelectedIndexChanged="headlineRadioBtnList_SelectedIndexChanged"></asp:RadioButtonList>
<asp:Button ID="deleteNewsBtn" runat="server" Text="Delete News" type="button" class="btn btn-danger btn-sm" OnClientClick="return confirm('Are you sure you want to delete?')" Visible="False" OnClick="deleteNewsBtn_Click" />
<hr />
<h6>Add Headline :</h6>
<asp:CheckBox ID="CBoxIsTop" runat="server" Text="Top Tag" Width="100%" />
<asp:TextBox ID="headlineTbox" runat="server" type="text" class="form-control" placeholder="Enter headline text" MaxLength="75"></asp:TextBox>
<asp:Button ID="AddHeadlineBtn" runat="server" Text="Add Headline" class="btn btn-outline-primary btn-block mt-3" OnClick="AddHeadlineBtn_Click"/>
  • 🌵 OnSelectionChanged 事件用於变更选取日期後读取对应内容。

  • 🌵 OnDayRender 事件用於标示有新闻的日期於日历上。


3. 在 .aspx.cs 後置程序码 Page_Load 事件加入以下程序码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        Calendar1.SelectedDate = Calendar1.TodaysDate; //预设选取当日日期
        loadDayNewsHeadline();
    }
}


4. 先做加入新闻标题 Add Headline 按钮的 OnClick 事件功能

protected void AddHeadlineBtn_Click(object sender, EventArgs e)
{
    //产生 GUID 随机码 + 时间2位秒数 (加强避免重复)
    DateTime nowTime = DateTime.Now;
    string nowSec = nowTime.ToString("ff");
    string guid = Guid.NewGuid().ToString().Trim()+ nowSec;
    //取得日历选取日期
    string selNewsDate = Calendar1.SelectedDate.ToString("yyyy-M-dd");
    //取得是否勾选
    string isTop = CBoxIsTop.Checked.ToString(); //得到 "True" or "False"
    //将资料存入资料库
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "INSERT INTO News (dateTitle, headline, guid, isTop) VALUES (@selNewsDate, @headline, @guid, @isTop)";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@selNewsDate", selNewsDate);
    command.Parameters.AddWithValue("@headline", headlineTbox.Text);
    command.Parameters.AddWithValue("@guid", guid);
    command.Parameters.AddWithValue("@isTop", isTop); //存入资料库会转为0或1
    connection.Open();
    command.ExecuteNonQuery();
    connection.Close();

    //渲染画面
    headlineRadioBtnList.Items.Clear();
    loadDayNewsHeadline();

    //清空输入栏位
    headlineTbox.Text = "";
}
  • 🌵 MSSQL 资料库的 bit 资料类型,在编辑时是显示 True / False,查询时是显示 0 / 1。


5. 建立 loadDayNewsHeadline(); 方法程序码如下

private void loadDayNewsHeadline()
{
    //依选取日期取得资料库新闻内容
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT * FROM News WHERE dateTitle = @dateTitle ORDER BY id ASC";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@dateTitle", Calendar1.SelectedDate.ToString("yyyy-M-dd"));
    connection.Open();
    SqlDataReader reader= command.ExecuteReader();
    while (reader.Read()) {
        string headlineStr = reader["headline"].ToString();
        string isTopStr = reader["isTop"].ToString();
        //渲染画面
        LabIsTop.Visible = false;
        if (isTopStr.Equals("True")) {
            LabIsTop.Visible = true;
        }
        ListItem listItem = new ListItem();
        listItem.Text = headlineStr;
        listItem.Value = headlineStr;
        headlineRadioBtnList.Items.Add(listItem);
    }
    connection.Close();

    //预设选取新增新闻项目
    int RadioBtnCount = headlineRadioBtnList.Items.Count;
    if (RadioBtnCount > 0) {
        headlineRadioBtnList.Items[RadioBtnCount - 1].Selected = true;
        deleteNewsBtn.Visible = true;
    }
}
  • 🌵 可以使用 .Count 计算同一天有几则新闻以及用 .Selected 来决定预设的选取项目。


6. 建立删除新闻 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 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();

    //渲染画面
    headlineRadioBtnList.Items.Clear();
    loadDayNewsHeadline();
}
  • 🌵 後续制作需加入删除列表页缩图图档及删除新闻内容组图等功能。


7. 建立新闻标题选取项目按钮选取改变时的 OnSelectedIndexChanged 事件功能

protected void headlineRadioBtnList_SelectedIndexChanged(object sender, EventArgs e)
{
    //依日期的新闻标题选取项目判断是不是焦点新闻
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT isTop FROM News WHERE dateTitle = @dateTitle AND headline = @headline";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@dateTitle", Calendar1.SelectedDate.ToString("yyyy-M-dd"));
    command.Parameters.AddWithValue("@headline", headlineRadioBtnList.SelectedValue);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        string isTopStr = reader["isTop"].ToString();
        //渲染画面
        LabIsTop.Visible = false;
        if (isTopStr.Equals("True")) {
            LabIsTop.Visible = true;
        }
    }
    connection.Close();
}


8. 建立日历日期选取改变时的 OnSelectionChanged 事件功能

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
    deleteNewsBtn.Visible = false;
    LabIsTop.Visible = false;
    headlineRadioBtnList.Items.Clear();
    loadDayNewsHeadline();
}


9. 建立日历日期渲染画面时的 OnDayRender 事件功能

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    //取得新闻日期
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = $"SELECT dateTitle FROM News";
    SqlCommand command = new SqlCommand(sql, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    while (reader.Read()) {
        //转换为 DateTime 型别
        DateTime newsTime = DateTime.Parse(reader["dateTitle"].ToString());
        //有新闻的日期 且 此日期不是选中的日期时 就修改日期外观
        if (e.Day.Date.Date == newsTime && e.Day.Date.Date != Calendar1.SelectedDate) {
            //渲染画面
            //e.Cell.BorderWidth = Unit.Pixel(1); //外框线粗细
            //e.Cell.BorderColor = Color.BlueViolet; //外框线颜色
            e.Cell.Font.Underline = true; //有无下地线
            e.Cell.Font.Bold = true; //是否为粗体
            e.Cell.ForeColor = Color.DodgerBlue; //外观色彩
        }
    }
    connection.Close();
}


本日总结 :

📢 今日的日历功能实作,务必理解画面元件间的互动,例如选取新闻标题时才会出现删除钮,切换日期时会先清掉标题项目再读入,这些在明日会因为新增的内容有所关联,而需要在今日实作内容的渲染画面区域,增加更多控制项目去切换画面内容,这些互动性间的理解,在明日实作其它功能做相关修改时,能更顺利的去做操作。

  • 明日将介绍制作 News Manager - Content Page 後台的相关细节。

<<:  电子书阅读器上的浏览器 [Day30] 导入 Koin

>>:  Day 15:Remove Duplicates from linked list

Day22 Vue 认识Porps(1)

在之前的铁人赛中我们知道了元件的实体状态、模板等作作用范围都应该要是独立的,意味这子元件是无法修改父...

30天学会 Python: Day 17-自动化的第一步

os 包含很多和作业系统有关的函式 档案相关 listdir(dir) 回传目录(资料夹) dir ...

Golang 转生到web世界 - 档案操作

Golang 档案操作 写web多少还是会遇到除了表单外,就是跟档案有关的行为了,这部分我自己都是习...

DAY 2 『 RGB调色盘 』Part1

RGB调色盘:view + slider * 3 + textfield * 3 成品: 首先创一个...

Kotlin Android 第1天,从 0 到 ML - 前言与目标

前言: 在2011年7月,JetBrains就推出Kotlin专案,但一直到2017年5月Googl...