您当前的位置:KKBlog > 学无止境 > MVC

使用ASP.NET MVC局部视图避免JS拼接HTML,编写易于维护的HTML页面

    以前使用ASP.NET WebForm开发时,喜欢使用Repeater控件嵌套的方式开发前台页面,这样就不用JS拼接HTML或者后台拼接HTML了,写出的HTML页面美观、简捷、易于维护,由于不用JS拼接HTML,所以JS写的也很少。

    最近使用ASP.NET MVC开发,前台页面的功能比较复杂,每次刷新整个页面的话体验会很差,所以通过JS控制页面元素,实现局部刷新。刚开始使用的方法是通过JS在前台拼接HTML,结果JS写的很长,要命的事,每增加一个新功能,都要拼接很长的HTML,结果页面的JS越写越多。考虑到后期可能难以维护,所以花了半天的时间,对页面进行了大改,把这一个页面拆分成了四个页面,通过jQuery的load方法实现局部更新,修改之后页面清爽多了。

    本来想使用ASP.NET MVC的PartialView实现,结果路由的问题遇到点麻烦。最后发现直接使用View也可以,就用View实现了,效果是一样的,不必太钻牛角尖。

模板页面代码(用了两层Layout嵌套):

Layout.cshtml页面代码:

@{
    ViewBag.Title = "货机管理";
}
 
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <style type="text/css">
        body
        {
            font-size: 12px;
            padding: 0;
            margin: 0;
            background-color: #666;
        }
 
        .ul-menu
        {
            float: left;
            margin: 0;
            padding: 0;
            margin-left: 3px;
        }
 
            .ul-menu li
            {
                float: left;
                list-style: none;
                margin: 0;
                padding: 0;
                width: 45px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                margin-right: 20px;
                border: solid 1px #999;
                cursor: pointer;
           }
    </style>
    <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        function gotourl(url) {
            window.location = url;
        }
    </script>
</head>
 
<body>
    <div style="width:960px; margin: auto; background-color: #fff; padding: 7px;">
        <div style="height:110px; border: solid 1px #999;">
            <div style="float:left; width: 105px; height: 65px; margin: 3px; text-align: center; border:solid 1px #999;">
                <div style="font-size:16px; margin-top: 12px;">
                    IMU
                    <br />
                    120×90
                </div>
            </div>
            <div style="float:right; padding: 5px; margin-top: 5px;">
                <div style="float:left;">
                    欢迎您,<span>XXX</span>【退出】
                </div>
                <div style="float:left; margin-left: 50px;">
                    @{
                        string[] weekDays = { "星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" };
                    }
                    当前时间@DateTime.Now.ToString("yyyy-MM-dd(" +weekDays[(int)DateTime.Now.DayOfWeek] + ")HH:mm")
                </div>
                <div style="float:left; margin-left: 50px; margin-right: 5px;">
                    帮助中心
                </div>
            </div>
            <div style="margin-top:76px;">
                <ul class="ul-menu">
                    <li onclick="gotourl('@Url.Content("~/Backstage/MachineMng/MachineInfo/Index")')">货机</li>
                    <li onclick="gotourl('@Url.Content("~/Backstage/MachineMng/StartCargo/Index")')">运营</li>
                    <li>交易</li>
                    <li>系统</li>
                </ul>
            </div>
 
        </div>
        @RenderBody()
    </div>
</body>
</html>

RoadSetLayout.cshtml页面代码:

