ASP.NET MVC Layout如何嵌套

作者：秋荷雨翔字体：[增加减小] 来源：互联网时间：2017-05-11

秋荷雨翔通过本文主要向大家介绍了asp net mvc,asp net mvc 4,asp net mvc 5,精通asp.net mvc 5,精通asp.net mvc 4等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

直接上代码：

模板页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>

</div>

模板页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>

</div>

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;

分享到：QQ空间新浪微博腾讯微博微信百度贴吧 QQ好友复制网址打印

您可能想查找下面的文章:

2017-05-11ASP.NET MVC5 实现分页查询的示例代码
2017-05-11Asp.net保持页面滚动条位置(页面提交后不变)
2017-05-11C#反射实例学习及注意内容
2017-05-11repeater 分列显示以及布局的实例代码
2017-05-11ASP.NET显示农历时间的方法
2017-05-11ASP.NET中动态控制RDLC报表
2018-08-20ASP.NET Core Web App应用第三方Bootstrap模板的方法教程
2018-08-20微信小程序基于腾讯云对象存储的图片上传功能
2017-05-11ASP.NET数据绑定之DataList控件实战篇
2017-05-11.net实现webservice简单实例分享

ASP.NET MVC Layout如何嵌套

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容