Day 14 - 将 COMPANY 後台储存资料提取後,送至 About Us 前台渲染画面 - 文字编辑器资料渲染 - ASP.NET Web Forms C#

=x= 🌵 COMPANY - About Us 前台页面後端功能制作。


COMPANY 页面资料介绍 :

📌 在 COMPANY 页面的侧边栏,可以发现是独立对应 company.html 及 company1.html 页面,而我们在後台制作时也都把要用到的资料都准备好了,在这里只要把资料从资料库捞出来就好,资料区块分类如果忘记,可以直接参考昨天的拆解。

https://ithelp.ithome.com.tw/upload/images/20210928/20139487Acec1FyZT0.jpg


🧠 这个 About Us 页面的内容在後台是用 WYSIWYG Editor 存下来的内容是 HTML 编码,然後使用 HtmlEncode() 方法将特殊符号改成 字元实体参照 (character entity reference) 存起来,最後存在资料库的内容就会变成下面这样 :

https://ithelp.ithome.com.tw/upload/images/20210928/20139487TPpOGFtMeq.jpg



COMPANY 页面 - About Us 内容後端实作 :

1. 新增 company.aspx 将原始 company.html 的 <head><body> 内的内容分别复制到 .aspx档案中。


2. 删除与 VIEWSTATE 有关的程序码。


3. 使用取代功能将 .html 都取代为 .aspx。

  • 👀 以上操作可参考 Day 9 文章内容。


4. 从昨天的後台制作可以知道 About Us 内容因为是用 HTML 文字编辑器将内容用 HTML 语法存下来,所以我们直接用 Literal 控制项来接收就可以,参考如下

https://ithelp.ithome.com.tw/upload/images/20210928/20139487kWOiWyFWLC.jpg

  • 🌵 这边删除的 code 不用保留。


5. 後端 company.aspx.cs 的 Page_Load 事件加入以下方法

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        loadContent();
    }
}


6. 建立读取内容 loadContent(); 方法

private void loadContent()
{
    //从资料库取资料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlCountry = "SELECT TOP 1 aboutUsHtml FROM Company";
    SqlCommand command= new SqlCommand(sqlCountry, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        //渲染画面
        Literal1.Text = HttpUtility.HtmlDecode(reader["aboutUsHtml"].ToString());
    }
    connection.Close();
}


7. 模拟页面检查是否正确呈现,完成~



本日总结 :

📢 这页的内容因为有独立的 WYSIWYG Editor 内容,所以可以完整的练习到,如何一口气将後台存放的资料送出到前台画面,参考 Day 10 的文字编辑器後台制作方式,及对应今天的实作内容,可以完整知道 WYSIWYG Editor 的应用方式。

  • 明日将介绍制作 COMPANY - Certificat 前台页面後端相关细节。

<<:  Day 28 - Rancher Fleet Helm 应用程序部署

>>:  Day 16 留言是种互动!

[Day30] Pentesting CheatSheet Meow Meow

终於到了最後一天了,感觉这阵子打了好多好多的靶机哦,希望过去的这些文章可以对大家有一些帮助。非常感谢...

[Day16] Andoroid - Kotlin笔记:null type & none-null type

这边先预祝大家中秋节快乐 连假比较忙的关系今天就挑个简单的主题来写 kotlin对於null的处理相...

D2. 学习基础C、C++语言

D2: 基本语法 输入输出 输入: scanf 输出: printf 如果我今天想要输出一个数字35...

Day10 Sync.WaitGroup & Sync.Map

Sync.WaitGroup A WaitGroup waits for a collection ...

[Day26] 重设密码API – views

哈罗大家好,今天要做的是重设密码API,先附上我的程序码~~ 程序码 @csrf_protect d...