iT邦幫忙

2021 iThome 鐵人賽

DAY 13
1
Modern Web

ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#系列 第 13

Day 13 - 依 COMPANY 前台頁面分析拆解後,逐步建立後台功能 - 文字編輯器及相簿應用 - ASP.NET Web Forms C#

=x= 🌵 建立 Company Manager - Content Page 後台頁面功能。


COMPANY 前台頁面分析 :

📌 原本專案規畫此頁應該是靜態網頁,其實不用針對此頁面做後台功能,但因為看到 Yachts 頁面跟 NEWS 頁面太難,不知道怎麼開始,而且部分功能可以在此頁先練習,因此就決定先拿這個頁面練習會用到的功能,也就是前兩天介紹的文字編輯器及相簿管理功能。

  • About Us 頁面內容,因為圖文為文繞圖的效果,無明確區隔。

https://ithelp.ithome.com.tw/upload/images/20210927/201394875lWJTt7Cxk.jpg

  • Certificat 頁面內容分為 : 文字區直式並排圖片區橫式並排圖片區,有明確區隔。

https://ithelp.ithome.com.tw/upload/images/20210927/20139487EgPXCKtTV7.jpg



Company Manager - Content Page 後台頁面功能介紹 :

  1. About Us 頁面 : 用 Day 10 提到的 WYSIWYG 文字編輯器。
  2. Certificat 頁面 - 文字區 : 用 TextBox 控制項。
  3. Certificat 頁面 - 直式並排圖片區 : 用 Day 11 提到的相簿管理方式。
  4. Certificat 頁面 - 橫式並排圖片區 : 用 Day 11 提到的相簿管理方式。

https://ithelp.ithome.com.tw/upload/images/20210927/20139487jH4zOpvTpK.jpg



Company Manager - Content Page 後台頁面實作 :

1. 建立 Company Manager 後台頁面用資料表如下

https://ithelp.ithome.com.tw/upload/images/20210927/20139487z85GhqCXHp.jpg

  • 👀 兩個圖片 JSON 資料欄預設值參考 Day 11 文章設為('[]')


2. 於 .aspx 頁面加入 CKEditorControl 相關控制項,用於 About Us 頁面,參考如下

<h6>Content :</h6>
<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" BasePath="/Scripts/ckeditor/"
    Toolbar="Bold|Italic|Underline|Strike|Subscript|Superscript|-|RemoveFormat
        NumberedList|BulletedList|-|Outdent|Indent|-|JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock|-|BidiLtr|BidiRtl
        /
        Styles|Format|Font|FontSize
        TextColor|BGColor
        Link|Image"
    Height="400px">
</CKEditor:CKEditorControl>
<asp:Label ID="UploadAboutUsLab" runat="server" Visible="False" ForeColor="#009933" class="d-flex justify-content-center"></asp:Label>
<asp:Button ID="UploadAboutUsBtn" runat="server" Text="Upload About Us Content" class="btn btn-outline-primary btn-block mt-3" OnClick="UploadAboutUsBtn_Click"/>
  • 👀 請確認上方有無自動引入 Register,參考 Day 10 文章內容。


3. 於 .aspx 頁面加入 TextBox 相關控制項,用於 Certificat 頁面 - 文字區,參考如下

<h6>Content Text :</h6>
<asp:TextBox ID="certificatTbox" runat="server" type="text" class="form-control" placeholder="Enter certificat text" TextMode="MultiLine" Height="200px"></asp:TextBox>
<asp:Label ID="uploadCertificatLab" runat="server" Visible="False" ForeColor="#009933" class="d-flex justify-content-center"></asp:Label>
<asp:Button ID="uploadCertificatBtn" runat="server" Text="Upload Certificat Text" class="btn btn-outline-primary btn-block mt-3" OnClick="uploadCertificatBtn_Click"/>


4. 於 .aspx 頁面加入 FileUpload 相關控制項,用於 Certificat 頁面 - 直式並排圖片區,參考如下

<h6>Upload Vertical Group Image :</h6>
<div class="input-group my-3">
    <asp:FileUpload ID="imageUploadV" runat="server" class="btn btn-outline-primary btn-block" AllowMultiple="True" />
    <asp:Button ID="UploadVBtn" runat="server" Text="Upload" class="btn btn-primary" OnClick="UploadVBtn_Click" />