@{
    ViewBag.Title = "货道设置";
    Layout =Url.Content("~/Views/Backstage/MachineMng/Layout.cshtml");
}
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <style type="text/css">
        .div-button1
        {
            float: left;
            width: 120px;
            height: 35px;
            border: solid 1px #999;
            font-size: 18px;
            line-height: 35px;
            text-align: center;
            cursor: pointer;
        }
 
        .div-button2
        {
            float: left;
            width: 120px;
            height: 30px;
            border: solid 1px #999;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }
 
        .div-arrow
        {
            float: left;
            height: 55px;
            padding-top: 5px;
        }
 
        .div-arrow2
        {
            float: left;
            width: 35px;
            height: 22px;
            padding-top: 6px;
            margin-left: 10px;
        }
    </style>
    <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript">
        $(function () {
 
        });
 
    </script>
</head>
<body>
    <div style="height:200px; border: solid 1px #999; border-top: 0;">
        <div style="float:left; width: 200px; height: 150px; border: solid 1px #999; margin: 20px;padding: 5px;">
            <div style="text-align:center; font-size: 18px; line-height: 25px; padding-top: 10px;">
                货机现在运行正常
                <br />
                连续运行3天 72小时
            </div>
            <div style="padding-top:10px; line-height: 20px;">
                货机数据已经与平台数据同步,无需插数据盘。
                请插入数据盘完成数据同步更新/数据盘已插入,数据传输完成10%
            </div>
        </div>
        <div style="float:right; width: 600px; height: 160px; margin: 20px; margin-right: 50px;">
            <div class="div-button1" style="margin-left:100px; cursor: default; background-color: #eee;">
                暂停货机
            </div>
            <div onclick="gotourl('@Url.Content("~/Backstage/MachineMng/StartCargo/Index")')"class="div-button1" style="margin-left:50px;">
                启动货机
            </div>
            <div style="float:left; width: 100%; height: 33px; line-height: 33px; text-align: center;">
                <div style="float:left; margin-left: 100px;">
                    货机暂停才可以进行以下操作:以下操作完成须启动货机
                </div>
            </div>
            <div style="float:left; width: 100%; height: 60px; line-height: 60px; text-align: center;">
                <div class="div-arrow" style="margin-left:150px;">
                    <img  alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_down.png")"/>
                </div>
                <div class="div-arrow" style="margin-left:160px;">
                    <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_up.png")"/>
                </div>
            </div>
            <div class="div-button2" onclick="gotourl('@Url.Content("~/Backstage/MachineMng/RoadSet/Index")')"style="margin-left: 50px;">
                商品货道设置
            </div>
            <div class="div-arrow2" style="">
                <img  alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_right.png")"/>
            </div>
            <div class="div-button2" style="margin-left:5px;">
                现金管理理
            </div>
            <div class="div-arrow2" style="">
                <img  alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_right.png")"/>
            </div>
            <div class="div-button2" style="margin-left:5px;">
                货机运维
            </div>
        </div>
    </div>
    @RenderBody()
</body>
</html>

Index.cshtml页面代码:

@{
    ViewBag.Title = "货道设置";
    Layout =Url.Content("~/Views/Backstage/MachineMng/RoadSetLayout.cshtml");
}
 
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link type="text/css" href="~/Scripts/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet"/>
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
 
        .div-box
        {
            float: left;
            border: solid 1px #f5f5f5;
            height: 148px;
            width: 97px;
            background-color: #f5f5f5;
            cursor: default;
        }
 
            .div-box div
            {
                float: left;
                margin-top: 15px;
                margin-left: 9px;
                height: 120px;
                width: 80px;
                line-height: 120px;
                font-size: 16px;
                font-family:黑体;
                text-align: center;
            }
 
        .ul-instructions
        {
            float: left;
            width: 200px;
            padding: 0;
            margin: 0;
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
 
            .ul-instructions li
            {
                float: left;
                list-style: none;
                width: 200px;
                line-height: 25px;
                font-size: 12px;
                margin: 0;
                padding: 3px;
            }
 
                .ul-instructions lidiv
                {
                    float: left;
                }
 
        .div-road
        {
            float: left;
            height: 130px;
            width: 100px;
            margin-left: 20px;
            margin-top: 20px;
        }
 
        .table-road
        {
            background-color: #ffff00;
            border: solid 1px #999;
        }
 
        .div-highlight
        {
            border: solid 1px #6dbde4 !important;
            background-color: #dceaf2 !important;
        }
 
        .img-btn
        {
            cursor: pointer;
            margin: 3px;
        }
 
        .img-btn2
        {
            cursor: pointer;
            margin-left: 10px;
        }
 
        .table-addroads
        {
            width: 100%;
        }
 
            .table-addroads trtd:first-child
            {
                text-align: right;
            }
 
            .table-addroads tr td
            {
                height: 30px;
                padding: 3px;
            }
    </style>
    <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/Scripts/SimpoWindow.js"></script>
    <script type="text/javascript">
        $(function () {
           $("#tdboxs").load("Boxs?cargoCode=" +'@ViewBag.cargoCode', function (data) {
               $(".div-box:first").click();
            });
        });
 
        //显示货柜的货道
        function showBox(obj, boxId) {
           $(".div-box").removeClass("div-highlight");
           $(obj).addClass("div-highlight");
 
           $("#divfloors").load("Floors?boxId=" +boxId);
        }
 
        //添加货柜
        function addbox(addType) {
            if (confirm("确定添加?")) {
                var cargoCode = '@ViewBag.cargoCode';
                var floorType =$("input[name='floorType']:checked").val();
                $.ajax({
                    type:"POST",
                    url:"@Url.Content("~/Backstage/MachineMng/RoadSet/AddBox")",
                    data: {"addType": addType, "cargoCode": cargoCode,"floorType": floorType },
                    success: function (d) {
                        var data =eval("(" + d + ")");
                        if (data.ok) {
                           $("#tdboxs").load("Boxs?cargoCode=" +cargoCode, function (data) {
                                if (addType == 1) {
                                   $(".div-box:first").click();
                                } else {
                                    $(".div-box:last").click();
                                }
                            });
                        } else {
                           alert("添加失败:" + data.msg);
                        }
                    },
                    error: function () {
                        alert("添加失败");
                    }
                });
            }
        }
 
        //删除货柜
        function delbox(addType) {
            if (confirm("确定删除?")) {
                var cargoCode = '@ViewBag.cargoCode';
                $.ajax({
                    type:"POST",
                    url:"@Url.Content("~/Backstage/MachineMng/RoadSet/DelBox")",
                    data: {"addType": addType, "cargoCode": cargoCode },
                    success: function (data) {
                        if (data == "ok"){
                            if (addType == 1) {
                               $(".div-box:first").remove();
                            }
                            else {
                               $(".div-box:last").remove();
                            }
                           $(".div-box:first").click();
                        }
                        else {
                           alert("删除失败" + data);
                        }
                    },
                    error: function () {
                        alert("删除失败");
                    }
                });
            }
        }
 
        //添加货道
        function addroad(obj, boxId, floor) {
            $.ajax({
                type:"POST",
                url:"@Url.Content("~/Backstage/MachineMng/RoadSet/AddRoad")",
                data: {"boxId": boxId, "floor": floor },
                success: function (d) {
                    var data =eval("(" + d + ")");
 
                    if (data.ok) {
                        var td =$(obj).parent().parent().parent().parent().find("td:first");
                       td.find("#divroads_" +floor).load("Roads?boxId=" +boxId + "&floor="+ floor);
 
                        var roadNum =parseInt(td.find(".span-roadNum").text(), 10);
                       td.find(".span-roadNum").html((roadNum + 1).toString());
                    } else {
                        alert("添加失败:" +data.msg);
                    }
                },
                error: function () {
                    alert("添加失败");
                }
            });
        }
 
        //删除货道
        function delroad(obj, boxId, floor) {
            if (confirm("确定删除?")) {
                $.ajax({
                    type:"POST",
                    url:"@Url.Content("~/Backstage/MachineMng/RoadSet/DelRoad")",
                    data: {"boxId": boxId, "floor": floor },
                    success: function (data) {
                        if (data == "ok") {
                            var td =$(obj).parent().parent().parent().parent().find("td:first");
                           td.find(".div-road:last").remove();
 
                            var roadNum = parseInt(td.find(".span-roadNum").text(),10);
                            if (roadNum > 0) {
                               td.find(".span-roadNum").html((roadNum - 1).toString());
                            }
                        }
                        else {
                           alert("删除失败" + data);
                        }
                    },
                    error: function () {
                        alert("删除失败");
                    }
                });
            }
        }
 
        //添加货道层
        function addfloor(obj, boxId) {
            $.ajax({
                type:"POST",
                url:"@Url.Content("~/Backstage/MachineMng/RoadSet/AddFloor")",
                data: {"boxId": boxId },
                success: function (d) {
                    var data =eval("(" + d + ")");
 
                    if (data.ok) {
                       $("#divfloors").load("Floors?boxId=" +boxId);
 
                        var div =$(obj).parent().parent();
                        var floorNum =parseInt(div.find(".span-floorNum").text(), 10);
                       div.find(".span-floorNum").html((floorNum + 1).toString());
                    } else {
                        alert("添加失败:" +data.msg);
                    }
                },
                error: function () {
                    alert("添加失败");
                }
            });
        }
 
        //删除货道层
        function delfloor(obj, boxId) {
            if($(obj).parent().parent().find(".table-floor").length < 2) return;
 
            if (confirm("确定删除?")) {
                $.ajax({
                    type:"POST",
                    url:"@Url.Content("~/Backstage/MachineMng/RoadSet/DelFloor")",
                    data: {"boxId": boxId },
                    success: function (d) {
                        var data =eval("(" + d + ")");
 
                        if (data.ok) {
                            var div =$(obj).parent().parent();
                           div.find(".table-floor:last").remove();
 
                            var floorNum =parseInt(div.find(".span-floorNum").text(), 10);
                           div.find(".span-floorNum").html((floorNum - 1).toString());
                        } else {
                            alert("删除失败:" +data.msg);
                        }
                    },
                    error: function () {
                        alert("删除失败");
                    }
                });
            }
        }
 
        //批量添加货道
        function addroads(obj, boxId, floor) {
            SimpoWin.showWin2("更换货箱","addroads", 240, 170);
 
            var btnOK =$(".table-addroads").find("input[type='button']");
           btnOK.bind("click", function () {
                var roadNum =$("select[name='roadNum']").find("option:selected").val();
                var roadSpec =$("select[name='roadSpec']").find("option:selected").val();
 
                $.ajax({
                    type:"POST",
                    url:"@Url.Content("~/Backstage/MachineMng/RoadSet/AddRoads")",
                    data: {"boxId": boxId, "floor": floor, "roadNum":roadNum, "roadSpec": roadSpec },
                    success: function (d) {
                        var data =eval("(" + d + ")");
 
                        if (data.ok) {
                            var td =$(obj).parent().parent();
                           td.find("#divroads_" +floor).load("Roads?boxId=" +boxId + "&floor="+ floor);
                           td.find(".span-roadNum").html(data.roadNum.toString());
                        } else {
                           alert("添加失败:" + data.msg);
                        }
                    },
                    error: function () {
                        alert("添加失败");
                    }
                });
 
               btnOK.unbind("click");
               SimpoWin.closeWin2("addroads");
            });
        }
    </script>
</head>
<body>
    <div style="height:30px; line-height: 30px; padding-top: 5px; border-left: solid 1px #999;border-right: solid 1px #999; text-align: center;">
        客户喜好
        <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")"/>
        商品
        <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")"/>
        选择货道
        <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")"/>
        摆放商品
        <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")"/>
        完成货道商品绑定
    </div>
    <div id="divbox" style="border:solid 1px #999; border-top: 0; border-bottom: none;">
        <tablecellpadding="0"cellspacing="0" style="border-collapse:collapse; width: 100%;">
            <tr>
                <td style="width:260px;">
                    <ul class="ul-instructions">
                        <li>
                            <div style="height: 25px; width: 25px;background-color: yellow;"></div>
                            <div style="height: 25px; margin-left:10px;">黄色:表示更换货道</div>
                        </li>
                        <li>
                            <div style="height: 25px; width: 25px;background-color: green;"></div>
                            <div style="height: 25px; margin-left:10px;">绿色:表示上货数量</div>
                        </li>
                        <li>
                            <div style="height: 25px; width: 25px;background-color: red;"></div>
                            <div style="height: 25px; margin-left:10px;">红色:表示现有商品数</div>
                        </li>
                        <li>
                            <div style="height: 25px; width: 25px;background-color: gray;"></div>
                            <div style="height: 25px; margin-left:10px;">灰色:表示最大商品数</div>
                        </li>
                        <li>
                            <div style="height: 23px; width: 23px; border:solid 1px #000; text-align: center;">调</div>
                            <div style="height: 25px; margin-left:10px;">调:表示调换本商品</div>
                        </li>
                        <li>
                            <div style="height: 23px; width: 23px; border:solid 1px #000; text-align: center;">换</div>
                            <div style="height:25px; margin-left: 10px;">换:表示更换商品种类</div>
                        </li>
                    </ul>
                </td>
                <td>
                    <div style="float:left;">
                        <div style="text-align: center; margin-top:25px;">
                            <img onclick="addbox(1)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
                        </div>
                        <div style="margin-top: 50px; text-align:center;">
                            <img onclick="delbox(1)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")"  />
                        </div>
                    </div>
                </td>
                <!--货柜-->
                <td id="tdboxs">&nbsp;
                </td>
                <td>
                    <div style="float:left;">
                        <div style="text-align: center; margin-top:25px;">
                            <img onclick="addbox(2)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
                        </div>
                        <div style="margin-top: 50px; text-align:center;">
                            <img onclick="delbox(2)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")"  />
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td style="text-align:right;">
                    <inputname="floorType" value="1" type="radio" checked="checked"/>横箱<input name="floorType" value="0" type="radio"/>竖箱</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </div>
    <!--货道层-->
    <div id="divfloors"></div>
    <!-- 分隔线-------------------------------------------------------------------------------------->
    <div id="addroads" style="display:none;">
        <div style="padding:10px;">
            <tableclass="table-addroads" cellpadding="0" cellspacing="0"style="border-collapse: collapse;">
                <tr>
                    <td style="width:80px;">货道数:</td>
                    <td>
                        <select name="roadNum">
                            <optionvalue="4">4货道</option>
                            <option value="6">6货道</option>
                            <option value="8">8货道</option>
                            <option value="10">10货道</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>货道型号:</td>
                    <td>
                        <select name="roadSpec">
                            <option value="C25/80">C25/80</option>
                            <optionvalue="C10/50">C10/50</option>
                            <option value="C30/85">C30/85</option>
                            <option value="C15/75">C15/75</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"style="text-align: center;">
                        <input type="button" value="确定"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Index.cshtml页面中有两个局部页面Boxs.cshtml和Floors.cshtml,Floors.cshtml页面中有一个局部页面Roads.cshtml,代码如下:

