=x= 🌵 DEALERS 前台頁面後端功能製作。
📌 製作時如圖片上的紅色大框及綠色大框，分別讀取資料庫裡的國家資料表跟代理商資料表，後端送資料到前台這次會直接以 Literal 控制項製作，可以注意到當點選國家列表時，網址傳值會將國家的 id 傳出，右邊的代理商則依 id 來對應資料庫的資料並更新畫面。
<head> 及 <body> 內的內容分別複製到 .aspx檔案中。//將 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>
🌵 刪除及修改後的結果如上圖。
🌵 圖片路徑有使用短網址才需要修改。
👺 有使用短網址功能要將頁面所有 .asp 連結前加上../Tayanahtml/ 來修改轉換。
🌵 單純文字替換可用 id="XX" 及 runat="server" 就可於後置程式碼取用替換文字。
🌵 多筆資料內容用 asp : Literal 控制項來替換內容。
🌵 這邊替換刪除的 code 可以先貼到記事本，後端送資料時會需要用到。
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
getCountryID(); //取得國家 id
loadLeftMenu();
loadDealerList();
}
}
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 屬性
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();
}
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/。
📢 這頁的作法算常見基礎頁面，資料是固定格式，對應基本的網址傳值，是很好的練習範本，屬於一定要會的內容，務必要弄懂。
iThome鐵人賽
看影片追技術