</div>
<h6>Vertical Image List :</h6>
<asp:RadioButtonList ID="RadioButtonListV" runat="server" class="my-3 mx-auto" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonListV_SelectedIndexChanged" RepeatDirection="Horizontal" RepeatColumns="3" CellPadding="10"></asp:RadioButtonList>
<asp:Button ID="DelVImageBtn" runat="server" Text="Delete Image" type="button" class="btn btn-danger btn-sm" OnClientClick="return confirm('Are you sure you want to delete?')" Visible="False" OnClick="DelVImageBtn_Click" />
  • 👀 參考 Day 11 文章內容。


5. 同上,於 .aspx 頁面加入 FileUpload 相關控制項,用於 Certificat 頁面 - 橫式並排圖片區。


6. 於 .aspx.cs 後置程式碼的全域及 Page_Load 事件加入以下程式碼

//宣告全域 List<T> 可用 Add 依序添加資料
private List<ImageNameV> saveNameListV = new List<ImageNameV>();
private List<ImageNameH> saveNameListH = new List<ImageNameH>();

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        ckfinderSetPath();
        loadCkeditorContent();
        loadCertificatContent();
        loadImageVList();
        loadImageHList();
    }
}
  • 👀 ckfinderSetPath(); 方法內容請參考 Day 10 文章詳解。

  • 👀 loadImageVList(); 及 loadImageHList(); 方法內容請參考 Day 11 文章詳解。


7. 建立 loadCkeditorContent(); 方法邏輯程式碼如下

private void loadCkeditorContent()
{
    //取得 About Us 頁面 HTML 資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT aboutUsHtml FROM Company WHERE id = 1";
    SqlCommand command = new SqlCommand(sql, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
                //渲染畫面
        CKEditorControl1.Text = HttpUtility.HtmlDecode(reader["aboutUsHtml"].ToString());
    }
    connection.Close();
}


8. 建立 Upload About Us Content 事件邏輯程式碼如下

protected void UploadAboutUsBtn_Click(object sender, EventArgs e)
{
    //取得 CKEditorControl 的 HTML 內容
    string aboutUsHtmlStr = HttpUtility.HtmlEncode(CKEditorControl1.Text);
    //更新 About Us 頁面 HTML 資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "UPDATE Company SET aboutUsHtml = @aboutUsHtml WHERE id = 1";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@aboutUsHtml", aboutUsHtmlStr);
    connection.Open();
    command.ExecuteNonQuery();
    connection.Close();

    //渲染畫面提示
    DateTime nowtime = DateTime.Now;
    UploadAboutUsLab.Visible = true;
    UploadAboutUsLab.Text = "*Upload Success! - " + nowtime.ToString("G");
}
  • 👺 使用 .HtmlEncode() 來避免錯誤或惡意使用。


9. 建立 loadCertificatContent(); 方法邏輯程式碼如下

private void loadCertificatContent()
{
    //取得 Certificat 頁文字說明資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT certificatContent FROM Company WHERE id = 1";
    SqlCommand command = new SqlCommand(sql, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        //渲染畫面
        certificatTbox.Text = reader["certificatContent"].ToString();
    }
    connection.Close();
}


10. 建立 Upload About Us Content 事件邏輯程式碼如下

protected void uploadCertificatBtn_Click(object sender, EventArgs e)
{
    //更新 Certificat 頁文字說明資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "UPDATE Company SET certificatContent = @certificatContent WHERE id = 1";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@certificatContent", certificatTbox.Text);
    connection.Open();
    command.ExecuteNonQuery();
    connection.Close();

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


11. 參考 Day 11 建立 Certificat 頁面 - 直式並排圖片區 邏輯程式碼。


12. 參考 Day 11 建立 Certificat 頁面 - 橫式並排圖片區 邏輯程式碼。


13. 模擬並測試功能是否正常,完成~



本日總結 :

📢 由於前兩日已練習過此頁要做到的功能,所以今天實作上相對輕鬆,可以注意到文字編輯器輸入的資料在 HTML 編碼的轉換,因為資料庫不接受不安全的文字內容,要特別做轉換才可以存入,所以取出時也要轉回來才能用,另外新增上傳時提示文字會增加上傳時間,用來提醒使用者重覆編修時要記得上傳。

  • 明日將介紹製作 COMPANY - About Us 前台頁面後端相關細節。

上一篇
Day 12 - Using List<T> to Store JSON Format Path with ASP.NET Web Forms C# 用強類型物件清單儲存 JSON 格式的相簿圖片路徑
下一篇
Day 14 - 將 COMPANY 後台儲存資料提取後,送至 About Us 前台渲染畫面 - 文字編輯器資料渲染 - ASP.NET Web Forms C#
系列文
ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#30

尚未有邦友留言

立即登入留言