Boxs.cshtml页面代码:

@usingSystem.Data;
@using DAL;
 @{
    BoxInfoDal boxInfoDal = new BoxInfoDal();
    string cargoCode = ViewBag.cargoCode;
    DataTable dtLeftBox =boxInfoDal.GetListByBoxCodeDesc(cargoCode, 1);
    DataTable dtRightBox =boxInfoDal.GetList(cargoCode, 2);
}
 
@foreach(System.Data.DataRow dr in dtLeftBox.Rows)
{
    <div class="div-box" onclick="showBox(this,'@dr["id"].ToString()')">
        <div style="background:url(@Url.Content("~/Images/Cargo/yougui.png"))no-repeat;">
           @boxInfoDal.GetName(dr["cargoCode"].ToString())
        </div>
    </div>
}
<div id="divMainBox" style="float:left; height: 150px; width: 99px;">
    <img alt="" src="@Url.Content("~/Images/Cargo/zhugui.png")" />
</div>
@foreach(System.Data.DataRow dr in dtRightBox.Rows)
{
    <div class="div-box" onclick="showBox(this,'@dr["id"].ToString()')">
        <div style="background:url(@Url.Content("~/Images/Cargo/yougui.png"))no-repeat;">
            @boxInfoDal.GetName(dr["cargoCode"].ToString())
        </div>
    </div>
}
Floors.cshtml页面代码:
@usingSystem.Data;
@using DAL;
 
