在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佈局問題

回答

相關問題