Day 10 - 将 DEALERS 後台储存资料提取後，送至前台渲染画面 - Literal 控制项应用 - ASP.NET Web Forms C#

=x= 🌵 DEALERS 前台页面後端功能制作。

DEALERS 页面资料介绍 :

📌 制作时如图片上的红色大框及绿色大框，分别读取资料库里的国家资料表跟代理商资料表，後端送资料到前台这次会直接以 Literal 控制项制作，可以注意到当点选国家列表时，网址传值会将国家的 id 传出，右边的代理商则依 id 来对应资料库的资料并更新画面。

DEALERS 页面後端实作 :

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

2. 删除与 VIEWSTATE 有关的程序码下 (之後制作页面也都要做删除)

//将 dealers.html 的 <form> 标签里面的设定移到 dealers.aspx 产生的 <form> 里
// .aspx 只能有一个 <form> 标签
<form name="aspnetForm" method="post" action="dealers.html" id="aspnetForm">
  <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
      value="/wEPDwULLTE5ODkzNzQ5MTUPFgIeBW9yZ0lEBQExFgJmD2QWAgIDD2QWAgIBD2QWCgIBDxYCHgtfIUl0ZW1Db3VudAIIFhACAQ9kFgJmDxUCEWRlYWxlcnMuYXNweD9pZD0xA1VTQWQCAg9kFgJmDxUCEmRlYWxlcnMuYXNweD9pZD0xNwRBU0lBZAIDD2QWAmYPFQISZGVhbGVycy5hc3B4P2lkPTM5BkVVUk9QRWQCBA9kFgJmDxUCEmRlYWxlcnMuYXNweD9pZD00MA1OT1JUSCBBTUVSSUNBZAIFD2QWAmYPFQISZGVhbGVycy5hc3B4P2lkPTQzD0NFTlRSQUwgQU1FUklDQWQCBg9kFgJmDxUCEmRlYWxlcnMuYXNweD9pZD00MQ1TT1VUSCBBTUVSSUNBZAIHD2QWAmYPFQISZGVhbGVycy5hc3B4P2lkPTQyBkFGUklDQWQCCA9kFgJmDxUCEmRlYWxlcnMuYXNweD9pZD00NAdPQ0VBTklBZAIDDxYCHgRUZXh0BQNVU0FkAgUPFgIfAgUDVVNBZAIHDxYCHwECAxYGAgEPZBYEAgEPDxYCHghJbWFnZVVybAUhdXBsb2FkL0ltYWdlcy9zMjAyMDAxMjAwMTA0MjguanBnZGQCAg8VCShGYWN0b3J5IFJlcHJlc2VudGF0aXZlIFRheWFuYSBZYWNodHMgVVNBKEZhY3RvcnkgUmVwcmVzZW50YXRpdmUgVGF5YW5hIFlhY2h0cyBVU0EOUGFtZWxhIEdpbmdyYXM5VGF5YW5hIE5XIExMQyAyNDQyIE5XIE1hcmtldCBTdCBQTUIgMjc0IFNlYXR0bGUsIFdBIDk4MTA3DDIwNi04NTItMjkyMBtFLU1haWw6IHBhbWVsYUB0YXlhbmFudy5jb20ABl9ibGFuawBkAgIPZBYEAgEPDxYCHwMFIXVwbG9hZC9JbWFnZXMvczIwMTIwNDAyMDMxOTEwLmpwZ2RkAgIPFQkNU2FuIEZyYW5jaXNjbxVQYWNpZmljIFlhY2h0IEltcG9ydHMRTXIuIE5laWwgV2VpbmJlcmc5R3JhbmQgTWFyaW5hIDIwNTEgR3JhbmQgU3RyZWV0IyAxMiBBbGFtZWRhLCBDQSA5NDUwMSwgVVNBDSg1MTApODY1LTI1NDEyRkFY77yaKDUxMCk4NjUtMjM2OQ0KRS1NYWlsOiB0YXlhbmFAbWluZHNwcmluZy5jb20ABl9ibGFuawBkAgMPZBYEAgEPDxYCHwMFIXVwbG9hZC9JbWFnZXMvczIwMTIwNDAyMDMxODAzLmpwZ2RkAgIPFQkJU2FuIERpZWdvFENhYnJpbGxvIFlhY2h0IHNhbGVzDU1yLiBEYW4gUGV0ZXIjNTA2MCBOLkhhcmJvciBEci5zYW4gRGllZ28sQ0EgOTIxMDYMODY2LTM1My0wNDA5PUZBWDooNjE5KTIwMC0xMDI0PGJyPg0KRS1NYWlsOmRhbnBldGVyQGNhYnJpbGxveWFjaHRzYWxlcy5jb20ABl9ibGFuawBkAgkPZBYCZg8WAh8CZWRkTTiFM3PryM7Daz+p9VeNr/3uvbs=" />
  </div>
  <div>
    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="15BF2523" />
  </div>
</form>

🌵 Web Forms 控制项资料不会消失是因为藏在 ViewState 里，但太多会影响传输。

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

🌵 删除及修改後的结果如上图。
🌵 图片路径有使用短网址才需要修改。
👺 有使用短网址功能要将页面所有 .asp 连结前加上../Tayanahtml/ 来修改转换。

4. 将左边选单、标题、连结、代理商区块，完成前端对接修改，参考如下

🌵 单纯文字替换可用 id="XX" 及 runat="server" 就可於後置程序码取用替换文字。
🌵 多笔资料内容用 asp : Literal 控制项来替换内容。
🌵 这边替换删除的 code 可以先贴到记事本，後端送资料时会需要用到。

