使用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页面代码：

  1.  
  2. @{
  3.     ViewBag.Title = "货机管理";
  4. }
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8.     <title>@ViewBag.Title</title>
  9.     <style type="text/css">
  10.         body
  11.         {
  12.             font-size: 12px;
  13.             padding: 0;
  14.             margin: 0;
  15.             background-color: #666;
  16.         }
  17.         .ul-menu
  18.         {
  19.             float: left;
  20.             margin: 0;
  21.             padding: 0;
  22.             margin-left: 3px;
  23.         }
  24.             .ul-menu li
  25.             {
  26.                 float: left;
  27.                 list-style: none;
  28.                 margin: 0;
  29.                 padding: 0;
  30.                 width: 45px;
  31.                 height: 25px;
  32.                 line-height: 25px;
  33.                 text-align: center;
  34.                 margin-right: 20px;
  35.                 border: solid 1px #999;
  36.                 cursor: pointer;
  37.             }
  38.     </style>
  39.     <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
  40.     <script type="text/javascript">
  41.         function gotourl(url) {
  42.             window.location = url;
  43.         }
  44.     </script>
  45. </head>
  46. <body>
  47.     <div style="width: 960px; margin: auto; background-color: #fff; padding: 7px;">
  48.         <div style="height: 110px; border: solid 1px #999;">
  49.             <div style="float: left; width: 105px; height: 65px; margin: 3px; text-align: center; border: solid 1px #999;">
  50.                 <div style="font-size: 16px; margin-top: 12px;">
  51.                     IMU
  52.                     <br />
  53.                     120×90
  54.                 </div>
  55.             </div>
  56.             <div style="float: right; padding: 5px; margin-top: 5px;">
  57.                 <div style="float: left;">
  58.                     欢迎您，<span>XXX</span> 【退出】
  59.                 </div>
  60.                 <div style="float: left; margin-left: 50px;">
  61.                     @{
  62.                         string[] weekDays = { "星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" };
  63.                     }
  64.                     当前时间 @DateTime.Now.ToString("yyyy-MM-dd（" + weekDays[(int)DateTime.Now.DayOfWeek] + "）HH:mm")
  65.                 </div>
  66.                 <div style="float: left; margin-left: 50px; margin-right: 5px;">
  67.                     帮助中心
  68.                 </div>
  69.             </div>
  70.             <div style="margin-top: 76px;">
  71.                 <ul class="ul-menu">
  72.                     <li onclick="gotourl('@Url.Content("~/Backstage/MachineMng/MachineInfo/Index")')">货机</li>
  73.                     <li onclick="gotourl('@Url.Content("~/Backstage/MachineMng/StartCargo/Index")')">运营</li>
  74.                     <li>交易</li>
  75.                     <li>系统</li>
  76.                 </ul>
  77.             </div>
  78.         </div>
  79.         @RenderBody()
  80.     </div>
  81. </body>
  82. </html>

RoadSetLayout.cshtml页面代码：

  1.  
  2. @{
  3.     ViewBag.Title = "货道设置";
  4.     Layout = Url.Content("~/Views/Backstage/MachineMng/Layout.cshtml");
  5. }
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9.     <title>@ViewBag.Title</title>
  10.     <style type="text/css">
  11.         .div-button1
  12.         {
  13.             float: left;
  14.             width: 120px;
  15.             height: 35px;
  16.             border: solid 1px #999;
  17.             font-size: 18px;
  18.             line-height: 35px;
  19.             text-align: center;
  20.             cursor: pointer;
  21.         }
  22.         .div-button2
  23.         {
  24.             float: left;
  25.             width: 120px;
  26.             height: 30px;
  27.             border: solid 1px #999;
  28.             font-size: 14px;
  29.             line-height: 30px;
  30.             text-align: center;
  31.             cursor: pointer;
  32.         }
  33.         .div-arrow
  34.         {
  35.             float: left;
  36.             height: 55px;
  37.             padding-top: 5px;
  38.         }
  39.         .div-arrow2
  40.         {
  41.             float: left;
  42.             width: 35px;
  43.             height: 22px;
  44.             padding-top: 6px;
  45.             margin-left: 10px;
  46.         }
  47.     </style>
  48.     <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
  49.     <script type="text/javascript" src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
  50.     <script type="text/javascript">
  51.         $(function () {
  52.         });
  53.     </script>
  54. </head>
  55. <body>
  56.     <div style="height: 200px; border: solid 1px #999; border-top: 0;">
  57.         <div style="float: left; width: 200px; height: 150px; border: solid 1px #999; margin: 20px; padding: 5px;">
  58.             <div style="text-align: center; font-size: 18px; line-height: 25px; padding-top: 10px;">
  59.                 货机现在运行正常
  60.                 <br />
  61.                 连续运行3天 72小时
  62.             </div>
  63.             <div style="padding-top: 10px; line-height: 20px;">
  64.                 货机数据已经与平台数据同步，无需插数据盘。
  65.                 请插入数据盘完成数据同步更新/数据盘已插入，数据传输完成10%
  66.             </div>
  67.         </div>
  68.         <div style="float: right; width: 600px; height: 160px; margin: 20px; margin-right: 50px;">
  69.             <div class="div-button1" style="margin-left: 100px; cursor: default; background-color: #eee;">
  70.                 暂停货机
  71.             </div>
  72.             <div onclick="gotourl('@Url.Content("~/Backstage/MachineMng/StartCargo/Index")')" class="div-button1" style="margin-left: 50px;">
  73.                 启动货机
  74.             </div>
  75.             <div style="float: left; width: 100%; height: 33px; line-height: 33px; text-align: center;">
  76.                 <div style="float: left; margin-left: 100px;">
  77.                     货机暂停才可以进行以下操作：以下操作完成须启动货机
  78.                 </div>
  79.             </div>
  80.             <div style="float: left; width: 100%; height: 60px; line-height: 60px; text-align: center;">
  81.                 <div class="div-arrow" style="margin-left: 150px;">
  82.                     <img  alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_down.png")" />
  83.                 </div>
  84.                 <div class="div-arrow" style="margin-left: 160px;">
  85.                     <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_up.png")" />
  86.                 </div>
  87.             </div>
  88.             <div class="div-button2" onclick="gotourl('@Url.Content("~/Backstage/MachineMng/RoadSet/Index")')" style="margin-left: 50px;">
  89.                 商品货道设置
  90.             </div>
  91.             <div class="div-arrow2" style="">
  92.                 <img  alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_right.png")" />
  93.             </div>
  94.             <div class="div-button2" style="margin-left: 5px;">
  95.                 现金管理理
  96.             </div>
  97.             <div class="div-arrow2" style="">
  98.                 <img  alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_right.png")" />
  99.             </div>
  100.             <div class="div-button2" style="margin-left: 5px;">
  101.                 货机运维
  102.             </div>
  103.         </div>
  104.     </div>
  105.     @RenderBody()
  106. </body>
  107. </html>

