网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文:

 

标题 ASP.NET MVC Layout如何嵌套
范文
    这篇文章主要为大家详细介绍了ASP.NET MVC Layout如何嵌套,ASP.NET MVC Layout进行嵌套的方法,感兴趣的小伙伴们可以参考一下
    直接上代码:
    模板页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>
        <div>
          <div>
            <div>
              IMU
              <br />
              120×90
            </div>
          </div>
          <div>
            <div>
              欢迎您,<span>XXX</span> 【退出】
            </div>
            <div>
              @{
                string[] weekDays = { "星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" };
              }
              当前时间 @DateTime.Now.ToString("yyyy-MM-dd(" + weekDays[(int)DateTime.Now.DayOfWeek] + ")HH:mm")
            </div>
            <div>
              帮助中心
            </div>
          </div>
          <div>
            <ul>
              <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>
        <div>
          <div>
            货机现在运行正常
            <br />
            连续运行3天 72小时
          </div>
          <div>
            货机数据已经与平台数据同步,无需插数据盘。
            请插入数据盘完成数据同步更新/数据盘已插入,数据传输完成10%
          </div>
        </div>
        <div>
          <div>
            暂停货机
          </div>
          <div onclick="gotourl('@Url.Content("~/Backstage/MachineMng/StartCargo/Index")')">
            启动货机
          </div>
          <div>
            <div>
              货机暂停才可以进行以下操作:以下操作完成须启动货机
            </div>
          </div>
          <div>
            <div>
              <img src="@Url.Content("~/Images/Cargo/roadset_arrow_down.png")" />
            </div>
            <div>
              <img src="@Url.Content("~/Images/Cargo/roadset_arrow_up.png")" />
            </div>
          </div>
          <div onclick="gotourl('@Url.Content("~/Backstage/MachineMng/RoadSet/Index")')">
            商品货道设置
          </div>
          <div>
            <img src="@Url.Content("~/Images/Cargo/roadset_arrow_right.png")" />
          </div>
          <div>
            现金管理理
          </div>
          <div>
            <img src="@Url.Content("~/Images/Cargo/roadset_arrow_right.png")" />
          </div>
          <div>
            货机运维
          </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>
        客户喜好
        <img src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
        商品
        <img src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
        选择货道
        <img src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
        摆放商品
        <img src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
        完成货道商品绑定
      </div>
      <div id="divbox">
        <table cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <ul>
                <li>
                  <div></div>
                  <div>黄色:表示更换货道</div>
                </li>
                <li>
                  <div></div>
                  <div>绿色:表示上货数量</div>
                </li>
                <li>
                  <div></div>
                  <div>红色:表示现有商品数</div>
                </li>
                <li>
                  <div></div>
                  <div>灰色:表示最大商品数</div>
                </li>
                <li>
                  <div>调</div>
                  <div>调:表示调换本商品</div>
                </li>
                <li>
                  <div>换</div>
                  <div>换:表示更换商品种类</div>
                </li>
              </ul>
            </td>
            <td>
              <div>
                <div>
                  <img onclick="addbox(1)" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
                </div>
                <div>
                  <img onclick="delbox(1)" src="@Url.Content("~/Images/Cargo/roadset_Del.png")" />
                </div>
              </div>
            </td>
            <!--货柜-->
            <td id="tdboxs"> 
            </td>
            <td>
              <div>
                <div>
                  <img onclick="addbox(2)" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
                </div>
                <div>
                  <img onclick="delbox(2)" src="@Url.Content("~/Images/Cargo/roadset_Del.png")" />
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td>
              <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">
        <div>
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td>货道数:</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">
                <input type="button" value="确定" />
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!--批量更换货道-->
      <div id="replaceRoadSpec">
        <div>
          <table cellpadding="0" cellspacing="0">
            <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">
                <input type="button" value="确定" />
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!--更换单个货道-->
      <div id="replaceRoadSpecSingle">
        <div>
          <table cellpadding="0" cellspacing="0">
            <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">
                <input type="button" value="确定" />
              </td>
            </tr>
          </table>
        </div>
      </div>
    </body>
    </html>
    以上就是本文的全部内容,希望对大家的学习有所帮助。
随便看

 

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/19 8:48:24