MVC查询
前言
最近没什么好写的,所以写个查询来巩固一下知识
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>¥<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;
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查询的更多相关文章
- 学习ASP.NET MVC(七)——我的第一个ASP.NET MVC 查询页面
在本篇文章中,我将添加一个新的查询页面(SearchIndex),可以按书籍的种类或名称来进行查询.这个新页面的网址是http://localhost:36878/Book/ SearchIndex. ...
- MVC查询数据接收及校验
本来想写一篇aspx的TreeView控件绑值的文章的,在写案例的时候,写了一半,发现有些地方还得考虑以下,就留待下次了. 这一篇的话,是最近在开发一个项目的时候,有大量的页面和数据表,需要花式查询, ...
- 基于bootstrap和knockoutjs使用 mvc 查询
这是我摘抄的码 http://pan.baidu.com/s/1nvKWdsd
- ASP.NET MVC:Expression Trees 作为参数简化查询
ASP.NET MVC 引入了 ModelBinder 技术,让我们可以在 Action 中以强类型参数的形式接收 Request 中的数据,极大的方便了我们的编程,提高了生产力.在查询 Action ...
- 学习ASP.NET MVC(九)——“Code First Migrations ”工具使用示例
在上一篇文章中,我们学习了如何使用实体框架的“Code First Migrations ”工具,使用其中的“迁移”功能对模型类进行一些修改,同时同步更新对应数据库的表结构. 在本文章中,我们将使用“ ...
- 学习ASP.NET MVC(一)——我的第一个ASP.NET MVC应用程序
学习ASP.NET MVC系列: 学习ASP.NET MVC(一)——我的第一个ASP.NET MVC应用程序 学习ASP.NET MVC(二)——我的第一个ASP.NET MVC 控制器 学习ASP ...
- 学习ASP.NET MVC(十一)——分页
在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList. ...
- Expression Trees 参数简化查询
ASP.NET MVC 引入了 ModelBinder 技术,让我们可以在 Action 中以强类型参数的形式接收 Request 中的数据,极大的方便了我们的编程,提高了生产力.在查询 Action ...
- 学习ASP.NET MVC系列 - 还有比这更简炼的吗?把复杂的事情变简单了,贡献啊!
转自
随机推荐
- 关于取整函数ceil(),floor(),round()函数得应用
ceil()返回向上取整最接近的整数. double ceil(double); floor()返回向下取整最接近的整数. double floor(double); round()用于对浮点数的四舍 ...
- Android作业 0923
计算器小应用 package com.example.myhomework2; import androidx.appcompat.app.AppCompatActivity; import andr ...
- 图片压缩工具pngquant
关于图片压缩的,之前看到一个imageOptim,用着不错,也挺好用的,直接打开要压缩的图片或者文件夹,唰唰唰的就开始压缩了,如下图 后来觉得不是很方面,还要打开软件,选择文件夹,然后就又研究了一下, ...
- JUC并发编程--AQS
转自: https://www.jianshu.com/p/d8eeb31bee5c 前言 在java.util.concurrent.locks包中有很多Lock的实现类,常用的有Reentrant ...
- linux 基础语法
1.linux常用命令 1.1 系统命令 runlevel # 查看当前的运行级别systemctl status sshd # 开启网络服务功能 ...
- Python-local variable 'raw_password' referenced before assignment
where? 执行Python程序的时候,报这个错 why? 变量作用域问题,在分支中定义的变量,当满足条件的时候则可以正确得到变量,当不满足条件的时候则报这个错 way? 把变量从分支中抽离到分支上 ...
- 初识HTTP 图解 形象生动
使用软件: 通信猫 请自行下载 使用平台: win7 360浏览器 当前PC连接的是无线网,所以第2步查看的是 无线局域网适配器上的IP地址
- linux centos7使用docker安装elasticsearch,并且用Django连接使用
一:elasticsearch安装及配置 1:需求分析 当用户在搜索框输入关键字后,我们要为用户提供相关的搜索结果.这种需求依赖数据库的模糊查询like关键字可以实现,但是like关键字的效率极低,而 ...
- OpenCV计算机视觉学习(2)——图像算术运算 & 掩膜mask操作(数值计算,图像融合,边界填充)
在OpenCV中我们经常会遇到一个名字:Mask(掩膜).很多函数都使用到它,那么这个Mask到底是什么呢,下面我们从图像基本运算开始,一步一步学习掩膜. 1,图像算术运算 图像的算术运算有很多种,比 ...
- matlab中datest() 将日期和时间转换为字符串格式
来源:https://ww2.mathworks.cn/help/matlab/ref/datestr.html?searchHighlight=datestr&s_tid=doc_srcht ...