Index.cshtml页面代码：

  1.  
  2. @{
  3.     ViewBag.Title = "货道设置";
  4.     Layout = Url.Content("~/Views/Backstage/MachineMng/RoadSetLayout.cshtml");
  5. }
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9.     <title>@ViewBag.Title</title>
  10.     <link type="text/css" href="~/Scripts/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet" />
  11.     <style type="text/css">
  12.         body
  13.         {
  14.             font-size: 12px;
  15.         }
  16.         .div-box
  17.         {
  18.             float: left;
  19.             border: solid 1px #f5f5f5;
  20.             height: 148px;
  21.             width: 97px;
  22.             background-color: #f5f5f5;
  23.             cursor: default;
  24.         }
  25.             .div-box div
  26.             {
  27.                 float: left;
  28.                 margin-top: 15px;
  29.                 margin-left: 9px;
  30.                 height: 120px;
  31.                 width: 80px;
  32.                 line-height: 120px;
  33.                 font-size: 16px;
  34.                 font-family: 黑体;
  35.                 text-align: center;
  36.             }
  37.         .ul-instructions
  38.         {
  39.             float: left;
  40.             width: 200px;
  41.             padding: 0;
  42.             margin: 0;
  43.             margin-left: 10px;
  44.             margin-top: 10px;
  45.             margin-bottom: 10px;
  46.         }
  47.             .ul-instructions li
  48.             {
  49.                 float: left;
  50.                 list-style: none;
  51.                 width: 200px;
  52.                 line-height: 25px;
  53.                 font-size: 12px;
  54.                 margin: 0;
  55.                 padding: 3px;
  56.             }
  57.                 .ul-instructions li div
  58.                 {
  59.                     float: left;
  60.                 }
  61.         .div-road
  62.         {
  63.             float: left;
  64.             height: 130px;
  65.             width: 100px;
  66.             margin-left: 20px;
  67.             margin-top: 20px;
  68.         }
  69.         .table-road
  70.         {
  71.             background-color: #ffff00;
  72.             border: solid 1px #999;
  73.         }
  74.         .div-highlight
  75.         {
  76.             border: solid 1px #6dbde4 !important;
  77.             background-color: #dceaf2 !important;
  78.         }
  79.         .img-btn
  80.         {
  81.             cursor: pointer;
  82.             margin: 3px;
  83.         }
  84.         .img-btn2
  85.         {
  86.             cursor: pointer;
  87.             margin-left: 10px;
  88.         }
  89.         .table-addroads
  90.         {
  91.             width: 100%;
  92.         }
  93.             .table-addroads tr td:first-child
  94.             {
  95.                 text-align: right;
  96.             }
  97.             .table-addroads tr td
  98.             {
  99.                 height: 30px;
  100.                 padding: 3px;
  101.             }
  102.     </style>
  103.     <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
  104.     <script type="text/javascript" src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
  105.     <script type="text/javascript" src="~/Scripts/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
  106.     <script type="text/javascript" src="~/Scripts/SimpoWindow.js"></script>
  107.     <script type="text/javascript">
  108.         $(function () {
  109.             $("#tdboxs").load("Boxs?cargoCode=" + '@ViewBag.cargoCode', function (data) {
  110.                 $(".div-box:first").click();
  111.             });
  112.         });
  113.         //显示货柜的货道
  114.         function showBox(obj, boxId) {
  115.             $(".div-box").removeClass("div-highlight");
  116.             $(obj).addClass("div-highlight");
  117.             $("#divfloors").load("Floors?boxId=" + boxId);
  118.         }
  119.         //添加货柜
  120.         function addbox(addType) {
  121.             if (confirm("确定添加？")) {
  122.                 var cargoCode = '@ViewBag.cargoCode';
  123.                 var floorType = $("input[name='floorType']:checked").val();
  124.                 $.ajax({
  125.                     type: "POST",
  126.                     url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddBox")",
  127.                     data: { "addType": addType, "cargoCode": cargoCode, "floorType": floorType },
  128.                     success: function (d) {
  129.                         var data = eval("(" + d + ")");
  130.                         if (data.ok) {
  131.                             $("#tdboxs").load("Boxs?cargoCode=" + cargoCode, function (data) {
  132.                                 if (addType == 1) {
  133.                                     $(".div-box:first").click();
  134.                                 } else {
  135.                                     $(".div-box:last").click();
  136.                                 }
  137.                             });
  138.                         } else {
  139.                             alert("添加失败：" + data.msg);
  140.                         }
  141.                     },
  142.                     error: function () {
  143.                         alert("添加失败");
  144.                     }
  145.                 });
  146.             }
  147.         }
  148.         //删除货柜
  149.         function delbox(addType) {
  150.             if (confirm("确定删除？")) {
  151.                 var cargoCode = '@ViewBag.cargoCode';
  152.                 $.ajax({
  153.                     type: "POST",
  154.                     url: "@Url.Content("~/Backstage/MachineMng/RoadSet/DelBox")",
  155.                     data: { "addType": addType, "cargoCode": cargoCode },
  156.                     success: function (data) {
  157.                         if (data == "ok") {
  158.                             if (addType == 1) {
  159.                                 $(".div-box:first").remove();
  160.                             }
  161.                             else {
  162.                                 $(".div-box:last").remove();
  163.                             }
  164.                             $(".div-box:first").click();
  165.                         }
  166.                         else {
  167.                             alert("删除失败" + data);
  168.                         }
  169.                     },
  170.                     error: function () {
  171.                         alert("删除失败");
  172.                     }
  173.                 });
  174.             }
  175.         }
  176.         //添加货道
  177.         function addroad(obj, boxId, floor) {
  178.             $.ajax({
  179.                 type: "POST",
  180.                 url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddRoad")",
  181.                 data: { "boxId": boxId, "floor": floor },
  182.                 success: function (d) {
  183.                     var data = eval("(" + d + ")");
  184.                     if (data.ok) {
  185.                         var td = $(obj).parent().parent().parent().parent().find("td:first");
  186.                         td.find("#divroads_" + floor).load("Roads?boxId=" + boxId + "&floor=" + floor);
  187.                         var roadNum = parseInt(td.find(".span-roadNum").text(), 10);
  188.                         td.find(".span-roadNum").html((roadNum + 1).toString());
  189.                     } else {
  190.                         alert("添加失败：" + data.msg);
  191.                     }
  192.                 },
  193.                 error: function () {
  194.                     alert("添加失败");
  195.                 }
  196.             });
  197.         }
  198.         //删除货道
  199.         function delroad(obj, boxId, floor) {
  200.             if (confirm("确定删除？")) {
  201.                 $.ajax({
  202.                     type: "POST",
  203.                     url: "@Url.Content("~/Backstage/MachineMng/RoadSet/DelRoad")",
  204.                     data: { "boxId": boxId, "floor": floor },
  205.                     success: function (data) {
  206.                         if (data == "ok") {
  207.                             var td = $(obj).parent().parent().parent().parent().find("td:first");
  208.                             td.find(".div-road:last").remove();
  209.                             var roadNum = parseInt(td.find(".span-roadNum").text(), 10);
  210.                             if (roadNum > 0) {
  211.                                 td.find(".span-roadNum").html((roadNum - 1).toString());
  212.                             }
  213.                         }
  214.                         else {
  215.                             alert("删除失败" + data);
  216.                         }
  217.                     },
  218.                     error: function () {
  219.                         alert("删除失败");
  220.                     }
  221.                 });
  222.             }
  223.         }
  224.         //添加货道层
  225.         function addfloor(obj, boxId) {
  226.             $.ajax({
  227.                 type: "POST",
  228.                 url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddFloor")",
  229.                 data: { "boxId": boxId },
  230.                 success: function (d) {
  231.                     var data = eval("(" + d + ")");
  232.                     if (data.ok) {
  233.                         $("#divfloors").load("Floors?boxId=" + boxId);
  234.                         var div = $(obj).parent().parent();
  235.                         var floorNum = parseInt(div.find(".span-floorNum").text(), 10);
  236.                         div.find(".span-floorNum").html((floorNum + 1).toString());
  237.                     } else {
  238.                         alert("添加失败：" + data.msg);
  239.                     }
  240.                 },
  241.                 error: function () {
  242.                     alert("添加失败");
  243.                 }
  244.             });
  245.         }
  246.         //删除货道层
  247.         function delfloor(obj, boxId) {
  248.             if ($(obj).parent().parent().find(".table-floor").length < 2) return;
  249.             if (confirm("确定删除？")) {
  250.                 $.ajax({
  251.                     type: "POST",
  252.                     url: "@Url.Content("~/Backstage/MachineMng/RoadSet/DelFloor")",
  253.                     data: { "boxId": boxId },
  254.                     success: function (d) {
  255.                         var data = eval("(" + d + ")");
  256.                         if (data.ok) {
  257.                             var div = $(obj).parent().parent();
  258.                             div.find(".table-floor:last").remove();
  259.                             var floorNum = parseInt(div.find(".span-floorNum").text(), 10);
  260.                             div.find(".span-floorNum").html((floorNum - 1).toString());
  261.                         } else {
  262.                             alert("删除失败：" + data.msg);
  263.                         }
  264.                     },
  265.                     error: function () {
  266.                         alert("删除失败");
  267.                     }
  268.                 });
  269.             }
  270.         }
  271.         //批量添加货道
  272.         function addroads(obj, boxId, floor) {
  273.             SimpoWin.showWin2("更换货箱", "addroads", 240, 170);
  274.             var btnOK = $(".table-addroads").find("input[type='button']");
  275.             btnOK.bind("click", function () {
  276.                 var roadNum = $("select[name='roadNum']").find("option:selected").val();
  277.                 var roadSpec = $("select[name='roadSpec']").find("option:selected").val();
  278.                 $.ajax({
  279.                     type: "POST",
  280.                     url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddRoads")",
  281.                     data: { "boxId": boxId, "floor": floor, "roadNum": roadNum, "roadSpec": roadSpec },
  282.                     success: function (d) {
  283.                         var data = eval("(" + d + ")");
  284.                         if (data.ok) {
  285.                             var td = $(obj).parent().parent();
  286.                             td.find("#divroads_" + floor).load("Roads?boxId=" + boxId + "&floor=" + floor);
  287.                             td.find(".span-roadNum").html(data.roadNum.toString());
  288.                         } else {
  289.                             alert("添加失败：" + data.msg);
  290.                         }
  291.                     },
  292.                     error: function () {
  293.                         alert("添加失败");
  294.                     }
  295.                 });
  296.                 btnOK.unbind("click");
  297.                 SimpoWin.closeWin2("addroads");
  298.             });
  299.         }
  300.     </script>
  301. </head>
  302. <body>
  303.     <div style="height: 30px; line-height: 30px; padding-top: 5px; border-left: solid 1px #999; border-right: solid 1px #999; text-align: center;">
  304.         客户喜好
  305.         <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
  306.         商品
  307.         <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
  308.         选择货道
  309.         <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
  310.         摆放商品
  311.         <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
  312.         完成货道商品绑定
  313.     </div>
  314.     <div id="divbox" style="border: solid 1px #999; border-top: 0; border-bottom: none;">
  315.         <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
  316.             <tr>
  317.                 <td style="width: 260px;">
  318.                     <ul class="ul-instructions">
  319.                         <li>
  320.                             <div style="height: 25px; width: 25px; background-color: yellow;"></div>
  321.                             <div style="height: 25px; margin-left: 10px;">黄色：表示更换货道</div>
  322.                         </li>
  323.                         <li>
  324.                             <div style="height: 25px; width: 25px; background-color: green;"></div>
  325.                             <div style="height: 25px; margin-left: 10px;">绿色：表示上货数量</div>
  326.                         </li>
  327.                         <li>
  328.                             <div style="height: 25px; width: 25px; background-color: red;"></div>
  329.                             <div style="height: 25px; margin-left: 10px;">红色：表示现有商品数</div>
  330.                         </li>
  331.                         <li>
  332.                             <div style="height: 25px; width: 25px; background-color: gray;"></div>
  333.                             <div style="height: 25px; margin-left: 10px;">灰色：表示最大商品数</div>
  334.                         </li>
  335.                         <li>
  336.                             <div style="height: 23px; width: 23px; border: solid 1px #000; text-align: center;">调</div>
  337.                             <div style="height: 25px; margin-left: 10px;">调：表示调换本商品</div>
  338.                         </li>
  339.                         <li>
  340.                             <div style="height: 23px; width: 23px; border: solid 1px #000; text-align: center;">换</div>
  341.                             <div style="height: 25px; margin-left: 10px;">换：表示更换商品种类</div>
  342.                         </li>
  343.                     </ul>
  344.                 </td>
  345.                 <td>
  346.                     <div style="float: left;">
  347.                         <div style="text-align: center; margin-top: 25px;">
  348.                             <img onclick="addbox(1)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
  349.                         </div>
  350.                         <div style="margin-top: 50px; text-align: center;">
  351.                             <img onclick="delbox(1)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")"  />
  352.                         </div>
  353.                     </div>
  354.                 </td>
  355.                 <!--货柜-->
  356.                 <td id="tdboxs">&nbsp;
  357.                 </td>
  358.                 <td>
  359.                     <div style="float: left;">
  360.                         <div style="text-align: center; margin-top: 25px;">
  361.                             <img onclick="addbox(2)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
  362.                         </div>
  363.                         <div style="margin-top: 50px; text-align: center;">
  364.                             <img onclick="delbox(2)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")"  />
  365.                         </div>
  366.                     </div>
  367.                 </td>
  368.             </tr>
  369.             <tr>
  370.                 <td>&nbsp;</td>
  371.                 <td>&nbsp;</td>
  372.                 <td style="text-align: right;">
  373.                     <input name="floorType" value="1" type="radio" checked="checked" />横箱<input name="floorType" value="0" type="radio" />竖箱</td>
  374.                 <td>&nbsp;</td>
  375.             </tr>
  376.         </table>
  377.     </div>
  378.     <!--货道层-->
  379.     <div id="divfloors"></div>
  380.     <!-- 分隔线 -------------------------------------------------------------------------------------->
  381.     <div id="addroads" style="display: none;">
  382.         <div style="padding: 10px;">
  383.             <table class="table-addroads" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  384.                 <tr>
  385.                     <td style="width: 80px;">货道数：</td>
  386.                     <td>
  387.                         <select name="roadNum">
  388.                             <option value="4">4货道</option>
  389.                             <option value="6">6货道</option>
  390.                             <option value="8">8货道</option>
  391.                             <option value="10">10货道</option>
  392.                         </select>
  393.                     </td>
  394.                 </tr>
  395.                 <tr>
  396.                     <td>货道型号：</td>
  397.                     <td>
  398.                         <select name="roadSpec">
  399.                             <option value="C25/80">C25/80</option>
  400.                             <option value="C10/50">C10/50</option>
  401.                             <option value="C30/85">C30/85</option>
  402.                             <option value="C15/75">C15/75</option>
  403.                         </select>
  404.                     </td>
  405.                 </tr>
  406.                 <tr>
  407.                     <td colspan="2" style="text-align: center;">
  408.                         <input type="button" value="确定" />
  409.                     </td>
  410.                 </tr>
  411.             </table>
  412.         </div>
  413.     </div>
  414. </body>
  415. </html>

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