5. 在後置程序码 Page_Load 事件加入以下方法

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        getCountryID(); //取得国家 id
        loadLeftMenu();
        loadDealerList();
    }
}

6. 建立取得国家ID的 getCountryID(); 方法

private void getCountryID()
{
    //取得网址传值的 id 内容
    string urlIDStr = Request.QueryString["id"];

    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    //如果是用短网址连入则用短网址 shortUrl 参数内容的国家名称来判断 ID
    if (Page.RouteData.Values.Count > 0) {
        //取得短网址参数内容的国家名称
        string urlCountryStr = Page.RouteData.Values["shortUrl"].ToString();
        string sqlID = "SELECT id FROM CountrySort WHERE countrySort = @urlCountryStr";
        SqlCommand commandID = new SqlCommand(sqlID, connection);
        commandID.Parameters.AddWithValue("@urlCountryStr", urlCountryStr);
        connection.Open();
        SqlDataReader readerID = commandID.ExecuteReader();
        if (readerID.Read()) {
            urlIDStr = readerID["id"].ToString();
        }
        connection.Close();
    }

    //如无网址传值则设为第一笔国家名称 id
    if (string.IsNullOrEmpty(urlIDStr)) {
        string sql = "SELECT TOP 1 id FROM CountrySort";
        SqlCommand command = new SqlCommand(sql, connection);
        connection.Open();
        SqlDataReader reader = command.ExecuteReader();
        if (reader.Read()) {
            urlIDStr = reader["id"].ToString();
        }
        connection.Close();
    }

    //将 id 存入 Session 使用
    Session["id"] = urlIDStr;
}

👀 取得短网址参数内容参考 : Page.RouteData 属性
👀 Session 使用参考 : HttpContext.Session 属性

7. 建立读取侧边栏 loadLeftMenu(); 方法

private void loadLeftMenu()
{
    //反覆变更字串的值建议用 StringBuilder 效能较好
    StringBuilder leftMenuHtml = new StringBuilder();

    //取得国家分类
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlCountry = "SELECT * FROM CountrySort";
    SqlCommand commandCountry = new SqlCommand(sqlCountry, connection);
    connection.Open();
    SqlDataReader readerCountry = commandCountry.ExecuteReader();
    while (readerCountry.Read()) {
        string idStr = readerCountry["id"].ToString();
        string countryStr = readerCountry["countrySort"].ToString();
        // StringBuilder 用 Append 加入字串内容
        leftMenuHtml.Append($"<li><a href='dealers.aspx?id={idStr}'> {countryStr} </a></li>");
    }
    connection.Close();

    //渲染画面
    LeftMenu.Text = leftMenuHtml.ToString();
}

👀 StringBuilder 使用参考 : 在 .NET 中使用 StringBuilder 类别

8. 建立读取主要内容 loadDealerList(); 方法

private void loadDealerList()
{
    //取得 Session 储存 id，Session 物件需转回字串
    string countryIDStr = Session["id"].ToString();

    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT countrySort FROM CountrySort WHERE id = @countryIDStr";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@countryIDStr", countryIDStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        string countryStr = reader["countrySort"].ToString();
        LabLink.InnerText = countryStr;
        LitTitle.InnerText = countryStr;
    }
    connection.Close();

    //依 country id 取得代理商资料
    StringBuilder dealerListHtml = new StringBuilder();
    string sqlArea = "SELECT * FROM Dealers WHERE country_ID = @countryIDStr";
    SqlCommand commandArea = new SqlCommand(sqlArea, connection);
    commandArea.Parameters.AddWithValue("@countryIDStr", countryIDStr);
    connection.Open();
    SqlDataReader readerArea = commandArea.ExecuteReader();
    while (readerArea.Read()) {
        string idStr = readerArea["id"].ToString();
        string areaStr = readerArea["area"].ToString();
        string imgPathStr = readerArea["dealerImgPath"].ToString();
        string nameStr = readerArea["name"].ToString();
        string contactStr = readerArea["contact"].ToString();
        string addressStr = readerArea["address"].ToString();
        string telStr = readerArea["tel"].ToString();
        string faxStr = readerArea["fax"].ToString();
        string emailStr = readerArea["email"].ToString();
        string linkStr = readerArea["link"].ToString();
        dealerListHtml.Append("<li><div class='list02'><ul><li class='list02li'><div>" +
    $"<p><img id='Image{idStr}' src='../Tayanahtml/upload/Images/{imgPathStr}' style='border-width:0px;' Width='209px' /> </p></div></li>" +
    $"<li class='list02li02'> <span>{areaStr}</span><br />");
        if (!string.IsNullOrEmpty(nameStr)) {
            dealerListHtml.Append($"{nameStr}<br />");
        }
        if (!string.IsNullOrEmpty(contactStr)) {
            dealerListHtml.Append($"Contact：{contactStr}<br />");
        }
        if (!string.IsNullOrEmpty(addressStr)) {
            dealerListHtml.Append($"Address：{addressStr}<br />");
        }
        if (!string.IsNullOrEmpty(telStr)) {
            dealerListHtml.Append($"TEL：{telStr}<br />");
        }
        if (!string.IsNullOrEmpty(faxStr)) {
            dealerListHtml.Append($"FAX：{faxStr}<br />");
        }
        if (!string.IsNullOrEmpty(emailStr)) {
            dealerListHtml.Append($"E-Mail：{emailStr}<br />");
        }
        if (!string.IsNullOrEmpty(linkStr)) {
            dealerListHtml.Append($"<a href='{linkStr}' target='_blank'>{linkStr}</a>");
        }
        dealerListHtml.Append("</li></ul></div></li>");
    }
    connection.Close();

    //渲染画面
    DealerList.Text = dealerListHtml.ToString();
}