=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 來進行開關顯示,可以隱藏畫面不必要的內容,確定新增或選擇到有新聞的日期時,再把細節內容秀出來,由於是以日曆區作為主要控制,所以多數渲染畫面增加的設定都與此區有關,思考時如果有抓到感覺其實很好控制,初次面對這種多的區塊間的交互可能不太習慣,可以參考之前各個功能文章先做完功能後,自行切換模擬畫面,感受哪些項目需要切換顯示及清除,會更能掌握內容的交互作動,當然調整後務必反覆於畫面中測試驗證有無顯示不合理的錯誤。