Boxs.cshtml页面代码：

  1.  
  2. @using System.Data;
  3. @using DAL;
  4. @{
  5.     BoxInfoDal boxInfoDal = new BoxInfoDal();
  6.     string cargoCode = ViewBag.cargoCode;
  7.     DataTable dtLeftBox = boxInfoDal.GetListByBoxCodeDesc(cargoCode, 1);
  8.     DataTable dtRightBox = boxInfoDal.GetList(cargoCode, 2);
  9. }
  10. @foreach (System.Data.DataRow dr in dtLeftBox.Rows)
  11. {
  12.     <div class="div-box" onclick="showBox(this,'@dr["id"].ToString()')">
  13.         <div style="background: url(@Url.Content("~/Images/Cargo/yougui.png")) no-repeat;">
  14.             @boxInfoDal.GetName(dr["cargoCode"].ToString())
  15.         </div>
  16.     </div>
  17. }
  18. <div id="divMainBox" style="float: left; height: 150px; width: 99px;">
  19.     <img alt="" src="@Url.Content("~/Images/Cargo/zhugui.png")" />
  20. </div>
  21. @foreach (System.Data.DataRow dr in dtRightBox.Rows)
  22. {
  23.     <div class="div-box" onclick="showBox(this,'@dr["id"].ToString()')">
  24.         <div style="background: url(@Url.Content("~/Images/Cargo/yougui.png")) no-repeat;">
  25.             @boxInfoDal.GetName(dr["cargoCode"].ToString())
  26.         </div>
  27.     </div>
  28. }

