使用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 li div { 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 tr td:first-child { text-align: right; } .table-addroads tr td { height: 30px; padding: 3px; } .input-green { background-color: green; } </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' + "&t=" + new Date().valueOf(), function (data) { $(".div-box:first").click(); }); }); //显示货柜的货道 function showBox(obj, boxId) { $(".div-box").removeClass("div-highlight"); $(obj).addClass("div-highlight"); $("#divfloors").load("Floors?boxId=" + boxId + "&t=" + new Date().valueOf()); } //添加货柜 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 + "&t=" + new Date().valueOf(), 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 + "&t=" + new Date().valueOf()); 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 + "&t=" + new Date().valueOf()); 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) { var div = $(obj).parent().parent().parent(); if (div.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) { 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 windiv = $("#addroads"); var btnOK = windiv.find("input[type='button']"); btnOK.bind("click", function () { var roadNum = windiv.find("select[name='roadNum']").find("option:selected").val(); var roadSpec = windiv.find("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 + "&t=" + new Date().valueOf()); 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;"> <table cellpadding="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"> </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> </td> <td> </td> <td style="text-align: right;"> <input name="floorType" value="1" type="radio" checked="checked" />横箱<input name="floorType" value="0" type="radio" />竖箱</td> <td> </td> </tr> </table> </div> <!--货道层--> <div id="divfloors"></div> <!-- 分隔线 --------------------------------------------------------------------------------------> <!--更换货箱--> <div id="addroads" style="display: none;"> <div style="padding: 10px;"> <table class="table-addroads" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td style="width: 80px;">货道数：</td> <td> <select name="roadNum"> <option value="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> <option value="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> <!--批量更换货道--> <div id="replaceRoadSpec" style="display: none;"> <div style="padding: 10px;"> <table class="table-addroads" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td>货道型号：</td> <td> <select name="roadSpec"> <option value="C25/80">C25/80</option> <option value="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> <!--更换单个货道--> <div id="replaceRoadSpecSingle" style="display: none;"> <div style="padding: 10px;"> <table class="table-addroads" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td>当前货道：</td> <td id="currentRoadSpec"></td> </tr> <tr> <td>货道型号：</td> <td> <select name="roadSpec"> <option value="C25/80">C25/80</option> <option value="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页面代码：
@using System.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页面代码：
@using System.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 + "&t=" + new Date().valueOf()); } //批量操作 $("#batchoperation").change(function () { if ($(this).val() == "更换货道") { SimpoWin.showWin2("批量更换货道", "replaceRoadSpec", 240, 140); var windiv = $("#replaceRoadSpec"); var btnOK = windiv.find("input[type='button']"); btnOK.bind("click", function () { var roadSpec = windiv.find("select[name='roadSpec']").find("option:selected").val(); var boxId = '@boxId'; $.ajax({ type: "POST", url: "@Url.Content("~/Backstage/MachineMng/RoadSet/ReplaceRoadSpec")", data: { "boxId": boxId, "roadSpec": roadSpec }, success: function (d) { var data = eval("(" + d + ")"); if (data.ok) { for (var i = 1; i <= parseInt('@floorNum', 10) ; i++) { $("#divroads_" + i).load("Roads?boxId=" + '@boxId' + "&floor=" + i + "&t=" + new Date().valueOf()); } } else { alert("添加失败：" + data.msg); } setbatchsel();//还原批量操作下拉框 }, error: function () { setbatchsel();//还原批量操作下拉框 alert("添加失败"); } }); btnOK.unbind("click"); SimpoWin.closeWin2("replaceRoadSpec"); }); } if ($(this).val() == "更换货箱") { SimpoWin.showWin2("批量更换货箱", "addroads", 240, 170); var windiv = $("#addroads"); var btnOK = windiv.find("input[type='button']"); btnOK.bind("click", function () { var roadNum = windiv.find("select[name='roadNum']").find("option:selected").val(); var roadSpec = windiv.find("select[name='roadSpec']").find("option:selected").val(); var boxId = '@boxId'; $.ajax({ type: "POST", url: "@Url.Content("~/Backstage/MachineMng/RoadSet/ReplaceRoads")", data: { "boxId": boxId, "roadNum": roadNum, "roadSpec": roadSpec }, success: function (d) { var data = eval("(" + d + ")"); if (data.ok) { for (var i = 1; i <= parseInt('@floorNum', 10) ; i++) { $("#divroads_" + i).load("Roads?boxId=" + '@boxId' + "&floor=" + i + "&t=" + new Date().valueOf()); } } else { alert("添加失败：" + data.msg); } setbatchsel();//还原批量操作下拉框 }, error: function () { setbatchsel();//还原批量操作下拉框 alert("添加失败"); } }); btnOK.unbind("click"); SimpoWin.closeWin2("addroads"); }); } }); }); //还原批量操作下拉框 function setbatchsel() { $("#batchoperation").find("option[value='批量操作']").attr("selected", "selected"); } //确定上货 function addgoods(obj, boxId) { var div = $(obj).parent().parent().parent(); var inputs = div.find(".addgoods"); var data = ""; inputs.each(function () { var input = $(this); if (parseInt(input.val(), 10) > 0) { data += input.attr("roadid") + ":" + input.val() + ","; } }); if (data == "") { alert("请填写上货数量"); return; } data = data.substr(0, data.length - 1); if (confirm("确定上货吗？")) { $.ajax({ type: "POST", url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddGoods")", data: { "data": data }, success: function (d) { var data = eval("(" + d + ")"); if (data.ok) { for (var i = 1; i <= parseInt('@floorNum', 10) ; i++) { $("#divroads_" + i).load("Roads?boxId=" + '@boxId' + "&floor=" + i + "&t=" + new Date().valueOf()); } alert("上货成功"); } else { alert("上货失败：" + data.msg); } setbatchsel();//还原批量操作下拉框 }, error: function () { setbatchsel();//还原批量操作下拉框 alert("上货失败"); } }); } } </script> <div style="border-left: solid 1px #999; border-right: solid 1px #999; border-top: 0;"> <div style="padding: 10px; height: 20px; border-bottom: solid 1px #000;"> <div style="float: left; height: 20px; line-height: 20px;"> 设置 @boxInfoDal.GetName(boxCode) 货道层数： <span class="span-floorNum">@floorNum</span>层 </div> <div style="float: left; height: 20px;"> <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> <div style="float: left; height: 20px; padding-left: 15px;"> <select id="batchoperation"> <option value="批量操作">批量操作</option> <option value="更换货道">更换货道</option> <option value="更换货箱">更换货箱</option> </select> <button onclick="addgoods(this,'@boxId')" style="margin-left: 10px;">确定上货</button> </div> </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页面代码：
@using System.Data; @using DAL; @{ BoxInfoDal boxInfoDal = new BoxInfoDal(); string boxId = ViewBag.boxId; int floor = ViewBag.floor; DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, floor); int j = 0; } <script type="text/javascript"> $(function () { var inputs = $(".addgoods"); inputs.bind("keyup", function () { var input = $(this); var td = input.parent().parent().parent(); //调整输入值 var num = parseInt(input.val(), 10); var currentNum = parseInt(td.find(".currentNum").val(), 10); var maxNum = parseInt(td.find(".maxNum").val(), 10); if (num + currentNum > maxNum) { input.val(maxNum - currentNum); } //背景色 if (input.val() != 0) { input.addClass("input-green"); } else { input.removeClass("input-green"); } }); }); //更换单个货道 function replaceRoad(currentRoadSpec, roadId, floor) { SimpoWin.showWin2("更换货道", "replaceRoadSpecSingle", 240, 170); var windiv = $("#replaceRoadSpecSingle"); windiv.find("#currentRoadSpec").html(currentRoadSpec); var btnOK = windiv.find("input[type='button']"); btnOK.bind("click", function () { var roadSpec = windiv.find("select[name='roadSpec']").find("option:selected").val(); $.ajax({ type: "POST", url: "@Url.Content("~/Backstage/MachineMng/RoadSet/ReplaceRoad")", data: { "roadId": roadId, "roadSpec": roadSpec }, success: function (d) { var data = eval("(" + d + ")"); if (data.ok) { $("#divroads_" + floor).load("Roads?boxId=" + '@boxId' + "&floor=" + floor + "&t=" + new Date().valueOf()); } else { alert("添加失败：" + data.msg); } setbatchsel();//还原批量操作下拉框 }, error: function () { setbatchsel();//还原批量操作下拉框 alert("添加失败"); } }); btnOK.unbind("click"); SimpoWin.closeWin2("replaceRoadSpecSingle"); }); } </script> @foreach (System.Data.DataRow drRoad in dtRoadList.Rows) { j++; <div class="div-road"> <table class="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 onclick="replaceRoad('@drRoad["roadSpec"].ToString()','@drRoad["id"].ToString()','@floor')" style="cursor: pointer" title="点击更换货道"> <div style="margin: 2px;">货道 @drRoad["roadSpec"].ToString()</div> </td> </tr> <tr style="line-height: 11px;"> <td> </td> </tr> <tr> <td style="text-align: center;"> <input class="addgoods" roadid="@drRoad["id"].ToString()" value="0" type="text" style="height: 17px; width: 25px; text-align: center;" /> </td> </tr> <tr> <td style="text-align: center;">现 <input class="currentNum" value="@drRoad["existProductNum"].ToString()" type="text" style="height: 19px; width: 25px; border: 0; background-color: red; text-align: center;" readonly="readonly" /><input class="maxNum" 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; cursor: pointer;" title="点击选择商品"> <div style="margin-top: 5px;">@drRoad["productName"].ToString() </div> </td> </tr> <tr> <td style="text-align: center;"> <div style="position: relative; float: right; margin-right: -1px; margin-bottom: -1px; border: solid 1px #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> public class RoadSetController : AdminBaseController { #region 构造函数及变量 private SQLiteHelper.SQLiteHelper sqliteHelper; private BoxInfoDal boxInfoDal; private CargoInformationDal cargoInformationDal; public RoadSetController() { sqliteHelper = new SQLiteHelper.SQLiteHelper(); boxInfoDal = new BoxInfoDal(); cargoInformationDal = new CargoInformationDal(); } #endregion #region Index页面 public ActionResult Index() { ViewBag.cargoCode = "112"; return View(); } #endregion #region Boxs页面 public ActionResult Boxs(string cargoCode) { ViewBag.cargoCode = cargoCode; return View(); } #endregion #region Floors页面 public ActionResult Floors(string boxId) { ViewBag.boxId = boxId; return View(); } #endregion #region Roads页面 public ActionResult Roads(string boxId, int floor) { ViewBag.boxId = boxId; ViewBag.floor = floor; return View(); } #endregion #region 添加贷柜 public ActionResult AddBox(int addType, string cargoCode, string floorType) { DataTable dtCargo = cargoInformationDal.Get(cargoCode); DataRow drCargo = dtCargo.Rows[0]; string boxId = Guid.NewGuid().ToString(); string positionNum = null; string boxCode = 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 = new Dictionary<string, object>(); dic["ok"] = true; dic["id"] = boxId; dic["name"] = (addType == 1 ? "左" : "右") + (dtLeftBoxList.Rows.Count + 1) + "柜"; return Content(JsonConvert.SerializeObject(dic)); } catch (Exception ex) { sqliteHelper.Rollback(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = false; dic["msg"] = ex.Message; return Content(JsonConvert.SerializeObject(dic)); } } #endregion #region 删除贷柜 public ActionResult DelBox(int addType, string cargoCode) { DataTable dtCargo = cargoInformationDal.Get(cargoCode); DataRow drCargo = dtCargo.Rows[0]; string boxId = null; string boxCode = 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) { return Content(""); } 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 from mas_container_cargo_road where containerId='{0}');", boxId); //删除货柜货道关联 sql.AppendFormat(@" delete from mas_container_cargo_road where containerId='{0}';", boxId); sqliteHelper.BeginTransaction(); try { sqliteHelper.Execute(sql.ToString()); sqliteHelper.Commit(); return Content("ok"); } catch (Exception ex) { sqliteHelper.Rollback(); return Content("错误：" + ex.Message); } } #endregion #region 添加货道 public ActionResult AddRoad(string boxId, int floor) { string roadId = Guid.NewGuid().ToString(); DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, floor); string roadNo = 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-dd HH:mm:ss"), -1, -1); sqliteHelper.BeginTransaction(); try { sqliteHelper.Execute(sql.ToString()); sqliteHelper.Commit(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = true; dic["id"] = roadId; dic["roadNo"] = roadNo; dic["roadSpec"] = "C20/75"; dic["maxProductNum"] = "10"; return Content(JsonConvert.SerializeObject(dic)); } catch (Exception ex) { sqliteHelper.Rollback(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = false; dic["msg"] = ex.Message; return Content(JsonConvert.SerializeObject(dic)); } } #endregion #region 删除货道 public ActionResult DelRoad(string boxId, int floor) { DataTable dtRoad = boxInfoDal.GetRoadLast(boxId, floor); if (dtRoad.Rows.Count > 0) { string roadId = dtRoad.Rows[0]["id"].ToString(); StringBuilder sql = new StringBuilder(); //删除货道 sql.AppendFormat(@" delete from mas_box_road_info where id='{0}';", roadId); //删除货柜货道关联 sql.AppendFormat(@" delete from mas_container_cargo_road where roadId='{0}';", roadId); sqliteHelper.BeginTransaction(); try { sqliteHelper.Execute(sql.ToString()); sqliteHelper.Commit(); return Content("ok"); } catch (Exception ex) { sqliteHelper.Rollback(); return Content("错误：" + ex.Message); } } else { return Content("ok"); } } #endregion #region 添加货道层 public ActionResult AddFloor(string boxId) { DataTable dtBox = boxInfoDal.Get(boxId); int floorNum = 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 = new Dictionary<string, object>(); dic["ok"] = true; dic["name"] = boxInfoDal.GetName(dtBox.Rows[0]["cargoCode"].ToString()); dic["floorNum"] = floorNum + 1; return Content(JsonConvert.SerializeObject(dic)); } catch (Exception ex) { sqliteHelper.Rollback(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = false; dic["msg"] = ex.Message; return Content(JsonConvert.SerializeObject(dic)); } } #endregion #region 删除货道层 public ActionResult DelFloor(string boxId) { DataTable dtBox = boxInfoDal.Get(boxId); int floorNum = 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 from mas_box_road_info where id in (select road.id from mas_box_road_info road left join mas_container_cargo_road ccr on ccr.roadId=road.id where ccr.layerNo={0} and ccr.containerId='{1}');", floorNum, boxId); //删除货柜货道关联 sql.AppendFormat(@" delete from mas_container_cargo_road where roadId in (select road.id from mas_box_road_info road left join mas_container_cargo_road ccr on ccr.roadId=road.id where ccr.layerNo={0} and ccr.containerId='{1}');", floorNum, boxId); sqliteHelper.BeginTransaction(); try { if (floorNum > 1) { sqliteHelper.Execute(sql.ToString()); sqliteHelper.Commit(); } Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = true; return Content(JsonConvert.SerializeObject(dic)); } catch (Exception ex) { sqliteHelper.Rollback(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = false; dic["msg"] = ex.Message; return Content(JsonConvert.SerializeObject(dic)); } } #endregion #region 更换货箱 public ActionResult AddRoads(string boxId, int floor, int roadNum, string roadSpec) { StringBuilder sql = new StringBuilder(); //删除货道 sql.AppendFormat(@" delete from mas_box_road_info where id in (select road.id from mas_box_road_info road left join mas_container_cargo_road ccr on ccr.roadId=road.id where ccr.layerNo={0} and ccr.containerId='{1}');", floor, boxId); //删除货柜货道关联 sql.AppendFormat(@" delete from mas_container_cargo_road where roadId in (select road.id from mas_box_road_info road left join mas_container_cargo_road ccr on ccr.roadId=road.id where ccr.layerNo={0} and ccr.containerId='{1}');", floor, boxId); for (int i = 1; i <= roadNum; i++) { string roadId = 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-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, 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 = new Dictionary<string, object>(); dic["ok"] = true; dic["roadNo"] = boxInfoDal.NumToABCD(floor); dic["roadNum"] = roadNum; dic["maxProductNum"] = "10"; return Content(JsonConvert.SerializeObject(dic)); } catch (Exception ex) { sqliteHelper.Rollback(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = false; dic["msg"] = ex.Message; return Content(JsonConvert.SerializeObject(dic)); } } #endregion #region 批量更换货道 public ActionResult ReplaceRoadSpec(string boxId, string roadSpec) { StringBuilder sql = new StringBuilder(); //批量更换货道 sql.AppendFormat(@" update mas_box_road_info set roadSpec='{1}' where id in (select road.id from mas_box_road_info road left join mas_container_cargo_road ccr on ccr.roadId=road.id where ccr.containerId='{0}');", boxId, roadSpec); sqliteHelper.BeginTransaction(); try { sqliteHelper.Execute(sql.ToString()); sqliteHelper.Commit(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = true; return Content(JsonConvert.SerializeObject(dic)); } catch (Exception ex) { sqliteHelper.Rollback(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = false; dic["msg"] = ex.Message; return Content(JsonConvert.SerializeObject(dic)); } } #endregion #region 批量更换货箱 public ActionResult ReplaceRoads(string boxId, int roadNum, string roadSpec) { DataTable dtBox = boxInfoDal.Get(boxId); int floorNum = int.Parse(dtBox.Rows[0]["floorNum"].ToString()); StringBuilder sql = new StringBuilder(); //删除货道 sql.AppendFormat(@" delete from mas_box_road_info where id in (select road.id from mas_box_road_info road left join mas_container_cargo_road ccr on ccr.roadId=road.id where ccr.containerId='{0}');", boxId); //删除货柜货道关联 sql.AppendFormat(@" delete from mas_container_cargo_road where roadId in (select road.id from mas_box_road_info road left join mas_container_cargo_road ccr on ccr.roadId=road.id where ccr.containerId='{0}');", boxId); for (int floor = 1; floor <= floorNum; floor++) { for (int i = 1; i <= roadNum; i++) { string roadId = 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-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, 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 = new Dictionary<string, object>(); dic["ok"] = true; return Content(JsonConvert.SerializeObject(dic)); } catch (Exception ex) { sqliteHelper.Rollback(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = false; dic["msg"] = ex.Message; return Content(JsonConvert.SerializeObject(dic)); } } #endregion #region 更换单个货道 public ActionResult ReplaceRoad(string roadId, string roadSpec) { StringBuilder sql = new StringBuilder(); //批量更换货道 sql.AppendFormat(@" update mas_box_road_info set roadSpec='{1}' where id='{0}';", roadId, roadSpec); sqliteHelper.BeginTransaction(); try { sqliteHelper.Execute(sql.ToString()); sqliteHelper.Commit(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = true; return Content(JsonConvert.SerializeObject(dic)); } catch (Exception ex) { sqliteHelper.Rollback(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = false; dic["msg"] = ex.Message; return Content(JsonConvert.SerializeObject(dic)); } } #endregion #region 上货 public ActionResult AddGoods(string data) { string[] array = data.Split(','); StringBuilder sql = new StringBuilder(); foreach (string str in array) { string[] val = str.Split(':'); string roadId = val[0]; string num = val[1]; //上货 sql.AppendFormat(@" update mas_box_road_info set existProductNum=existProductNum+{1} where id='{0}';", roadId, num); } sqliteHelper.BeginTransaction(); try { sqliteHelper.Execute(sql.ToString()); sqliteHelper.Commit(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = true; return Content(JsonConvert.SerializeObject(dic)); } catch (Exception ex) { sqliteHelper.Rollback(); Dictionary<string, object> dic = new Dictionary<string, object>(); dic["ok"] = false; dic["msg"] = ex.Message; return Content(JsonConvert.SerializeObject(dic)); } } #endregion } }
效果图：
