前言
最近没什么好写的,所以写个查询来巩固一下知识
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="width: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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<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;
width: 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;
width: 100%;
background: #fff;
z-index: 1;
} header:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #67b968;
width: 100%;
height: 3px;
} header div {
width: 50%;
} .header_left {
} .header_left h1 {
padding: 20px 0px 23px 80px;
width: 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 {
width: 100%;
height: 100%;
max-height: 765px;
overflow: auto;
padding: 10px;
box-sizing: border-box;
background: rgba(0,0,0,0.05);
} .Greens_Menu table {
width: 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%);
width: 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%;
width: 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 {
width: 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;
width: 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;
width: 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;
width: 50px;
height: 85.9%;
z-index: 1;
} .Right_Menu::after {
content: '';
left: 0px;
top: 0px;
height: 100%;
width: 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;
width: 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;
width: 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%;
width: 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 {
width: 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;
width: 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;
width: 100%;
padding: initial !important;
} .SettleAccounts input {
display: block;
width: 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] {
width: 20px;
height: 20px;
} .KJ_PAM input[type=button]:hover {
background: #67b968;
} .KJ_PAM input[type=number] {
height: 20px;
width: 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);
}

查询效果

后言
本文结束了,如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方,给我提意见,让我加以改进

MVC查询的更多相关文章

  1. 学习ASP.NET MVC(七)——我的第一个ASP.NET MVC 查询页面

    在本篇文章中,我将添加一个新的查询页面(SearchIndex),可以按书籍的种类或名称来进行查询.这个新页面的网址是http://localhost:36878/Book/ SearchIndex. ...

  2. MVC查询数据接收及校验

    本来想写一篇aspx的TreeView控件绑值的文章的,在写案例的时候,写了一半,发现有些地方还得考虑以下,就留待下次了. 这一篇的话,是最近在开发一个项目的时候,有大量的页面和数据表,需要花式查询, ...

  3. 基于bootstrap和knockoutjs使用 mvc 查询

    这是我摘抄的码 http://pan.baidu.com/s/1nvKWdsd

  4. ASP.NET MVC:Expression Trees 作为参数简化查询

    ASP.NET MVC 引入了 ModelBinder 技术,让我们可以在 Action 中以强类型参数的形式接收 Request 中的数据,极大的方便了我们的编程,提高了生产力.在查询 Action ...

  5. 学习ASP.NET MVC(九)——“Code First Migrations ”工具使用示例

    在上一篇文章中,我们学习了如何使用实体框架的“Code First Migrations ”工具,使用其中的“迁移”功能对模型类进行一些修改,同时同步更新对应数据库的表结构. 在本文章中,我们将使用“ ...

  6. 学习ASP.NET MVC(一)——我的第一个ASP.NET MVC应用程序

    学习ASP.NET MVC系列: 学习ASP.NET MVC(一)——我的第一个ASP.NET MVC应用程序 学习ASP.NET MVC(二)——我的第一个ASP.NET MVC 控制器 学习ASP ...

  7. 学习ASP.NET MVC(十一)——分页

    在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList. ...

  8. Expression Trees 参数简化查询

    ASP.NET MVC 引入了 ModelBinder 技术,让我们可以在 Action 中以强类型参数的形式接收 Request 中的数据,极大的方便了我们的编程,提高了生产力.在查询 Action ...

  9. 学习ASP.NET MVC系列 - 还有比这更简炼的吗?把复杂的事情变简单了,贡献啊!

    转自

随机推荐

  1. 复习 | 彻底弄懂Flexbox之Demo篇

    flexbox之前有接触,写项目时也用过,但也只是简单的,对其也是似懂非懂,所以今天下定决心把这个再学一遍,因为似懂非懂就是不懂 本文主要是的demo演示,想看flexbox语法 请移步flexbox ...

  2. Spring学习(九)Spring 和数据库编程【了解】

    一.传统 JDBC 回顾 用一个大佬的demo来简单看一下 /** * 使用jdbc,根据id查询单个Student的信息 */ public class JdbcManage { public St ...

  3. 刷题[GWCTF 2019]你的名字

    解题思路 打开发现需要输入名字,猜测会有sql注入漏洞,测试一下发现单引号被过滤了,再fuzs下看看过滤了哪些 长度为1518和1519的都有过滤,测试一下,感觉不是sql注入了.那还有什么呢,考虑了 ...

  4. DeRPnStiNK靶机渗透

    DeRPnStiNK靶机渗透 常规的信息搜集 扫到了phpmyadmin以及wordpress并在后台发现弱密码,即admin,admin 这里对wordpress进行了扫描: 扫描插件: searc ...

  5. axios之post提交

    axios官网地址:https://github.com/axios/axios post提交到后台需要做相对应的处理 使用URLSearchParams可以让post 数据提交到后台 对应gitHu ...

  6. python的全局函数

    1.Python的全局函数 import builtins dir(builtins)  abs  # 返回参数的绝对值 可以写成函数:def absnum): if num >=0: retu ...

  7. NIO 实现简单群聊功能

    服务端: package com.yang.runnable; import java.io.IOException; import java.net.InetSocketAddress; impor ...

  8. mysql-15-view

    #视图 /* 含义:虚拟表,和普通表一样使用.通过表动态生成的数据 只保存了sql逻辑,不保存查询结果 应用场景: 1.多个地方用到同样的查询结果 2.该查询结果使用的sql语句较为复杂 */ USE ...

  9. RT Thread SPI设备 使用

    后记: 之前,我把SPI的片选在Cubemx中配置成了SPI_NSS.现在我给它改为了GPIO_OUTPUT.  同时参考了别人的类似的一个操作无线模块(采用SPI设备驱动)的例子程序(清楚了RTT的 ...

  10. Mac 效率工具必备神器 —— Alfred

    前言 alfred 这款软件称为「神器」真是当之无愧.今天专门总结一下,作为之前 Mac 配置教程-开发篇 的补充. 需要说明的是,如果你发现我介绍的功能无法使用,则代表需要花钱购买它的 Powerp ...