@{
    BoxInfoDal boxInfoDal = new BoxInfoDal();
    string boxId = ViewBag.boxId;
    DataRow drBox =boxInfoDal.Get(boxId).Rows[0];
    string boxCode =drBox["cargoCode"].ToString();
    string floorNum =drBox["floorNum"].ToString();
    string floorType =drBox["floorType"].ToString();
}
<script type="text/javascript">
    $(function () {
       $("input[name='floorType'][value='" + @floorType +"']").attr("checked","checked");
 
        for (var i = 1; i <=parseInt('@floorNum', 10) ; i++) {
            $("#divroads_" +i).load("Roads?boxId=" +'@boxId' + "&floor="+ i);
        }
    });
</script>
<div style="border-left:solid 1px #999; border-right: solid 1px #999; border-top: 0;">
    <div style="padding:10px; border-bottom: solid 1px #000;">
        <div style="float:left; height: 20px; line-height: 20px;">
            设置 @boxInfoDal.GetName(boxCode) 货道层数: <span class="span-floorNum">@floorNum</span>层
        </div>
        <img onclick="addfloor(this, '@boxId')" alt="" class="img-btn2" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
        <img onclick="delfloor(this, '@boxId')" alt="" class="img-btn2" src="@Url.Content("~/Images/Cargo/roadset_Del.png")"  />
    </div>
    @for (int i = 1; i <= int.Parse(floorNum); i++)
    {
        DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, i);
        <table class="table-floor" cellpadding="0" cellspacing="0"style="border-collapse: collapse;border-bottom: solid 1px #999; width: 100%;">
            <tr>
                <td style="padding:10px; padding-bottom: 20px; vertical-align: top;">
                    <div style="padding:10px;">
                        设置第 @i 层货道数:  <span class="span-roadNum">@dtRoadList.Rows.Count</span>
                        <button onclick="addroads(this,'@boxId',@i)" style="margin-left:20px;">更换货箱</button>
                    </div>
                    <!--货道-->
                    <div id="divroads_@i"></div>
                </td>
                <td>
                    <div style="float:right;">
                        <div style="text-align: center; margin-top:15px;">
                            <img onclick="addroad(this,'@boxId',@i)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
                        </div>
                        <div style="margin-top: 50px; text-align:center;">
                            <img onclick="delroad(this,'@boxId',@i)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")"  />
                        </div>
                    </div>
                </td>
            </tr>
        </table>      
    }
