Day 22 - 将 Yacht Manager 後台储存资料提取後，送至前台渲染首页 Home 页面 (上) - 轮播图区 - ASP.NET Web Forms C#
=x= 🌵 Home 前台页面 - 轮播图後端功能制作。
Home 页面 - 轮播图资料介绍 :
📌 Home 页面 - 游艇型号轮播图内容 :
1. 每个游艇型号只会出现一张图。
2. 右下角的游艇型号文字会配合更换。
3. 左上角的特殊标注图片标签会配合显示加注。
Home 轮播图内容後端实作 :
1. 新增 index.aspx 将原始 index.html 的<head>及<body>内的内容分别复制到 .aspx 档案中。
2. 删除与 VIEWSTATE 有关的程序码。
3. 使用取代功能将 .html 都取代为 .aspx。
- 👀 以上操作可参考 Day 9 文章内容。
4. 游艇型号轮播图使用 Literal 控制项来送图片内容，细节参考如下 :
- 紫色底线 : 由於此区块版面有点没对齐，增加样式调整对齐。
- 红色区块 : 为主要轮播图接收区块。
-
蓝色区块 : 为相簿功能插件的缩图区，外层
<div>原始设定为不显示。
- 👺 不显示但插件轮播数量的计算是依此区计算，直接放入与红色区块相同内容。
5. 後端 index.aspx.cs 的 Page_Load 事件加入 loadBanner(); 方法
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
loadBanner();
}
}
6. 建立读取轮播图内容 loadBanner(); 方法
private void loadBanner()
{
//用 List<T> 接收 Json 格式图片资料
List<ImagePath> savePathList = new List<ImagePath>();
//连线资料库取出图片资料
SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
string sqlLoad = "SELECT * FROM Yachts ORDER BY id DESC";
SqlCommand command = new SqlCommand(sqlLoad, connection);
connection.Open();
SqlDataReader reader = command.ExecuteReader();
StringBuilder bannerHtml = new StringBuilder();
while (reader.Read()) {
string loadJson = HttpUtility.HtmlDecode(reader["bannerImgPathJSON"].ToString());
savePathList = JsonConvert.DeserializeObject<List<ImagePath>>(loadJson);
//每个型号只取出第一张图
string imgNameStr = "";
if (savePathList?.Count > 0) {
// 指定选取 List<T> 第一笔资料
imgNameStr = savePathList[0].SavePath;
}
//游艇型号字串用空格切割区分文字及数字
string[] modelArr = reader["yachtModel"].ToString().Split(' ');
//依新设计或新建造来切换显示标签
string isNewDesignStr = reader["isNewDesign"].ToString();
string isNewBuildingStr = reader["isNewBuilding"].ToString();
string newTagStr = ""; //标签档名用
// value 预设为 0 不显示标签
string displayNewStr = "0";
//判断是否显示对应标签
if (isNewDesignStr.Equals("True")) {
displayNewStr = "1";
newTagStr = "images/new02.png";
}
else if (isNewBuildingStr.Equals("True")) {
displayNewStr = "1";
newTagStr = "images/new01.png";
}
//加入游艇型号轮播图 HTML
bannerHtml.Append($"<li class='info' style='border-radius: 5px;height: 424px;width: 978px;'><a href='' target='_blank'><img src='upload/Images/{imgNameStr}' style='width: 978px;height: 424px;border-radius: 5px;'/></a><div class='wordtitle'>{modelArr[0]} <span>{modelArr[1]}</span><br /><p>SPECIFICATION SHEET</p></div><div class='new' style='display: none;overflow: hidden;border-radius:10px;'><img src='{newTagStr}' alt='new' /></div><input type='hidden' value='{displayNewStr}' /></li>");
}
connection.Close();
//渲染画面
LitBanner.Text = bannerHtml.ToString();
LitBannerNum.Text = bannerHtml.ToString(); //不显示但影响轮播图片数量计算
}
//轮播图 JSON 资料
public class ImagePath
{
public string SavePath { get; set; }
}
- 🌵 用
savePathList[0].SavePath指定选取List<T>第一笔资料。
7. 模拟页面检查是否正确呈现，完成~
本日总结 :
📢 今天的内容最容易卡住的地方就是要看懂轮播图的运作逻辑，需要特别去看放在 <head> 里的 JavaScript 来推测，在制作时最容易鬼打墙的地方，就是明明设定为不显示的轮播图缩图，却是用来计算轮播图片总数的内容，如果一开始就把这个区块删掉，就会一直卡在为何都有显示画面，後端取资料也都有取到，但轮播图不会动；或是没有删除缩图区块，就会发现轮播图会动，但轮播的图片永远只有5张，回头去看 JavaScript 的控制轮播区块的程序码，就会发现判断次数是用缩图区块的 '.title ul li.on' ，可以知道是用 <li> 标签有几组来决定轮播的次数。
- 明日将介绍制作 Home Page - 新闻图卡後端的相关细节。
>>: 21. 闲聊 x 网页浏览快捷键(Windows/Linux)
Day 24:让iOS也吃到SQL Delight
Keyword:SQLDelight，Native Driver 到24日，在iOS上呈现DB资料 ...
Day 28 网路身分认证-Cognito
今天我们来谈谈网路的身分认证-Cognito 1. Cognito应用价值 现在的生活环境，不管是网...
DAY 19 - 九尾狐妹妹 (3) 完稿
大家好~ 我是五岁~ 今天来把九尾狐妹妹完成吧~~!! (ﾟ∀ﾟ) 九尾狐应该类似狐狸，所以主色使用...
Re: 新手让网页 act 起来: Day15 - 探索 useState (1)
前言 经过前面几篇基础介绍，应该对 useState 与 useEffect 有一定程度的认识，俗话...
Mac机必备--超实用软件推荐
当你第一次购买 Mac 时，除了学习和适应使用之外，你还探索了击键技巧。 这时候，你需要用好软件才有...