ASP.NET MVC Layout如何嵌套

程序员文章站 2023-12-17 13:35:52

直接上代码：模板页layout.cshtml代码(路径"~/views/backstage/machinemng/layout.cshtml")： @{...

直接上代码：

模板页layout.cshtml代码(路径"~/views/backstage/machinemng/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代码：(路径"~/views/backstage/machinemng/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页面代码(路径"~/views/backstage/machinemng/roadset/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>

效果图：

ASP.NET MVC Layout如何嵌套

以上就是本文的全部内容，希望对大家的学习有所帮助。

ASP.NET MVC Layout如何嵌套

请求如何进入ASP.NET MVC框架

ASP.NET MVC HtmlHelper如何扩展

如何将ASP.NET MVC所有参数均自动设置为默认

asp.net如何进行mvc异步查询

如何将ASP.NET MVC所有参数均自动设置为默认

如何在Asp.Net Core MVC中处理null值的实现

asp.net如何进行mvc异步查询

如何使用签名保证ASP.NET MVC OR WEBAPI的接口安全

浅谈Asp.net Mvc之Action如何传多个参数的方法

如何把ASP.NET MVC项目部署到本地IIS上