=x= 🌵 建立 News Manager - Content Page 後台页面 。
📌 今天的重点会放在所有之前实作过的功能组合及功能互动间如何修改,资料表内容请参考昨天的实作内容。
//宣告 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(); //读取-新闻下方组图
}
}
}
<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"/>
TextMode="MultiLine"
及限制字数MaxLength="325"
。
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;
}
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");
}
//上传按钮 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。
👀 单位换算参考 : 百万位元组
🌵 maxRequestLength 的单位是 KB。
👀 MaxRequestLength 官网参考 : HttpRuntimeSection.MaxRequestLength 属性
//渲染画面
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;
}
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>
与新闻内容组图功能共用。
//底部附加渲染画面
RadioButtonListImg.Items.Clear(); //清除新闻下方组图图片选项
loadThumbnail();
loadSummary();
loadNewsContent();
loadImageList();
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;
}
}
📢 今天实作内容重点在处理功能间开关显示,及清除选项的交互作动,练习使用日历区来驱动其他区块的显示,在其他区块的外侧 <div>
标签加上 ID 来进行开关显示,可以隐藏画面不必要的内容,确定新增或选择到有新闻的日期时,再把细节内容秀出来,由於是以日历区作为主要控制,所以多数渲染画面增加的设定都与此区有关,思考时如果有抓到感觉其实很好控制,初次面对这种多的区块间的交互可能不太习惯,可以参考之前各个功能文章先做完功能後,自行切换模拟画面,感受哪些项目需要切换显示及清除,会更能掌握内容的交互作动,当然调整後务必反覆於画面中测试验证有无显示不合理的错误。
<<: Day 16 撰写一个 dockerfile,和 vue-cli 服务进行整合开发
>>: Day 19 - C strings 字串,我好想吃串烧
这是 Roblox 从零开始系列,入门章节的第七个单元,今天你将学会如何去打造一个让人闻风丧胆的死亡...
在铁人赛正式开始之前,想先写一下SCSS。 因为我的CSS全部都是SCSS写的...怕大家看不懂马上...
之後玩完漏洞平台之後,就可以练在玩线上靶机罗~ 这次要推荐的是 Hack the Box:https...
TypeScript 能手养成之旅 Day 1 出发 前言 学习程序满一年了,转职成为工程师也有半年...
早上去经济部的中区服务中心处理一点事情,回程时,想顺便解决午餐,开启我的寿星优惠口袋List,首选就...