</div>
Roads.cshtml页面代码:
@usingSystem.Data;
@using DAL;
 
@{
    BoxInfoDal boxInfoDal = new BoxInfoDal();
    string boxId = ViewBag.boxId;
    int floor = ViewBag.floor;
    DataTable dtRoadList =boxInfoDal.GetRoadList(boxId, floor);
    int j = 0;
}
 
@foreach(System.Data.DataRow drRoad in dtRoadList.Rows)
{
    j++;                   
    <div class="div-road">
        <tableclass="table-road" cellpadding="0" cellspacing="0"style="border-collapse: collapse; width:100%;">
            <tr>
                <td>
                    <div style="margin:2px;">@boxInfoDal.NumToABCD(floor)@j.ToString()</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="margin:2px;">货道@drRoad["roadSpec"].ToString()</div>
                </td>
            </tr>
            <tr style="line-height:11px;">
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="text-align:center;">
                    <inputvalue="0"type="text" style="height:17px; width: 25px; text-align: center;"/>
                </td>
            </tr>
            <tr>
                <td style="text-align:center;">现
                                                   <input value="@drRoad["existProductNum"].ToString()" type="text" style="height:19px; width: 25px; border: 0; background-color: red; text-align: center;" readonly="readonly"/><input value="@drRoad["maxProductNum"].ToString()" type="text" style="height:19px; width: 25px; border: 0; background-color: gray; text-align: center;" readonly="readonly"/>
                    大
                </td>
            </tr>
            <tr>
                <td style="text-align:center; font-weight: bold;">
                    <div style="margin-top:5px;">@drRoad["productName"].ToString()&nbsp;</div>
                </td>
            </tr>
            <tr>
                <td style="text-align:center;">
                    <div style="position:relative; float: right; margin-right: -1px; margin-bottom: -1px; border: solid1px #000; padding: 3px; cursor: pointer; background-color: white;">调</div>
                </td>
            </tr>
        </table>
    </div>
}

