前言
最近没什么好写的，所以写个查询来巩固一下知识
HTML
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>瑰园美食</title>
<link rel="icon" href="~/Content/Images/Icon/Logo.png" />
<link href="~/Plugin/layui/css/layui.css" rel="stylesheet" />
<link href="~/Content/Css/IndexStyle.css" rel="stylesheet" />
</head>
<body>
<div style="100%;height:80px;"></div>
<header>
<div class="header_left">
<span><img src="~/Content/Images/Icon/Logo.png" /></span>
<h1>瑰园美食</h1>
</div>
<div class="header_right">
<p>未登录，<a onclick="window.location.href='/Main/Login'">点我登录</a></p>
</div>
</header>
<div class="Navigation"><p>菜品</p></div>
<div class="Greens_Menu">
<table>
@*<tbody tabindex="1">
<tr>
<td><div class="Show_D"><div><h2>青肉卷</h2><p>¥<span>21</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_1.png" /></td>
<td><div class="Show_D"><div><h2>大盘菜</h2><p>¥<span>33</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_2.png" /></td>
<td><div class="Show_D"><div><h2>鸡肉卷</h2><p>¥<span>56</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_3.png" /></td>
<td><div class="Show_D"><div><h2>冰糖粥</h2><p>¥<span>32</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_4.png" /></td>
<td><div class="Show_D"><div><h2>辣椒油</h2><p>¥<span>12</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_5.png" /></td>
<td><div class="Show_D"><div><h2>特制豆腐</h2><p>¥<span>21</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_6.png" /></td>
<td><div class="Show_D"><div><h2>大肉卷</h2><p>¥<span>35</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_7.png" /></td>
<td><div class="Show_D"><div><h2>红烧肉</h2><p>¥<span>42</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_8.png" /></td>
<td><div class="Show_D"><div><h2>小龙虾</h2><p>¥<span>69</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_9.png" /></td>
<td><div class="Show_D"><div><h2>糯米卷</h2><p>¥<span>12</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_10.png" /></td>
<td><div class="Show_D"><div><h2>牛腩面</h2><p>¥<span>13</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_11.png" /></td>
<td><div class="Show_D"><div><h2>寿司套餐</h2><p>¥<span>60</span></p><i onclick="AddCard()"></i><i></i></div></div><img src="~/Content/Images/Greens/A_12.png" /></td>
</tr>
</tbody>
<tbody tabindex="2">
<tr>
<td>12</td>
<td>12</td>
</tr>
</tbody>*@
</table>
</div>
<div class="Paging">
<input type="button" value="上一页" />
<div>
<input class="PagingOn" type="button" value="1" />
</div>
<input type="button" value="下一页" />
</div>
<div class="Right_Menu">
<ul class="Menu_Ul">
<li class="Menu_Ul_Li"><i class="Menu_Ul_li_i" title="我的信息" style="background-image:url(../../Content/Images/Icon/Icon1.png)"></i></li>
<li class="Menu_Ul_Li" onclick="OpenCarts()"><i class="Menu_Ul_li_i" title="购物车" style="background-image:url(../../Content/Images/Icon/Icon2.png)"></i>
<ul class="Menu_Ul_Ul" hidden>
<li class="Menu_Ul_Ul_Li">
<ul class="Menu_Ul_Ul_Ul">
@*<li class="Menu_Ul_Ul_Ul_Li"><img src="~/Content/Images/Greens/A_1.png" /><p><label>青肉卷</label>¥<span>12</span></p><div class="KJ_PAM"><input type="button" class="KJ_PAM_M" value="-" /><input type="number" min="1" max="999" value="1" /><input type="button" class="KJ_PAM_P" value="+" /></div><i title="删除" class="Del_Greens_Button">X</i></li>
<li class="Menu_Ul_Ul_Ul_Li"><img src="~/Content/Images/Greens/A_1.png" /><p><label>青肉卷</label>¥<span>12</span></p><div class="KJ_PAM"><input type="button" class="KJ_PAM_M" value="-" /><input type="number" min="1" max="999" value="1" /><input type="button" class="KJ_PAM_P" value="+" /></div><i title="删除" class="Del_Greens_Button">X</i></li>
<li class="Menu_Ul_Ul_Ul_Li"><img src="~/Content/Images/Greens/A_1.png" /><p><label>青肉卷</label>¥<span>12</span></p><div class="KJ_PAM"><input type="button" class="KJ_PAM_M" value="-" /><input type="number" min="1" max="999" value="1" /><input type="button" class="KJ_PAM_P" value="+" /></div><i title="删除" class="Del_Greens_Button">X</i></li>
<li class="Menu_Ul_Ul_Ul_Li"><img src="~/Content/Images/Greens/A_1.png" /><p><label>青肉卷</label>¥<span>12</span></p><div class="KJ_PAM"><input type="button" class="KJ_PAM_M" value="-" /><input type="number" min="1" max="999" value="1" /><input type="button" class="KJ_PAM_P" value="+" /></div><i title="删除" class="Del_Greens_Button">X</i></li>
<li class="Menu_Ul_Ul_Ul_Li"><img src="~/Content/Images/Greens/A_1.png" /><p><label>青肉卷</label>¥<span>12</span></p><div class="KJ_PAM"><input type="button" class="KJ_PAM_M" value="-" /><input type="number" min="1" max="999" value="1" /><input type="button" class="KJ_PAM_P" value="+" /></div><i title="删除" class="Del_Greens_Button">X</i></li>
<li class="Menu_Ul_Ul_Ul_Li"><img src="~/Content/Images/Greens/A_1.png" /><p><label>青肉卷</label>¥<span>12</span></p><div class="KJ_PAM"><input type="button" class="KJ_PAM_M" value="-" /><input type="number" min="1" max="999" value="1" /><input type="button" class="KJ_PAM_P" value="+" /></div><i title="删除" class="Del_Greens_Button">X</i></li>*@
</ul>
</li>
<li class="SettleAccounts"><input type="button" value="结算" /></li>
</ul>
</li>
</ul>
</div>
<b id="UserName" hidden>@Session["UserName"]</b>
<b id="UserID" hidden>@Session["UserID"]</b>
<script src="~/Plugin/jquery-3.3.1.min.js"></script>
<script src="~/Plugin/layui/layui.all.js"></script>
<script src="~/Content/Js/KJ_PAM.js"></script>
<script>
var UserName = $("#UserName");
var UserID = $("#UserID");
var header_right_p = $("header .header_right p");
var Greens_Menu_Table = $(".Greens_Menu table");
var Menu_Ul_Ul_Ul = $(".Menu_Ul_Ul_Ul");
//指定多少数据进行分页处理
var GreensData = "";
var PagingNumber = 12;
var PagingSize = 0;
if (UserName.html() != "") {
header_right_p.html("欢迎您, "+ UserName.html());
}
//查询菜品
$.ajax({
type:"get",
url: "/Main/SelectGreens",
dataType: "json",
success: function (data) {
GreensData += "<tbody tabindex='1'><tr>"
$.each(data, function (i) {
GreensData+= "<td><div class='Show_D'><div><h2>" + data[i].GreensName + "</h2><p>¥<span>" + data[i].GreensMoney + "</span></p><i onclick='AddCard(" + data[i].GreensID + ")'></i><i></i></div></div><img src='" + data[i].GreensImg + "' /></td>";
})
GreensData += ("</tr></tbody>");
Greens_Menu_Table.append(GreensData);
}
})
//打开购物车
function OpenCarts() {
if ($(".Menu_Ul_Ul").attr("hidden") == "hidden") {
$(".Menu_Ul_Ul").attr("hidden", false);
} else {
$(".Menu_Ul_Ul").attr("hidden", true);
}
$.each(Menu_Ul_Ul_Ul.children(), function (i) {
this.remove();
})
if (UserID.html() != "") {
//查询购物车
$.ajax({
type: "get",
url: "/Main/SelectCarts",
dataType: "json",
data: { UserID: UserID.html()},
success: function (data) {
$.each(data, function (i) {
Menu_Ul_Ul_Ul.append('<li class="Menu_Ul_Ul_Ul_Li"><img src="' + data[i].tbGreens.GreensImg + '" /><p><label>' + data[i].tbGreens.GreensName + '</label>¥<span>' + data[i].tbGreens.GreensMoney + '</span></p><div class="KJ_PAM"><input type="button" class="KJ_PAM_M" value="-" /><input type="number" min="1" max="999" value="' + data[i].GreensNumber + '" /><input type="button" class="KJ_PAM_P" value="+" /></div><i title="删除" class="Del_Greens_Button">X</i></li>');
})
KJ_PAM_ClickF();
}
})
} else {
alert("请先登录!");
window.location.href = "/Main/Login";
}
}
$(".Menu_Ul_Ul").click(function (e) {
e.stopPropagation();
})
//加入购物车
function AddCard(GreensID) {
if (UserID.html() != "") {
$.ajax({
type: "get",
dataType: "json",
url: "/Main/InsertCarts",
data: { UserID: UserID.html(), GreensID: GreensID },
success: function (msg) {
alert(msg.MsgText);
}
})
} else {
alert("请先登录!");
window.location.href = "/Main/Login";
}
}
//修改购物车
function UpdateCarts() {
ZuiHouJiner = 0;
for (var i = 0; i < document.querySelectorAll(".Menu_Ul_Ul_Ul_Li").length; i++) {
ZuiHouJiner += parseInt(document.querySelectorAll(".Menu_Ul_Ul_Ul_Li")[i].querySelectorAll("p span")[0].innerHTML) * parseInt(document.querySelectorAll(".Menu_Ul_Ul_Ul_Li")[i].querySelectorAll(".KJ_PAM input[type='number']")[0].value);
}
document.querySelectorAll(".SettleAccounts input[type='button']")[0].value = "结算 ￥" + ZuiHouJiner;
}
//var ZuiHouJiner = 0;
//setInterval(function () {
// ZuiHouJiner = 0;
// for (var i = 0; i < document.querySelectorAll(".Menu_Ul_Ul_Ul_Li").length; i++) {
// ZuiHouJiner += parseInt(document.querySelectorAll(".Menu_Ul_Ul_Ul_Li")[i].querySelectorAll("p span")[0].innerHTML) * parseInt(document.querySelectorAll(".Menu_Ul_Ul_Ul_Li")[i].querySelectorAll(".KJ_PAM input[type='number']")[0].value);
// }
// document.querySelectorAll(".SettleAccounts input[type='button']")[0].value = "结算 ￥" + ZuiHouJiner;
//}, 500);
</script>
</body>
</html>
CSS
body {
padding: 0;
margin: 0;
}
::-webkit-scrollbar {
background: rgba(0, 0, 0,.3);
height: 10px;
10px;
}
::-webkit-scrollbar-thumb {
background: #dbb900;
border-radius: 50px;
}
header {
box-shadow: 0px 1px 15px 0px rgba(0, 0, 0,.3);
display: flex;
position: fixed;
top: 0px;
left: 0px;
100%;
background: #fff;
z-index: 1;
}
header:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #67b968;
100%;
height: 3px;
}
header div {
50%;
}
.header_left {
}
.header_left h1 {
padding: 20px 0px 23px 80px;
75%;
}
.header_left span {
float: left;
padding: 15px;
box-sizing: border-box;
}
.header_right {
}
.header_right p {
line-height: 2.5em;
height: 100%;
text-align: right;
padding: 15px;
box-sizing: border-box;
}
.header_right p a:hover {
cursor: pointer;
}
.Navigation {
padding: 10px 15px;
box-sizing: border-box;
background: rgba(0,0,0,.05);
color: #67b968;
font-size: 16px;
}
.Greens_Menu {
100%;
height: 100%;
max-height: 765px;
overflow: auto;
padding: 10px;
box-sizing: border-box;
background: rgba(0,0,0,0.05);
}
.Greens_Menu table {
100%;
height: 100%;
}
.Greens_Menu table tr {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
}
.Greens_Menu table tbody tr td {
text-align: center;
position: relative;
padding: 0px 48px;
transition:all linear 0.2s;
}
.Greens_Menu table tbody tr td .Show_D {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
360px;
height: 254px;
opacity: 0;
border-radius: 5px;
background: rgba(0,0,0,0.5);
color: #fff;
overflow: hidden;
transition: all linear 0.2s;
}
.Greens_Menu table tbody tr td .Show_D:hover {
opacity: 1;
}
.Greens_Menu table tbody tr td .Show_D div {
position: absolute;
top: 40%;
left: 0%;
100%;
height: 100%;
}
.Greens_Menu table tbody tr td .Show_D div h2 {
padding-bottom: 3px;
}
.Greens_Menu table tbody tr td .Show_D div p {
padding-bottom: 30px;
}
.Greens_Menu table tbody tr td .Show_D div i {
40px;
height: 40px;
display: inline-block;
padding: 0px 3px;
}
.Greens_Menu table tbody tr td .Show_D div i:hover {
cursor: pointer;
}
.Greens_Menu table tbody tr td .Show_D div i:nth-child(3) {
background-image: url('../Images/Icon/Icon2.png');
background-repeat: no-repeat;
}
.Greens_Menu table tbody tr td .Show_D div i:nth-child(4) {
background-image: url('../Images/Icon/Icon1.png');
background-repeat: no-repeat;
}
.Greens_Menu table tbody tr td .Show_D div h2 {
font-weight: bold;
}
.Greens_Menu table tbody tr td img {
border-radius: 5px;
margin-bottom: 10px;
}
.Paging {
position: fixed;
left: 0;
bottom: 0;
100%;
text-align: center;
padding: 15px;
box-sizing: border-box;
box-shadow: 0px -1px 15px 0px rgba(0, 0, 0,.3);
background: #fff;
}
.Paging:after {
content: '';
position: absolute;
left: 0;
top: 0;
background: #67b968;
100%;
height: 3px;
}
.Paging input {
background: #fff;
border: 1px;
border-style: solid;
border-color: rgba(0, 0, 0,.3);
height: 30px;
padding: 0px 10px;
border-radius: 5px;
}
.Paging input:hover {
cursor: pointer;
}
.Paging input, .Paging div {
display: inline-block;
}
.PagingOn {
background: #67b968 !important;
color: #fff;
}
/*右菜单*/
.Right_Menu {
position: fixed;
top: 8.1%;
right: 0px;
background: #fff;
50px;
height: 85.9%;
z-index: 1;
}
.Right_Menu::after {
content: '';
left: 0px;
top: 0px;
height: 100%;
3px;
background: #67b968;
position: absolute;
}
.Right_Menu .Menu_Ul .Menu_Ul_Li {
position: relative;
}
.Right_Menu .Menu_Ul .Menu_Ul_Li:hover {
background: rgba(0,0,0,0.3);
}
.Right_Menu .Menu_Ul .Menu_Ul_Li .Menu_Ul_li_i {
display: block;
36px;
height: 36px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
margin: 10px 8px;
padding: 7px 0px;
}
.Right_Menu .Menu_Ul .Menu_Ul_Li .Menu_Ul_Ul {
position: absolute;
right: 50px;
top: 0px;
max-height: 300px;
height: 300px;
background:#fff;
}
.Right_Menu .Menu_Ul .Menu_Ul_Li .Menu_Ul_Ul .Menu_Ul_Ul_Li {
max-height: 270px;
}
.Right_Menu .Menu_Ul .Menu_Ul_Li .Menu_Ul_Ul .Menu_Ul_Ul_Li .Menu_Ul_Ul_Ul {
overflow: auto;
max-height: 270px;
background: #fff;
border: 3px solid #67b968;
border-right: none;
box-sizing: border-box;
}
.Right_Menu .Menu_Ul .Menu_Ul_Li .Menu_Ul_Ul .Menu_Ul_Ul_Li .Menu_Ul_Ul_Ul .Menu_Ul_Ul_Ul_Li {
position: relative;
padding: 5px;
display: flex;
280px;
height: 18%;
overflow: auto;
}
.Right_Menu .Menu_Ul .Menu_Ul_Li .Menu_Ul_Ul .Menu_Ul_Ul_Li .Menu_Ul_Ul_Ul .Menu_Ul_Ul_Ul_Li:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
100%;
height: 1px;
background: #67b968;
transform: translateX(-50%);
}
.Right_Menu .Menu_Ul .Menu_Ul_Li .Menu_Ul_Ul .Menu_Ul_Ul_Li .Menu_Ul_Ul_Ul .Menu_Ul_Ul_Ul_Li img {
100px;
height: 50px;
}
.Right_Menu .Menu_Ul .Menu_Ul_Li .Menu_Ul_Ul .Menu_Ul_Ul_Li .Menu_Ul_Ul_Ul .Menu_Ul_Ul_Ul_Li p {
display: block;
padding: 0 5px;
70px;
}
.Right_Menu .Menu_Ul .Menu_Ul_Li .Menu_Ul_Ul .Menu_Ul_Ul_Li .Menu_Ul_Ul_Ul .Menu_Ul_Ul_Ul_Li label {
font-weight: bold;
display: block;
line-height: 2em;
}
.Del_Greens_Button {
position: absolute;
right: 5px;
top: 0;
cursor: pointer;
}
.SettleAccounts {
position: absolute !important;
bottom: 0px;
left: 0px;
100%;
padding: initial !important;
}
.SettleAccounts input {
display: block;
100%;
height: 30px;
color: #fff;
background: #67b968;
border: none;
}
.SettleAccounts input:hover {
background: #559856;
}
/*加减控件*/
.KJ_PAM {
display: block;
line-height: 3.5em;
}
.KJ_PAM input {
background: #fff;
border: none;
border: 1px solid #67b968;
text-align: center;
display: inline-block;
}
.KJ_PAM input[type=button] {
20px;
height: 20px;
}
.KJ_PAM input[type=button]:hover {
background: #67b968;
}
.KJ_PAM input[type=number] {
height: 20px;
40px;
box-sizing: border-box;
-moz-appearance: textfield;
}
.KJ_PAM input[type=number]::-webkit-outer-spin-button, .KJ_PAM input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
控制器
public ActionResult SelectGreens()
{
var listGreens = (from tbGreens in MyModel.PW_Greens
select tbGreens).ToList();
return Json(listGreens, JsonRequestBehavior.AllowGet);
}
查询效果
后言
本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进