ASP.NET MVC Layout如何嵌套

直接上代码：

模板页Layout.cshtml代码(路径"~/Views/Backstage/MachineMng/Layout.cshtml")：

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




  
  
    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;
      }
  
  
  



  
    
      
 
   IMU
   

   120×90
 
      
      
 
   欢迎您，XXX 【退出】
 
 
   @{
     string[] weekDays = { "星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" };
   }
   当前时间 @DateTime.Now.ToString("yyyy-MM-dd（" + weekDays[(int)DateTime.Now.DayOfWeek] + "）HH:mm")
 
 
   帮助中心
 
      
      
 

   
货机
   
运营
   
交易
   
系统
 
      

    
    @RenderBody()
  

模板页RoadSetLayout.cshtml代码：(路径"~/Views/Backstage/MachineMng/RoadSetLayout.cshtml")：

@{
  ViewBag.Title = "货道设置";
  Layout = Url.Content("~/Views/Backstage/MachineMng/Layout.cshtml");
}




  
  
    .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;
    }
  
  
  
  


  
    
      
 货机现在运行正常
 

 连续运行3天 72小时
      
      
 货机数据已经与平台数据同步，无需插数据盘。
 请插入数据盘完成数据同步更新/数据盘已插入，数据传输完成10%
      
    
    
      
 暂停货机
      
      
 启动货机
      
      
 
   货机暂停才可以进行以下操作：以下操作完成须启动货机
 
      
      
 
   
 
 
   
 
      
      
 商品货道设置
      
      
 
      
      
 现金管理理
      
      
 
      
      
 货机运维
      
    
  
  @RenderBody()

Index页面代码(路径"~/Views/Backstage/MachineMng/RoadSet/Index.cshtml")：

@{
  ViewBag.Title = "货道设置";
  Layout = Url.Content("~/Views/Backstage/MachineMng/RoadSetLayout.cshtml");
}




  
  
  
    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;
    }
  
  
  
  
  
  


  
    客户喜好
    
    商品
    
    选择货道
    
    摆放商品
    
    完成货道商品绑定
  
  
    

      

 

   

     


黄色：表示更换货道
     
     


绿色：表示上货数量
     
     


红色：表示现有商品数
     
     


灰色：表示最大商品数
     
     

调
调：表示调换本商品
     
     

换
换：表示更换商品种类
     
   
 
 

   
     

     
     

     
   
 
 
 
 
 
 

   
     

     
     

     
   
 
      
      

 
 
 
 
 

   横箱竖箱
 
 
      
    
  
  
  
  
  
  
    
      

 

   
货道数：
   

     
4货道
6货道
8货道
10货道
     
   
 
 

   
货道型号：
   

     
C25/80
C10/50
C30/85
C15/75
     
   
 
 

   

     
   
 
      
    
  
  
  
    
      

 

   
货道型号：
   

     
C25/80
C10/50
C30/85
C15/75
     
   
 
 

   

     
   
 
      
    
  
  
  
    
      

 

   
当前货道：
   

 
 

   
货道型号：
   

     
C25/80
C10/50
C30/85
C15/75
     
   
 
 

   

     
   
 
      
    
  

 效果图：

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