zoukankan      html  css  js  c++  java
  • ASP.NET MVC局部视图

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

     

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

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

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

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

    Layout.cshtml页面代码:

     

    @{
    ViewBag.Title = "货机管理";
    }

    <!DOCTYPE html>
    <html>
    <head>
    <title>@ViewBag.Title</title>
    <style type="text/css">
    body
    {
    font-size: 12px;
    padding: 0;
    margin: 0;
    background-color: #666;
    }

    .ul-menu
    {
    float: left;
    margin: 0;
    padding: 0;
    margin-left: 3px;
    }

    .ul-menu li
    {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    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=" 960px; margin: auto; background-color: #fff; padding: 7px;">
    <div style="height: 110px; border: solid 1px #999;">
    <div style="float: left; 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;
    120px;
    height: 35px;
    border: solid 1px #999;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    }

    .div-button2
    {
    float: left;
    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;
    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; 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; 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; 100%; height: 33px; line-height: 33px; text-align: center;">
    <div style="float: left; margin-left: 100px;">
    货机暂停才可以进行以下操作:以下操作完成须启动货机
    </div>
    </div>
    <div style="float: left; 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;
    97px;
    background-color: #f5f5f5;
    cursor: default;
    }

    .div-box div
    {
    float: left;
    margin-top: 15px;
    margin-left: 9px;
    height: 120px;
    80px;
    line-height: 120px;
    font-size: 16px;
    font-family: 黑体;
    text-align: center;
    }

    .ul-instructions
    {
    float: left;
    200px;
    padding: 0;
    margin: 0;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    }

    .ul-instructions li
    {
    float: left;
    list-style: none;
    200px;
    line-height: 25px;
    font-size: 12px;
    margin: 0;
    padding: 3px;
    }

    .ul-instructions li div
    {
    float: left;
    }

    .div-road
    {
    float: left;
    height: 130px;
    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
    {
    100%;
    }

    .table-addroads tr td:first-child
    {
    text-align: right;
    }

    .table-addroads tr td
    {
    height: 30px;
    padding: 3px;
    }
    </style>
    <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/Scripts/SimpoWindow.js"></script>
    <script type="text/javascript">
    $(function () {
    $("#tdboxs").load("Boxs?cargoCode=" + '@ViewBag.cargoCode', function (data) {
    $(".div-box:first").click();
    });
    });

    //显示货柜的货道
    function showBox(obj, boxId) {
    $(".div-box").removeClass("div-highlight");
    $(obj).addClass("div-highlight");

    $("#divfloors").load("Floors?boxId=" + boxId);
    }

    //添加货柜
    function addbox(addType) {
    if (confirm("确定添加?")) {
    var cargoCode = '@ViewBag.cargoCode';
    var floorType = $("input[name='floorType']:checked").val();
    $.ajax({
    type: "POST",
    url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddBox")",
    data: { "addType": addType, "cargoCode": cargoCode, "floorType": floorType },
    success: function (d) {
    var data = eval("(" + d + ")");
    if (data.ok) {
    $("#tdboxs").load("Boxs?cargoCode=" + cargoCode, function (data) {
    if (addType == 1) {
    $(".div-box:first").click();
    } else {
    $(".div-box:last").click();
    }
    });
    } else {
    alert("添加失败:" + data.msg);
    }
    },
    error: function () {
    alert("添加失败");
    }
    });
    }
    }

    //删除货柜
    function delbox(addType) {
    if (confirm("确定删除?")) {
    var cargoCode = '@ViewBag.cargoCode';
    $.ajax({
    type: "POST",
    url: "@Url.Content("~/Backstage/MachineMng/RoadSet/DelBox")",
    data: { "addType": addType, "cargoCode": cargoCode },
    success: function (data) {
    if (data == "ok") {
    if (addType == 1) {
    $(".div-box:first").remove();
    }
    else {
    $(".div-box:last").remove();
    }
    $(".div-box:first").click();
    }
    else {
    alert("删除失败" + data);
    }
    },
    error: function () {
    alert("删除失败");
    }
    });
    }
    }

    //添加货道
    function addroad(obj, boxId, floor) {
    $.ajax({
    type: "POST",
    url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddRoad")",
    data: { "boxId": boxId, "floor": floor },
    success: function (d) {
    var data = eval("(" + d + ")");

    if (data.ok) {
    var td = $(obj).parent().parent().parent().parent().find("td:first");
    td.find("#divroads_" + floor).load("Roads?boxId=" + boxId + "&floor=" + floor);

    var roadNum = parseInt(td.find(".span-roadNum").text(), 10);
    td.find(".span-roadNum").html((roadNum + 1).toString());
    } else {
    alert("添加失败:" + data.msg);
    }
    },
    error: function () {
    alert("添加失败");
    }
    });
    }

    //删除货道
    function delroad(obj, boxId, floor) {
    if (confirm("确定删除?")) {
    $.ajax({
    type: "POST",
    url: "@Url.Content("~/Backstage/MachineMng/RoadSet/DelRoad")",
    data: { "boxId": boxId, "floor": floor },
    success: function (data) {
    if (data == "ok") {
    var td = $(obj).parent().parent().parent().parent().find("td:first");
    td.find(".div-road:last").remove();

    var roadNum = parseInt(td.find(".span-roadNum").text(), 10);
    if (roadNum > 0) {
    td.find(".span-roadNum").html((roadNum - 1).toString());
    }
    }
    else {
    alert("删除失败" + data);
    }
    },
    error: function () {
    alert("删除失败");
    }
    });
    }
    }

    //添加货道层
    function addfloor(obj, boxId) {
    $.ajax({
    type: "POST",
    url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddFloor")",
    data: { "boxId": boxId },
    success: function (d) {
    var data = eval("(" + d + ")");

    if (data.ok) {
    $("#divfloors").load("Floors?boxId=" + boxId);

    var div = $(obj).parent().parent();
    var floorNum = parseInt(div.find(".span-floorNum").text(), 10);
    div.find(".span-floorNum").html((floorNum + 1).toString());
    } else {
    alert("添加失败:" + data.msg);
    }
    },
    error: function () {
    alert("添加失败");
    }
    });
    }

    //删除货道层
    function delfloor(obj, boxId) {
    if ($(obj).parent().parent().find(".table-floor").length < 2) return;

    if (confirm("确定删除?")) {
    $.ajax({
    type: "POST",
    url: "@Url.Content("~/Backstage/MachineMng/RoadSet/DelFloor")",
    data: { "boxId": boxId },
    success: function (d) {
    var data = eval("(" + d + ")");

    if (data.ok) {
    var div = $(obj).parent().parent();
    div.find(".table-floor:last").remove();

    var floorNum = parseInt(div.find(".span-floorNum").text(), 10);
    div.find(".span-floorNum").html((floorNum - 1).toString());
    } else {
    alert("删除失败:" + data.msg);
    }
    },
    error: function () {
    alert("删除失败");
    }
    });
    }
    }

    //批量添加货道
    function addroads(obj, boxId, floor) {
    SimpoWin.showWin2("更换货箱", "addroads", 240, 170);

    var btnOK = $(".table-addroads").find("input[type='button']");
    btnOK.bind("click", function () {
    var roadNum = $("select[name='roadNum']").find("option:selected").val();
    var roadSpec = $("select[name='roadSpec']").find("option:selected").val();

    $.ajax({
    type: "POST",
    url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddRoads")",
    data: { "boxId": boxId, "floor": floor, "roadNum": roadNum, "roadSpec": roadSpec },
    success: function (d) {
    var data = eval("(" + d + ")");

    if (data.ok) {
    var td = $(obj).parent().parent();
    td.find("#divroads_" + floor).load("Roads?boxId=" + boxId + "&floor=" + floor);
    td.find(".span-roadNum").html(data.roadNum.toString());
    } else {
    alert("添加失败:" + data.msg);
    }
    },
    error: function () {
    alert("添加失败");
    }
    });

    btnOK.unbind("click");
    SimpoWin.closeWin2("addroads");
    });
    }
    </script>
    </head>
    <body>
    <div style="height: 30px; line-height: 30px; padding-top: 5px; border-left: solid 1px #999; border-right: solid 1px #999; text-align: center;">
    客户喜好
    <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
    商品
    <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
    选择货道
    <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
    摆放商品
    <img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
    完成货道商品绑定
    </div>
    <div id="divbox" style="border: solid 1px #999; border-top: 0; border-bottom: none;">
    <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; 100%;">
    <tr>
    <td style=" 260px;">
    <ul class="ul-instructions">
    <li>
    <div style="height: 25px; 25px; background-color: yellow;"></div>
    <div style="height: 25px; margin-left: 10px;">黄色:表示更换货道</div>
    </li>
    <li>
    <div style="height: 25px; 25px; background-color: green;"></div>
    <div style="height: 25px; margin-left: 10px;">绿色:表示上货数量</div>
    </li>
    <li>
    <div style="height: 25px; 25px; background-color: red;"></div>
    <div style="height: 25px; margin-left: 10px;">红色:表示现有商品数</div>
    </li>
    <li>
    <div style="height: 25px; 25px; background-color: gray;"></div>
    <div style="height: 25px; margin-left: 10px;">灰色:表示最大商品数</div>
    </li>
    <li>
    <div style="height: 23px; 23px; border: solid 1px #000; text-align: center;">调</div>
    <div style="height: 25px; margin-left: 10px;">调:表示调换本商品</div>
    </li>
    <li>
    <div style="height: 23px; 23px; border: solid 1px #000; text-align: center;">换</div>
    <div style="height: 25px; margin-left: 10px;">换:表示更换商品种类</div>
    </li>
    </ul>
    </td>
    <td>
    <div style="float: left;">
    <div style="text-align: center; margin-top: 25px;">
    <img onclick="addbox(1)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
    </div>
    <div style="margin-top: 50px; text-align: center;">
    <img onclick="delbox(1)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")" />
    </div>
    </div>
    </td>
    <!--货柜-->
    <td id="tdboxs">&nbsp;
    </td>
    <td>
    <div style="float: left;">
    <div style="text-align: center; margin-top: 25px;">
    <img onclick="addbox(2)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
    </div>
    <div style="margin-top: 50px; text-align: center;">
    <img onclick="delbox(2)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")" />
    </div>
    </div>
    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td style="text-align: right;">
    <input name="floorType" value="1" type="radio" checked="checked" />横箱<input name="floorType" value="0" type="radio" />竖箱</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </div>
    <!--货道层-->
    <div id="divfloors"></div>
    <!-- 分隔线 -------------------------------------------------------------------------------------->
    <div id="addroads" style="display: none;">
    <div style="padding: 10px;">
    <table class="table-addroads" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <tr>
    <td style=" 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>
    </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; 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);
    }
    });
    </script>
    <div style="border-left: solid 1px #999; border-right: solid 1px #999; border-top: 0;">
    <div style="padding: 10px; border-bottom: solid 1px #000;">
    <div style="float: left; height: 20px; line-height: 20px;">
    设置 @boxInfoDal.GetName(boxCode) 货道层数: <span class="span-floorNum">@floorNum</span>层
    </div>
    <img onclick="addfloor(this, '@boxId')" alt="" class="img-btn2" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
    <img onclick="delfloor(this, '@boxId')" alt="" class="img-btn2" src="@Url.Content("~/Images/Cargo/roadset_Del.png")" />
    </div>
    @for (int i = 1; i <= int.Parse(floorNum); i++)
    {
    DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, i);
    <table class="table-floor" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-bottom: solid 1px #999; 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;
    }

    @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; 100%;">
    <tr>
    <td>
    <div style="margin: 2px;">@boxInfoDal.NumToABCD(floor)@j.ToString()</div>
    </td>
    </tr>
    <tr>
    <td>
    <div style="margin: 2px;">货道 @drRoad["roadSpec"].ToString()</div>
    </td>
    </tr>
    <tr style="line-height: 11px;">
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td style="text-align: center;">
    <input value="0" type="text" style="height: 17px; 25px; text-align: center;" />
    </td>
    </tr>
    <tr>
    <td style="text-align: center;">现
    <input value="@drRoad["existProductNum"].ToString()" type="text" style="height: 19px; 25px; border: 0; background-color: red; text-align: center;" readonly="readonly" /><input value="@drRoad["maxProductNum"].ToString()" type="text" style="height: 19px; 25px; border: 0; background-color: gray; text-align: center;" readonly="readonly" />

    </td>
    </tr>
    <tr>
    <td style="text-align: center; font-weight: bold;">
    <div style="margin-top: 5px;">@drRoad["productName"].ToString()&nbsp;</div>
    </td>
    </tr>
    <tr>
    <td style="text-align: center;">
    <div style="position: relative; float: right; margin-right: -1px; margin-bottom: -1px; border: 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

    }
    }

     效果图:

     
    分类: ASP.NET MVC
    标签: ASP.NET MVC
  • 相关阅读:
    Linux系统下使用pwgen生成密码的使用教程
    使用John the ripper工具来尝试破解Linux密码
    把Arch Linux安装到U盘上的具体教程
    Arch Linux安装后的一些初始设置简介
    Linux下的sed命令使用详解
    Ubuntu GNOME 安装日语输入法(收集)
    网页设定固定背景图片(抄袭自百度FM)
    一个不错的flash 模板
    Ubuntu 14.04 LAMP搭建小记
    KindEditor 修改多图片上传显示限制大小和张数
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/4168346.html
Copyright © 2011-2022 走看看