iT邦幫忙

2021 iThome 鐵人賽

DAY 10
1
Modern Web

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

Day 10 - 將 DEALERS 後台儲存資料提取後,送至前台渲染畫面 - Literal 控制項應用 - ASP.NET Web Forms C#

=x= 🌵 DEALERS 前台頁面後端功能製作。


DEALERS 頁面資料介紹 :

https://ithelp.ithome.com.tw/upload/images/20210924/20139487fWlJVT9bYW.jpg

📌 製作時如圖片上的紅色大框及綠色大框,分別讀取資料庫裡的國家資料表代理商資料表,後端送資料到前台這次會直接以 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

https://ithelp.ithome.com.tw/upload/images/20210924/20139487ItQYS5853H.jpg

  • 🌵 刪除及修改後的結果如上圖。

  • 🌵 圖片路徑有使用短網址才需要修改。

  • 👺 有使用短網址功能要將頁面所有 .asp 連結前加上../Tayanahtml/ 來修改轉換。


4. 將左邊選單、標題、連結、代理商區塊,完成前端對接修改,參考如下

https://ithelp.ithome.com.tw/upload/images/20210924/20139487Aj2B4yQxVg.jpg

  • 🌵 單純文字替換可用 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;
}


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


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();
}
  • 🌵 利用原本 .html 的 code 去改寫填入修改。

  • 👺 有使用短網址功能要將圖片連結前加上../Tayanahtml/


9. 執行模擬網頁檢查有無跑版或樣式錯誤,完成~



本日總結 :

📢 這頁的作法算常見基礎頁面,資料是固定格式,對應基本的網址傳值,是很好的練習範本,屬於一定要會的內容,務必要弄懂。

  • 明日將介紹如何使用 WYSIWYG 文字編輯器。

上一篇
Day 9 - 依 DEALERS 前台頁面分析拆解後,逐步建立後台功能 (下) - 圖檔同名處理 - ASP.NET Web Forms C#
下一篇
Day 11 - Using CKEditor + CKFinder WYSIWYG Editor with ASP.NET Web Forms C# 在網頁嵌入 WYSIWYG 文字編輯器
系列文
ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#30

尚未有邦友留言

立即登入留言