【Side Project】 菜单内容3-画面资料绑定
上一篇我们已经能够从我们资料库上抓出我们建立的菜单了，
这篇会跟大家一起把我们抓出来的画面显示在网页上。
载入 JQuery
甚麽是JQuery? 想必有写过网页的都知道JavaScript，
这套语言虽然非常的强大，但是语法写起来十分的复杂。
而JQuery就是帮我解决这个问题的一个套件，
其中最大的好处就是JQuery的选择器(selector)，
帮我大大降低写一拖拉库的语句只为了找到一个element。
除此之外，使用JQuery还有另外一个最大的原因就是...
专案建置的时候就帮我载入好了。
虽然专案已经载入好了，不过我们还是有一些地方需要修改一下。
- 开启专案中的
_MainLayout.cshtml - 找到最下方的
<script src="~/lib/jquery/dist/jquery.min.js"></script>
- 将这行 script 移动到最前面 (
<body>里面的第一列)
(为了方便将所有的script一同移到最上面了)
因为将jquery的载入放在最後，之後再使用的时候会找不到，所以将他提前到最前面就先载入。
新增菜色
为了之後开发的弹性，我们先写一个新增菜色的方法。
让我们之後要加入我们资料库中的菜色时，只需要呼叫这个方法即可。
- 开启
Customer.cshtml - 我们在
tbody的地方给他一个id
<tbody id="menu_body">
我们等一下在呼叫的时候比较方便
3. 撰写script语法
程序码:
<script>
function addItemRow(uid,item,price) {
var data = `
<tr id=`+ uid +`>
<td> `+ item +`</td>
<td>`+ price +`</td>
<td><input type="text"></td>
</tr>
`
$('#menu_body').append(data);
}
//这是测试用的资料
addItemRow('6', '超丰富炒饭', '190');
</script>
当之後呼叫addItemRow()的时候会根据我们传进来的参数新增一笔资料。
3. 测试一下我们写的function()是否可以正常执行
4. 确定测试没问题後，删除测试资料。
串接资料库资料(ViewData)
安装Newtonsoft.Json
为了避免遇到太多资料型态的问题，很多时候我们都会对资料做序列or反序列。
这样我们往後对前後台的资料处理就只需要对json处理就好。
(这篇所使用的序列化方式都是指json)
- 打开NuGet
- 安装Newtonsoft.Json
对资料进行序列化
- 打开
HomeController.cs - 在
Customer()里面加入
程序码
string jsonData = JsonConvert.SerializeObject(list);
- 将资料透过 ViewBag传入到前端
Customer()完整程序码
public IActionResult Customer()
{
//连线设定
SqlSugarClient db = new SqlSugarClient(new ConnectionConfig()
{
//连线字串
ConnectionString = "Server=.\\SQLEXPRESS;Initial Catalog=WebMenu;user id=webmenu;password=00000;Integrated Security=False",
DbType = DbType.SqlServer,//连线类型
IsAutoCloseConnection = true //自动关闭连线
});
//当执行时，触发事件
db.Aop.OnLogExecuting = (sql, pars) =>
{
Console.WriteLine(sql);//查看SQL语法
};
var list = db.Queryable<Menu>().ToList();
foreach(var menu in list){
menu.Item = menu.Item.Trim();
Console.WriteLine(menu.Item);
}
string jsonData = JsonConvert.SerializeObject(list);
Console.WriteLine(jsonData);
ViewBag.menuData = jsonData;
return View();
}
前端接收资料
因为.net Core有太多版本，有些语法弃用得太快了，
所以我们采用把资料藏在隐藏的element里面的方式，来接收资料。
- 随便建立个element 然後给他隐藏属性
- 将刚刚ViewBag带过来的资料设在element的value里面
<input id="menu_data" style="visibility:hidden" [email protected] />
(这边一样给他一个id方便等一下使用)
3. 将我们刚刚menu_data的资料转成map
var menuData = JSON.parse($("#menu_data").val())
- 最後用foreach的方式将我们资料全部加入表格中
menuData.forEach(function (row) {
addItemRow(row.Uid, row.Item, row.Price);
});
这样就完成罗。
附上script部分的完整程序码:
<script>
function addItemRow(uid, item, price) {
var data = `
<tr id=`+ uid + `>
<td> `+ item + `</td>
<td>`+ price + `</td>
<td><input type="text"></td>
</tr>
`
$('#menu_body').append(data);
}
//将资料转成 map
var menuData = JSON.parse($("#menu_data").val())
menuData.forEach(function (row) {
addItemRow(row.Uid, row.Item, row.Price);
});
</script>
- 打开网页看一下我们的成果吧
结语
JQery 与 Bootstrap中都有提供table连接资料的方法，使用上很便利也很强大，
不过因为我们这次要使用到的功能比较简便，所以这边就不展示这两个套件的功能了。
<<: Day11 ATT&CK for ICS - Initial Access(1)
>>: Unity与Photon的新手相遇旅途 | Day11-敌人攻击
Day22_控制项(A17营运持续管理之资讯安全层面)-2021/10/05
▉A.17 Information Security Aspects Of Business营运持续...
Day2:进入新手村前先让我复习一下QQ-CSS-clear 清除浮动
clear 清除浮动 浮动元素顾名思义就是浮动在版面之上，所以如果接着顺序往下写的程序码没有使用cl...
【在厨房想30天的演算法】Day 20 演算法 : 最小生成树 MST Kruskal、Prim
Aloha！又是我少女人妻 Uerica！终於来到第 20 天了 (欢呼)，已经过了三分之二了～人说...
Day19 - 汇入 excel-测试篇
前言 继上篇汇入 Excel 实作，这篇以撰写测试为主 实作 测试的写法有蛮多种，这边以其中一种为例...
28. Vuex State
Vuex使用单一状态树，用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将只包含一个 st...