Floors.cshtml页面代码：

  1.  
  2. @using System.Data;
  3. @using DAL;
  4. @{
  5.     BoxInfoDal boxInfoDal = new BoxInfoDal();
  6.     string boxId = ViewBag.boxId;
  7.     DataRow drBox = boxInfoDal.Get(boxId).Rows[0];
  8.     string boxCode = drBox["cargoCode"].ToString();
  9.     string floorNum = drBox["floorNum"].ToString();
  10.     string floorType = drBox["floorType"].ToString();
  11. }
  12. <script type="text/javascript">
  13.     $(function () {
  14.         $("input[name='floorType'][value='" + @floorType + "']").attr("checked", "checked");
  15.         for (var i = 1; i <= parseInt('@floorNum', 10) ; i++) {
  16.             $("#divroads_" + i).load("Roads?boxId=" + '@boxId' + "&floor=" + i);
  17.         }
  18.     });
  19. </script>
  20. <div style="border-left: solid 1px #999; border-right: solid 1px #999; border-top: 0;">
  21.     <div style="padding: 10px; border-bottom: solid 1px #000;">
  22.         <div style="float: left; height: 20px; line-height: 20px;">
  23.             设置 @boxInfoDal.GetName(boxCode) 货道层数： <span class="span-floorNum">@floorNum</span>层
  24.         </div>
  25.         <img onclick="addfloor(this, '@boxId')" alt="" class="img-btn2" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
  26.         <img onclick="delfloor(this, '@boxId')" alt="" class="img-btn2" src="@Url.Content("~/Images/Cargo/roadset_Del.png")"  />
  27.     </div>
  28.     @for (int i = 1; i <= int.Parse(floorNum); i++)
  29.     {
  30.         DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, i);
  31.         <table class="table-floor" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-bottom: solid 1px #999; width: 100%;">
  32.             <tr>
  33.                 <td style="padding: 10px; padding-bottom: 20px; vertical-align: top;">
  34.                     <div style="padding: 10px;">
  35.                         设置第 @i 层货道数：  <span class="span-roadNum">@dtRoadList.Rows.Count</span>
  36.                         <button onclick="addroads(this,'@boxId',@i)" style="margin-left: 20px;" >更换货箱</button>
  37.                     </div>
  38.                     <!--货道-->
  39.                     <div id="divroads_@i"></div>
  40.                 </td>
  41.                 <td>
  42.                     <div style="float: right;">
  43.                         <div style="text-align: center; margin-top: 15px;">
  44.                             <img onclick="addroad(this,'@boxId',@i)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
  45.                         </div>
  46.                         <div style="margin-top: 50px; text-align: center;">
  47.                             <img onclick="delroad(this,'@boxId',@i)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")"  />
  48.                         </div>
  49.                     </div>
  50.                 </td>
  51.             </tr>
  52.         </table>
  53.     }
  54. </div>

