在mvc剃须刀代码html布局问题

首先，我想知道我是否可以在MVC剃须刀网站使用asp.net masterpagefile，因为一切都已在asp.net开发，现在迁移到MVC剃须刀？在mvc剃须刀代码html布局问题

我们是否有机制在设计时看MVC中的设计？

接下来是我在mvc中创建了一个_layout.cshtml母版页，并且我使用的地方无处不在。这包含两个图像，包括gif文件和一个渲染body @RenderBody（）的部分，但不幸的是渲染正文内容和两个图像即将到来在同一行。我真的不知道是什么原因引起的问题？以下是代码

.header { 
    font-size: 8pt; 
    color: #333333; 
    font-weight: bold; 
} 

.footer { 
    font-size: 8pt; 
    color: #666666; 
    font-family: Verdana, helvetica, tahoma; 
} 



<body> 
<div class="header"> 
     <div style="float:right"><img src="~/Images/imagesnew/Images/master/IWHeader-v2-Right.bmp" /></div> 
     <div style="float:right"> <img src="~/Images/imagesnew/Images/master/sampleLogo.gif" /></div> 
     </div> 
     <div style="margin-top:100px"> 
      @RenderSection("featured", required: false) 
      <section class="content-wrapper main-content clear-fix"> 
       @RenderBody() 
      </section> 
     </div> 
     <div class="footer"> 
      <div class="content-wrapper"> 
       <div class="float-left"> 
        <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p> 
       </div> 
      </div> 
     </div> 
     @Scripts.Render("~/bundles/jquery") 
     @RenderSection("scripts", required: false) 
</body>

来源

2015-05-11 peter

您必须将ASP.NET主文件中的HTML代码移植到MVC布局文件，以便Razor视图引擎可以解释代码。您可以使用剃须刀语法或ASP.NET ASPX语法。 –

我可以使用asp.net的MasterPageFile在MVC剃刀网站

它不建议，但我记得，你可以在同一个项目中混合+匹配的aspx + MVC ，但不在同一页面/视图中。剃刀视图需要_layout。像现在一样将主页面迁移到_layout并使用@RenderSection。

看到在设计时

不要在你希望的方式Razor视图。您可以获取插件/浏览器扩展来自动重新加载保存页面（我使用的那个不再提供，所以没有链接，很抱歉）。

呈现正文内容和两个图像在同一行

未来一个float:后，您需要一个clear:。最简单的是根本看都（那么你可以根据需要改变左/右）

<div style="margin-top:100px;clear:both"> 
    @RenderSection("featured", required: false)

或者，你可以强制<header>标签要做到这一点，而不是依赖于下一个元素。在这种情况下，添加一个：在头后，如使用.css：

div.header:after { 
    content:""; 
    display:table; 
    clear:both; 
}

它看起来像你的主要内容部分已经有这个与clear-fix类，所以你可以只补充一点：

<div style='margin-top:100px' class='clear-fix'>

同样页脚，确保有一个明确的：既：

div.footer { 
    clear:both; 
}

对于最佳实践，把这些在一个名为.css

来源

2015-05-11 13:53:37

在mvc剃须刀代码html布局问题

回答

相关问题