zoukankan      html  css  js  c++  java

  • 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="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;
     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);
    }

    查询效果
    在这里插入图片描述

    后言
    本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进
  • 相关阅读:
    hdu 5366 简单递推
    hdu 5365 判断正方形
    hdu 3635 并查集
    hdu 4497 数论
    hdu5419 Victor and Toys
    hdu5426 Rikka with Game
    poj2074 Line of Sight
    hdu5425 Rikka with Tree II
    hdu5424 Rikka with Graph II
    poj1009 Edge Detection
  • 原文地址：https://www.cnblogs.com/LRolinx/p/13850368.html
Copyright © 2011-2022 走看看