Roads.cshtml页面代码：

  1.  
  2. @using System.Data;
  3. @using DAL;
  4. @{
  5.     BoxInfoDal boxInfoDal = new BoxInfoDal();
  6.     string boxId = ViewBag.boxId;
  7.     int floor = ViewBag.floor;
  8.     DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, floor);
  9.     int j = 0;
  10. }
  11. @foreach (System.Data.DataRow drRoad in dtRoadList.Rows)
  12. {
  13.     j++;
  14.     <div class="div-road">
  15.         <table class="table-road" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
  16.             <tr>
  17.                 <td>
  18.                     <div style="margin: 2px;">@boxInfoDal.NumToABCD(floor)@j.ToString()</div>
  19.                 </td>
  20.             </tr>
  21.             <tr>
  22.                 <td>
  23.                     <div style="margin: 2px;">货道 @drRoad["roadSpec"].ToString()</div>
  24.                 </td>
  25.             </tr>
  26.             <tr style="line-height: 11px;">
  27.                 <td>&nbsp;</td>
  28.             </tr>
  29.             <tr>
  30.                 <td style="text-align: center;">
  31.                     <input value="0" type="text" style="height: 17px; width: 25px; text-align: center;" />
  32.                 </td>
  33.             </tr>
  34.             <tr>
  35.                 <td style="text-align: center;">现
  36.                                                     <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" />
  37.                     大
  38.                 </td>
  39.             </tr>
  40.             <tr>
  41.                 <td style="text-align: center; font-weight: bold;">
  42.                     <div style="margin-top: 5px;">@drRoad["productName"].ToString()&nbsp;</div>
  43.                 </td>
  44.             </tr>
  45.             <tr>
  46.                 <td style="text-align: center;">
  47.                     <div style="position: relative; float: right; margin-right: -1px; margin-bottom: -1px; border: solid 1px #000; padding: 3px; cursor: pointer; background-color: white;">调</div>
  48.                 </td>
  49.             </tr>
  50.         </table>
  51.     </div>
  52. }