控制器代码:

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using DAL;
using Newtonsoft.Json;
 
namespace Controllers.Backstage.MachineMng
{
    ///<summary>
    ///货道设置
    ///</summary>
    publicclass RoadSetController : AdminBaseController
    {
        #region构造函数及变量
        privateSQLiteHelper.SQLiteHelper sqliteHelper;
        privateBoxInfoDal boxInfoDal;
        privateCargoInformationDal cargoInformationDal;
 
        publicRoadSetController()
        {
            sqliteHelper = new SQLiteHelper.SQLiteHelper();
            boxInfoDal = new BoxInfoDal();
            cargoInformationDal = new CargoInformationDal();
        }
        #endregion
 
        #region Index页面
        publicActionResult Index()
        {
            ViewBag.cargoCode = "112";
 
            returnView();
        }
        #endregion
 
        #region Boxs页面
        publicActionResult Boxs(string cargoCode)
        {
            ViewBag.cargoCode = cargoCode;
 
            returnView();
        }
        #endregion
 
        #regionFloors页面
        publicActionResult Floors(string boxId)
        {
            ViewBag.boxId = boxId;
 
            returnView();
        }
        #endregion
 
        #region Roads页面
        publicActionResult Roads(string boxId, intfloor)
        {
            ViewBag.boxId = boxId;
            ViewBag.floor = floor;
 
            returnView();
        }
        #endregion
 
        #region添加贷柜
        publicActionResult AddBox(int addType, stringcargoCode, string floorType)
        {
            DataTable dtCargo =cargoInformationDal.Get(cargoCode);
            DataRow drCargo = dtCargo.Rows[0];
            string boxId= Guid.NewGuid().ToString();
            stringpositionNum = null;
            stringboxCode = null; //货柜编号
            DataTable dtLeftBoxList =boxInfoDal.GetList(cargoCode, addType);
            boxCode = addType.ToString() +(dtLeftBoxList.Rows.Count + 1).ToString("00");
            positionNum = addType.ToString() +(dtLeftBoxList.Rows.Count + 1).ToString("00");
 
            StringBuilder sql = new StringBuilder();
            //插入货柜表
            sql.AppendFormat(@"
                insert into
                mas_box_info(id, shopId, positionNum,cargoCode, floorType, floorNum, delFlag, addTime,    addUserId, addMark)
               values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}');",
                boxId, drCargo["shopId"].ToString(), positionNum, boxCode, floorType, 1, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
 
            //插入关联表
            sql.AppendFormat(@"
                insert into
                mas_cargo_container(id, boxId,positionNum, cargoCode, positionDescription, xCoordinate, yCoordinate, delFlag,addTime, addUserId, addMark)
               values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}','{10}');", Guid.NewGuid().ToString(), boxId,positionNum, cargoCode, "", 0, 0, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
 
            sqliteHelper.BeginTransaction();
            try
            {
               sqliteHelper.Execute(sql.ToString());
                sqliteHelper.Commit();
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = true;
                dic["id"] = boxId;
                dic["name"] = (addType == 1 ? "左" : "右") + (dtLeftBoxList.Rows.Count + 1) + "柜";
                returnContent(JsonConvert.SerializeObject(dic));
            }
            catch(Exception ex)
            {
                sqliteHelper.Rollback();
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = false;
                dic["msg"] = ex.Message;
                returnContent(JsonConvert.SerializeObject(dic));
            }
        }
        #endregion
 
        #region删除贷柜
        publicActionResult DelBox(int addType, stringcargoCode)
        {
            DataTable dtCargo =cargoInformationDal.Get(cargoCode);
            DataRow drCargo = dtCargo.Rows[0];
            string boxId= null;
            stringboxCode = null; //货柜编号
            DataTable dtLeftBoxList =boxInfoDal.GetList(cargoCode, addType);
            boxCode = addType.ToString() +dtLeftBoxList.Rows.Count.ToString("00");
            foreach(DataRow dr in dtLeftBoxList.Rows)
            {
                if (dr["cargoCode"].ToString() == boxCode)
                {
                    boxId = dr["id"].ToString();
                }
            }
            if(boxId == null)
            {
                returnContent("");
            }
 
            StringBuilder sql = new StringBuilder();
            //删除货柜
            sql.AppendFormat(@"
                delete from mas_box_info
                where id='{0}';", boxId);
 
            //删除货机货柜关联
            sql.AppendFormat(@"
                delete from mas_cargo_container
                where boxid='{0}';", boxId);
 
            //删除货道
            sql.AppendFormat(@"
                delete from mas_box_road_info
                where id in
                (select roadId frommas_container_cargo_road
                where containerId='{0}');", boxId);
 
            //删除货柜货道关联
            sql.AppendFormat(@"
                delete frommas_container_cargo_road
                where containerId='{0}';", boxId);
 
            sqliteHelper.BeginTransaction();
            try
            {
                sqliteHelper.Execute(sql.ToString());
                sqliteHelper.Commit();
                returnContent("ok");
            }
            catch(Exception ex)
            {
                sqliteHelper.Rollback();
 
                return Content("错误:" +ex.Message);
            }
        }
        #endregion
 
        #region添加货道
        publicActionResult AddRoad(string boxId, intfloor)
        {
            stringroadId = Guid.NewGuid().ToString();
            DataTable dtRoadList = boxInfoDal.GetRoadList(boxId,floor);
            stringroadNo = boxInfoDal.NumToABCD(floor) + (dtRoadList.Rows.Count + 1).ToString();
 
            StringBuilder sql = new StringBuilder();
            //插入货道表
            sql.AppendFormat(@"
                insert into
                mas_box_road_info(id, roadNO,roadSpec, existProductNum, maxProductNum, productID, delFlag, addTime,addUserId, addMark)
               values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}');",
                roadId, roadNo, "C20/75", 0, 10, -1, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
 
            //插入关联表
            sql.AppendFormat(@"
                insert into
                mas_container_cargo_road(id,containerId, layerNo, roadId, sort, delFlag, addTime, addUserId, addMark)
               values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}');", Guid.NewGuid().ToString(), boxId, floor,roadId, dtRoadList.Rows.Count + 1, 0,DateTime.Now.ToString("yyyy-MM-ddHH:mm:ss"), -1, -1);
 
            sqliteHelper.BeginTransaction();
            try
            {
               sqliteHelper.Execute(sql.ToString());
                sqliteHelper.Commit();
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = true;
                dic["id"] = roadId;
                dic["roadNo"] = roadNo;
                dic["roadSpec"] = "C20/75";
                dic["maxProductNum"] = "10";
                returnContent(JsonConvert.SerializeObject(dic));
            }
            catch(Exception ex)
            {
                sqliteHelper.Rollback();
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = false;
                dic["msg"] = ex.Message;
                returnContent(JsonConvert.SerializeObject(dic));
            }
        }
        #endregion
 
        #region删除货道
        publicActionResult DelRoad(string boxId, intfloor)
        {
            DataTable dtRoad = boxInfoDal.GetRoadLast(boxId,floor);
 
            if(dtRoad.Rows.Count > 0)
            {
                stringroadId = dtRoad.Rows[0]["id"].ToString();
                StringBuilder sql = new StringBuilder();
                //删除货道
                sql.AppendFormat(@"
                    delete frommas_box_road_info
                    where id='{0}';", roadId);
 
                //删除货柜货道关联
                sql.AppendFormat(@"
                    delete frommas_container_cargo_road
                    where roadId='{0}';", roadId);
 
               sqliteHelper.BeginTransaction();
                try
                {
                   sqliteHelper.Execute(sql.ToString());
                    sqliteHelper.Commit();
                    returnContent("ok");
                }
                catch(Exception ex)
                {
                    sqliteHelper.Rollback();
 
                    returnContent("错误:" + ex.Message);
                }
            }
            else
            {
                return Content("ok");
            }
        }
        #endregion
 
        #region添加货道层
        publicActionResult AddFloor(string boxId)
        {
            DataTable dtBox =boxInfoDal.Get(boxId);
            intfloorNum = int.Parse(dtBox.Rows[0]["floorNum"].ToString());
 
            StringBuilder sql = new StringBuilder();
            //修改货柜信息
            sql.AppendFormat(@"
                update mas_box_info
                set floorNum={1}
                where id='{0}';", boxId, floorNum + 1);
 
            sqliteHelper.BeginTransaction();
            try
            {
               sqliteHelper.Execute(sql.ToString());
                sqliteHelper.Commit();
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = true;
                dic["name"] = boxInfoDal.GetName(dtBox.Rows[0]["cargoCode"].ToString());
                dic["floorNum"] = floorNum + 1;
                returnContent(JsonConvert.SerializeObject(dic));
            }
            catch(Exception ex)
            {
                sqliteHelper.Rollback();
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = false;
                dic["msg"] = ex.Message;
                return Content(JsonConvert.SerializeObject(dic));
            }
        }
        #endregion
 
        #region删除货道层
        publicActionResult DelFloor(string boxId)
        {
            DataTable dtBox =boxInfoDal.Get(boxId);
            intfloorNum = int.Parse(dtBox.Rows[0]["floorNum"].ToString());
 
            StringBuilder sql = new StringBuilder();
            //修改货柜信息
            sql.AppendFormat(@"
                update mas_box_info
                set floorNum={1}
                where id='{0}';", boxId, floorNum - 1);
 
            //删除货道
            sql.AppendFormat(@"
                    delete frommas_box_road_info
                    where id in
                    (select road.id
                    from mas_box_road_info road
                    left join mas_container_cargo_road ccr onccr.roadId=road.id
                    where ccr.layerNo={0}
                    andccr.containerId='{1}');",floorNum, boxId);
 
            //删除货柜货道关联
            sql.AppendFormat(@"
                    delete frommas_container_cargo_road
                    where roadId in
                    (select road.id
                    from mas_box_road_info road
                    left joinmas_container_cargo_road ccr on ccr.roadId=road.id
                    where ccr.layerNo={0}
                    andccr.containerId='{1}');",floorNum, boxId);
 
            sqliteHelper.BeginTransaction();
            try
            {
                if(floorNum > 1)
                {
                    sqliteHelper.Execute(sql.ToString());
                    sqliteHelper.Commit();
                }
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = true;
                return Content(JsonConvert.SerializeObject(dic));
            }
            catch(Exception ex)
            {
                sqliteHelper.Rollback();
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = false;
                dic["msg"] = ex.Message;
                returnContent(JsonConvert.SerializeObject(dic));
            }
        }
        #endregion
 
        #region更换货箱
        publicActionResult AddRoads(string boxId, intfloor, int roadNum, stringroadSpec)
        {
            StringBuilder sql = new StringBuilder();
 
            //删除货道
            sql.AppendFormat(@"
                    delete frommas_box_road_info
                    where id in
                    (select road.id
                    from mas_box_road_info road
                    left joinmas_container_cargo_road ccr on ccr.roadId=road.id
                    where ccr.layerNo={0}
                    andccr.containerId='{1}');",floor, boxId);
 
            //删除货柜货道关联
            sql.AppendFormat(@"
                    delete frommas_container_cargo_road
                    where roadId in
                    (select road.id
                    from mas_box_road_info road
                    left joinmas_container_cargo_road ccr on ccr.roadId=road.id
                    where ccr.layerNo={0}
                    andccr.containerId='{1}');",floor, boxId);
 
            for (int i = 1; i <= roadNum; i++)
            {
                stringroadId = Guid.NewGuid().ToString();
 
                //插入货道表
                sql.AppendFormat(@"
                insert into
                mas_box_road_info(id, roadNO,roadSpec, existProductNum, maxProductNum, productID, delFlag, addTime,addUserId, addMark)
                values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}');",
                    roadId, i, roadSpec, 0, 10, -1, 0, DateTime.Now.ToString("yyyy-MM-ddHH:mm:ss"), -1, -1);
 
                //插入关联表
                sql.AppendFormat(@"
                insert into
                mas_container_cargo_road(id,containerId, layerNo, roadId, sort, delFlag, addTime, addUserId, addMark)
               values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}');", Guid.NewGuid().ToString(), boxId, floor,roadId, i, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
            }
 
            sqliteHelper.BeginTransaction();
            try
            {
               sqliteHelper.Execute(sql.ToString());
                sqliteHelper.Commit();
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = true;
                dic["roadNo"] = boxInfoDal.NumToABCD(floor);
                dic["roadNum"] = roadNum;
                dic["maxProductNum"] = "10";
                returnContent(JsonConvert.SerializeObject(dic));
            }
            catch(Exception ex)
            {
                sqliteHelper.Rollback();
 
                Dictionary<string, object> dic = newDictionary<string, object>();
                dic["ok"] = false;
                dic["msg"] = ex.Message;
                returnContent(JsonConvert.SerializeObject(dic));
            }
        }
        #endregion
 
    }
}


 
二维码
意见反馈 二维码