Day 17- 依 NEWS 前台頁面分析拆解後，逐步建立後台功能 (下) - 畫面內容互動 - ASP.NET Web Forms C#

13th鐵人賽 c# asp.net webforms

龜人

團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

2021-10-01 00:08:43

974 瀏覽

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

News Manager - Content Page 後台頁面介紹 :

📌 今天的重點會放在所有之前實作過的功能組合及功能互動間如何修改，資料表內容請參考昨天的實作內容。

後台頁面功能如下 :

1. 新聞發布日 + 新聞標題 (左上)

2. 新聞列表縮圖 + 新聞簡介 (右上)

3. 新聞上方主要內容 (左下)

4. 新聞下方組圖 (右下)

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)

🌵 maxRequestLength 的單位是 KB。
👀 MaxRequestLength 官網參考 : HttpRuntimeSection.MaxRequestLength 屬性

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;
    }
}

👀 修改後完整程式碼參考 : 專案 GitHub 連結

14. 模擬頁面並測試功能是否正常，完成後台功能 ~

本日總結 :

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