控制器代码：

  1.  
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Data;
  5. using System.Linq;
  6. using System.Text;
  7. using System.Web.Mvc;
  8. using DAL;
  9. using Newtonsoft.Json;
  10. namespace Controllers.Backstage.MachineMng
  11. {
  12.     /// <summary>
  13.     /// 货道设置
  14.     /// </summary>
  15.     public class RoadSetController : AdminBaseController
  16.     {
  17.         #region 构造函数及变量
  18.         private SQLiteHelper.SQLiteHelper sqliteHelper;
  19.         private BoxInfoDal boxInfoDal;
  20.         private CargoInformationDal cargoInformationDal;
  21.         public RoadSetController()
  22.         {
  23.             sqliteHelper = new SQLiteHelper.SQLiteHelper();
  24.             boxInfoDal = new BoxInfoDal();
  25.             cargoInformationDal = new CargoInformationDal();
  26.         }
  27.         #endregion
  28.         #region Index页面
  29.         public ActionResult Index()
  30.         {
  31.             ViewBag.cargoCode = "112";
  32.             return View();
  33.         }
  34.         #endregion
  35.         #region Boxs页面
  36.         public ActionResult Boxs(string cargoCode)
  37.         {
  38.             ViewBag.cargoCode = cargoCode;
  39.             return View();
  40.         }
  41.         #endregion
  42.         #region Floors页面
  43.         public ActionResult Floors(string boxId)
  44.         {
  45.             ViewBag.boxId = boxId;
  46.             return View();
  47.         }
  48.         #endregion
  49.         #region Roads页面
  50.         public ActionResult Roads(string boxId, int floor)
  51.         {
  52.             ViewBag.boxId = boxId;
  53.             ViewBag.floor = floor;
  54.             return View();
  55.         }
  56.         #endregion
  57.         #region 添加贷柜
  58.         public ActionResult AddBox(int addType, string cargoCode, string floorType)
  59.         {
  60.             DataTable dtCargo = cargoInformationDal.Get(cargoCode);
  61.             DataRow drCargo = dtCargo.Rows[0];
  62.             string boxId = Guid.NewGuid().ToString();
  63.             string positionNum = null;
  64.             string boxCode = null; //货柜编号
  65.             DataTable dtLeftBoxList = boxInfoDal.GetList(cargoCode, addType);
  66.             boxCode = addType.ToString() + (dtLeftBoxList.Rows.Count + 1).ToString("00");
  67.             positionNum = addType.ToString() + (dtLeftBoxList.Rows.Count + 1).ToString("00");
  68.             StringBuilder sql = new StringBuilder();
  69.             //插入货柜表
  70.             sql.AppendFormat(@"
  71.                 insert into
  72.                 mas_box_info(id, shopId, positionNum, cargoCode, floorType, floorNum, delFlag, addTime,    addUserId, addMark)
  73.                 values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}');",
  74.                 boxId, drCargo["shopId"].ToString(), positionNum, boxCode, floorType, 1, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
  75.             //插入关联表
  76.             sql.AppendFormat(@"
  77.                 insert into
  78.                 mas_cargo_container(id, boxId, positionNum, cargoCode, positionDescription, xCoordinate, yCoordinate, delFlag, addTime, addUserId, addMark)
  79.                 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);
  80.             sqliteHelper.BeginTransaction();
  81.             try
  82.             {
  83.                 sqliteHelper.Execute(sql.ToString());
  84.                 sqliteHelper.Commit();
  85.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  86.                 dic["ok"] = true;
  87.                 dic["id"] = boxId;
  88.                 dic["name"] = (addType == 1 ? "左" : "右") + (dtLeftBoxList.Rows.Count + 1) + "柜";
  89.                 return Content(JsonConvert.SerializeObject(dic));
  90.             }
  91.             catch (Exception ex)
  92.             {
  93.                 sqliteHelper.Rollback();
  94.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  95.                 dic["ok"] = false;
  96.                 dic["msg"] = ex.Message;
  97.                 return Content(JsonConvert.SerializeObject(dic));
  98.             }
  99.         }
  100.         #endregion
  101.         #region 删除贷柜
  102.         public ActionResult DelBox(int addType, string cargoCode)
  103.         {
  104.             DataTable dtCargo = cargoInformationDal.Get(cargoCode);
  105.             DataRow drCargo = dtCargo.Rows[0];
  106.             string boxId = null;
  107.             string boxCode = null; //货柜编号
  108.             DataTable dtLeftBoxList = boxInfoDal.GetList(cargoCode, addType);
  109.             boxCode = addType.ToString() + dtLeftBoxList.Rows.Count.ToString("00");
  110.             foreach (DataRow dr in dtLeftBoxList.Rows)
  111.             {
  112.                 if (dr["cargoCode"].ToString() == boxCode)
  113.                 {
  114.                     boxId = dr["id"].ToString();
  115.                 }
  116.             }
  117.             if (boxId == null)
  118.             {
  119.                 return Content("");
  120.             }
  121.             StringBuilder sql = new StringBuilder();
  122.             //删除货柜
  123.             sql.AppendFormat(@"
  124.                 delete from mas_box_info
  125.                 where id='{0}';", boxId);
  126.             //删除货机货柜关联
  127.             sql.AppendFormat(@"
  128.                 delete from mas_cargo_container
  129.                 where boxid='{0}';", boxId);
  130.             //删除货道
  131.             sql.AppendFormat(@"
  132.                 delete from mas_box_road_info
  133.                 where id in
  134.                 (select roadId from mas_container_cargo_road
  135.                 where containerId='{0}');", boxId);
  136.             //删除货柜货道关联
  137.             sql.AppendFormat(@"
  138.                 delete from mas_container_cargo_road
  139.                 where containerId='{0}';", boxId);
  140.             sqliteHelper.BeginTransaction();
  141.             try
  142.             {
  143.                 sqliteHelper.Execute(sql.ToString());
  144.                 sqliteHelper.Commit();
  145.                 return Content("ok");
  146.             }
  147.             catch (Exception ex)
  148.             {
  149.                 sqliteHelper.Rollback();
  150.                 return Content("错误：" + ex.Message);
  151.             }
  152.         }
  153.         #endregion
  154.         #region 添加货道
  155.         public ActionResult AddRoad(string boxId, int floor)
  156.         {
  157.             string roadId = Guid.NewGuid().ToString();
  158.             DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, floor);
  159.             string roadNo = boxInfoDal.NumToABCD(floor) + (dtRoadList.Rows.Count + 1).ToString();
  160.             StringBuilder sql = new StringBuilder();
  161.             //插入货道表
  162.             sql.AppendFormat(@"
  163.                 insert into
  164.                 mas_box_road_info(id, roadNO, roadSpec, existProductNum, maxProductNum, productID, delFlag, addTime, addUserId, addMark)
  165.                 values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}');",
  166.                 roadId, roadNo, "C20/75", 0, 10, -1, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
  167.             //插入关联表
  168.             sql.AppendFormat(@"
  169.                 insert into
  170.                 mas_container_cargo_road(id, containerId, layerNo, roadId, sort, delFlag, addTime, addUserId, addMark)
  171.                 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);
  172.             sqliteHelper.BeginTransaction();
  173.             try
  174.             {
  175.                 sqliteHelper.Execute(sql.ToString());
  176.                 sqliteHelper.Commit();
  177.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  178.                 dic["ok"] = true;
  179.                 dic["id"] = roadId;
  180.                 dic["roadNo"] = roadNo;
  181.                 dic["roadSpec"] = "C20/75";
  182.                 dic["maxProductNum"] = "10";
  183.                 return Content(JsonConvert.SerializeObject(dic));
  184.             }
  185.             catch (Exception ex)
  186.             {
  187.                 sqliteHelper.Rollback();
  188.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  189.                 dic["ok"] = false;
  190.                 dic["msg"] = ex.Message;
  191.                 return Content(JsonConvert.SerializeObject(dic));
  192.             }
  193.         }
  194.         #endregion
  195.         #region 删除货道
  196.         public ActionResult DelRoad(string boxId, int floor)
  197.         {
  198.             DataTable dtRoad = boxInfoDal.GetRoadLast(boxId, floor);
  199.             if (dtRoad.Rows.Count > 0)
  200.             {
  201.                 string roadId = dtRoad.Rows[0]["id"].ToString();
  202.                 StringBuilder sql = new StringBuilder();
  203.                 //删除货道
  204.                 sql.AppendFormat(@"
  205.                     delete from mas_box_road_info
  206.                     where id='{0}';", roadId);
  207.                 //删除货柜货道关联
  208.                 sql.AppendFormat(@"
  209.                     delete from mas_container_cargo_road
  210.                     where roadId='{0}';", roadId);
  211.                 sqliteHelper.BeginTransaction();
  212.                 try
  213.                 {
  214.                     sqliteHelper.Execute(sql.ToString());
  215.                     sqliteHelper.Commit();
  216.                     return Content("ok");
  217.                 }
  218.                 catch (Exception ex)
  219.                 {
  220.                     sqliteHelper.Rollback();
  221.                     return Content("错误：" + ex.Message);
  222.                 }
  223.             }
  224.             else
  225.             {
  226.                 return Content("ok");
  227.             }
  228.         }
  229.         #endregion
  230.         #region 添加货道层
  231.         public ActionResult AddFloor(string boxId)
  232.         {
  233.             DataTable dtBox = boxInfoDal.Get(boxId);
  234.             int floorNum = int.Parse(dtBox.Rows[0]["floorNum"].ToString());
  235.             StringBuilder sql = new StringBuilder();
  236.             //修改货柜信息
  237.             sql.AppendFormat(@"
  238.                 update mas_box_info
  239.                 set floorNum={1}
  240.                 where id='{0}';", boxId, floorNum + 1);
  241.             sqliteHelper.BeginTransaction();
  242.             try
  243.             {
  244.                 sqliteHelper.Execute(sql.ToString());
  245.                 sqliteHelper.Commit();
  246.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  247.                 dic["ok"] = true;
  248.                 dic["name"] = boxInfoDal.GetName(dtBox.Rows[0]["cargoCode"].ToString());
  249.                 dic["floorNum"] = floorNum + 1;
  250.                 return Content(JsonConvert.SerializeObject(dic));
  251.             }
  252.             catch (Exception ex)
  253.             {
  254.                 sqliteHelper.Rollback();
  255.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  256.                 dic["ok"] = false;
  257.                 dic["msg"] = ex.Message;
  258.                 return Content(JsonConvert.SerializeObject(dic));
  259.             }
  260.         }
  261.         #endregion
  262.         #region 删除货道层
  263.         public ActionResult DelFloor(string boxId)
  264.         {
  265.             DataTable dtBox = boxInfoDal.Get(boxId);
  266.             int floorNum = int.Parse(dtBox.Rows[0]["floorNum"].ToString());
  267.             StringBuilder sql = new StringBuilder();
  268.             //修改货柜信息
  269.             sql.AppendFormat(@"
  270.                 update mas_box_info
  271.                 set floorNum={1}
  272.                 where id='{0}';", boxId, floorNum - 1);
  273.             //删除货道
  274.             sql.AppendFormat(@"
  275.                     delete from mas_box_road_info
  276.                     where id in
  277.                     (select road.id
  278.                     from mas_box_road_info road
  279.                     left join mas_container_cargo_road ccr on ccr.roadId=road.id
  280.                     where ccr.layerNo={0}
  281.                     and ccr.containerId='{1}');", floorNum, boxId);
  282.             //删除货柜货道关联
  283.             sql.AppendFormat(@"
  284.                     delete from mas_container_cargo_road
  285.                     where roadId in
  286.                     (select road.id
  287.                     from mas_box_road_info road
  288.                     left join mas_container_cargo_road ccr on ccr.roadId=road.id
  289.                     where ccr.layerNo={0}
  290.                     and ccr.containerId='{1}');", floorNum, boxId);
  291.             sqliteHelper.BeginTransaction();
  292.             try
  293.             {
  294.                 if (floorNum > 1)
  295.                 {
  296.                     sqliteHelper.Execute(sql.ToString());
  297.                     sqliteHelper.Commit();
  298.                 }
  299.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  300.                 dic["ok"] = true;
  301.                 return Content(JsonConvert.SerializeObject(dic));
  302.             }
  303.             catch (Exception ex)
  304.             {
  305.                 sqliteHelper.Rollback();
  306.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  307.                 dic["ok"] = false;
  308.                 dic["msg"] = ex.Message;
  309.                 return Content(JsonConvert.SerializeObject(dic));
  310.             }
  311.         }
  312.         #endregion
  313.         #region 更换货箱
  314.         public ActionResult AddRoads(string boxId, int floor, int roadNum, string roadSpec)
  315.         {
  316.             StringBuilder sql = new StringBuilder();
  317.             //删除货道
  318.             sql.AppendFormat(@"
  319.                     delete from mas_box_road_info
  320.                     where id in
  321.                     (select road.id
  322.                     from mas_box_road_info road
  323.                     left join mas_container_cargo_road ccr on ccr.roadId=road.id
  324.                     where ccr.layerNo={0}
  325.                     and ccr.containerId='{1}');", floor, boxId);
  326.             //删除货柜货道关联
  327.             sql.AppendFormat(@"
  328.                     delete from mas_container_cargo_road
  329.                     where roadId in
  330.                     (select road.id
  331.                     from mas_box_road_info road
  332.                     left join mas_container_cargo_road ccr on ccr.roadId=road.id
  333.                     where ccr.layerNo={0}
  334.                     and ccr.containerId='{1}');", floor, boxId);
  335.             for (int i = 1; i <= roadNum; i++)
  336.             {
  337.                 string roadId = Guid.NewGuid().ToString();
  338.                 //插入货道表
  339.                 sql.AppendFormat(@"
  340.                 insert into
  341.                 mas_box_road_info(id, roadNO, roadSpec, existProductNum, maxProductNum, productID, delFlag, addTime, addUserId, addMark)
  342.                 values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}');",
  343.                     roadId, i, roadSpec, 0, 10, -1, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
  344.                 //插入关联表
  345.                 sql.AppendFormat(@"
  346.                 insert into
  347.                 mas_container_cargo_road(id, containerId, layerNo, roadId, sort, delFlag, addTime, addUserId, addMark)
  348.                 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);
  349.             }
  350.             sqliteHelper.BeginTransaction();
  351.             try
  352.             {
  353.                 sqliteHelper.Execute(sql.ToString());
  354.                 sqliteHelper.Commit();
  355.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  356.                 dic["ok"] = true;
  357.                 dic["roadNo"] = boxInfoDal.NumToABCD(floor);
  358.                 dic["roadNum"] = roadNum;
  359.                 dic["maxProductNum"] = "10";
  360.                 return Content(JsonConvert.SerializeObject(dic));
  361.             }
  362.             catch (Exception ex)
  363.             {
  364.                 sqliteHelper.Rollback();
  365.                 Dictionary<string, object> dic = new Dictionary<string, object>();
  366.                 dic["ok"] = false;
  367.                 dic["msg"] = ex.Message;
  368.                 return Content(JsonConvert.SerializeObject(dic));
  369.             }
  370.         }
  371.         #endregion
  372.     }
  373. }

效果图：

 
分类: ASP.NET MVC
标签: ASP.NET MVC

ASP.NET MVC局部视图的更多相关文章

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

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

  2. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  3. ASP.NET MVC必知必会知识点总结（二）

    一.实现Controller的依赖注入: 1.自定义继承DefaultControllerFactory 类的控制器工厂类并重写GetControllerInstance方法:(如:InjectCon ...

  4. ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素

    阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...

  5. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  6. asp.net mvc 4 高级编程学习笔记：第三章 视图（2）

    页面布局 asp.net MVC中提供了布局的支持,默认情况下才布局文件保存到 /View/Shared/目录下的_Layout.cshtml,View目录有个_ViewStart.cshtml文件, ...

  7. asp.net mvc 如何调用微信jssdk接口：分享到微信朋友（圈）| 分享到qq空间

    如何在asp.net mvc 项目里, 调用微信jssdk接口,现实功能: 分享到微信朋友(圈)| 分享到qq空间 1 创建一个Action,准备一些数据,初始化数据(签名): /// <sum ...

  8. ASP.NET MVC分页实现之改进版-增加同一个视图可设置多个分页

    我之前就已经实现了ASP.NET MVC分页(查看该博文),但它有局限性,必须确保在同一个视图中只能有一处分页,若需要在同一个视图中设置多个分页,却无能为力,为此,我重新对原先的代码进行了优化,增加了 ...

  9. ASP.NET MVC分页实现

    ASP.NET MVC中不能使用分页控件,所以我就自己写了一个分页局部视图,配合PageInfo类,即可实现在任何页面任意位置呈现分页,由于采用的是基于POST分页方式,所以唯一的限制就是必须放在FO ...

随机推荐

  1. React-Native基础教程

    React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...

  2. Android应用UI架构

    这个标题听起来可能有点大.事实上这里主要就是讨论一个应用程序的UI组件,是全用Activity还是全用Fragment.或者是二者皆有.以及使用Activity和Fragment的一些注意事项.  A ...

  3. 对于C11中的正則表達式的使用

    Regular Expression Special Characters "."---Any single character(a "wildcard") & ...

  4. [WebGL入门]四，渲染准备

    注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家 ...

  5. Python脚本传參和Python中调用mysqldump

    Python脚本传參和Python中调用mysqldump<pre name="code" class="python">#coding=utf-8 ...

  6. 泛泰A900 刷4.4中国民营TWRP2.7.1.1版本 支持自己主动识别移动版本号（世界上第一）

    因本人手上的A900S已砖, 所以临时弄不了ROM了. 先上传之前已经弄好的刷4.4专用的新版TWRP recovery 2.7.1.1  这个版本号是我自己定义的,为差别之前公布的2.7.0.0版( ...

  7. NSIS：静默释放文件并运行 制作绿色单文件软件

    原文 NSIS:静默释放文件并运行 制作绿色单文件软件 现在所谓的绿色单文件软件,大多与以下代码原理相似:把软件运行需要的文件封装为一个EXE文件,双击时释放到某个目录(大多是TEMP)并运行主程序文 ...

  8. （大数据工程师学习路径）第三步 Git Community Book----高级技能

    一.创建新的空分支 1.创建新的空分支 在偶尔的情况下,你可能会想要保留那些与你的代码没有共同祖先的分支.例如在这些分支上保留生成的文档或者其他一些东西.如果你需要创建一个不使用当前代码库作为父提交的 ...

  9. Group By去除重复数据

    今天在写一个sql,目的是去除表里某一个字段相同的数据,只保留最新的一条.之前group by 用的少.特此记录一下. SELECT * FROM litb_approval_task SELECT ...

  10. 【iOS发展-81】setNeedsDisplay刷新显卡，并CADisplayLink它用来模拟计时器效果

    (1)效果 (2)源码下载(假设提示没有小图片的话,自己找一个替换一下即可,看到效果即可) http://download.csdn.net/detail/wsb200514/8176339 (3)总 ...