足球游戏_中国足彩网¥体育资讯$

ASP.NET MVC Layout如何嵌套
来源:易贤网 阅读:1487 次 日期:2016-08-10 15:57:48
温馨提示:易贤网小编为您整理了“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 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如何嵌套
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标