Web開發中常常會有跨頁面、跨站點、跨專案組的複用模組（介面），最常見的就是如下方所示的Web頁面上用於顯示登入或使用者名稱的頭部模組，

使用ASP.NET MVC開發中，常見的做法是寫成部分檢視，本文的目的則是進一步將這部分檢視預編譯成DLL，

這樣就可以不直接暴露原始碼的提供複用元件，適合跨專案組的協作開發。

技術點

• Razor Generator（Razor單檔案生產器）
• RazorGenerator.Mvc（Razor檢視預編譯引擎）

步驟一：安裝拓展，專案準備

首先，為VS安裝Razor Generator（Razor單檔案生產器），操作步驟：選單-->拓展和更新-->聯機-->搜尋“Razor Generator”。

其次，新建類庫，並在類庫下新建Views/Shared路徑。

這個路徑用於存放Razor檢視，此時預編譯Razor檢視產生的虛擬路徑為~/Views/Shared，在MVC專案中就可以這樣使用@Html.Partial("TopBar")。

ps:後來才發現Views/Share路徑少了個字母，應為Views/Shared。 因為是邊寫程式碼邊截圖的，所以下面的截圖都少了個d

步驟二：編寫Razor檢視

預設情況下，類庫是既不能識別Razor檢視，也不能直接新建Razor檢視；

在安裝拓展工具Razor Generator（Razor單檔案生產器）後類庫可以識別Razor檢視，但仍不能通過右鍵選單新建Razor檢視；

我們可以間接操作，在DemoComponents/Views/Shared目錄下新建一個HTML頁，並重命名修改其格式為.cshtml。

接下來我們編寫Razor檢視的程式碼，並對TopBar.chhtml屬性進行修改：屬性-->自定義工具-->設定為RazorGenerator；

@model DemoComponents.TopBarModel
@{
    Layout = null;
}
<style type="text/css">
    .topbar_container {
        height: 40px;
        background-color: #dddddd;
        border-bottom: 1px solid #808080;
    }

    .topbar_logo {
        float: left;
        width: 200px;
        height: 40px;
        margin-left: 50px;
        line-height: 40px;
    }

    .topbar_user {
        float: right;
        width: 96px;
        height: 36px;
        margin: 2px;
        font-size: 16px;
        border: 1px solid #ff0000;
    }

    .topbar_modules {
        float: right;
        width: 350px;
        height: 40px;
    }
    .topbar_modules div {
        float: left;
        width: 96px;
        height: 36px;
        margin: 2px;
        border: 1px solid #ff0000;
    }
</style>
<div class="topbar_container">
    <div class="topbar_logo">我是logo</div>

    <div class="topbar_modules">
        @foreach (var item in Model.Modules)
        {
            <div>@item</div>
        }
    </div>
    <div class="topbar_user">
        @Model.UserName
    </div>
</div>

儲存，RazorGenerator就會為TopBar.cshtml生成一個新檔案，如下圖所示。

如果沒有生成新檔案，則說明沒有正確安裝RazorGenerator或者沒有正確設定TopBar.chhtml屬性。

開啟TopBar.generated.cs檔案會有以下報錯資訊。

通過簡要的分析，可以知道這是因為還沒有為DemoComponents新增Razor檢視的依賴項導致的，導致它無法編譯。

OK，為DemoComponents類庫新增System.Web、System.Web.Helpers、System.Web.Mvc、System.Web.WebPages的引用。

再次儲存，成功生成的程式碼結果如下，本階段的工作完成。

#pragma warning disable 1591
//------------------------------------------------------------------------------
// <auto-generated>
//     此程式碼由工具生成。
//     執行時版本:4.0.30319.42000
//
//     對此檔案的更改可能會導致不正確的行為，並且如果
//     重新生成程式碼，這些更改將會丟失。
// </auto-generated>
//------------------------------------------------------------------------------

namespace ASP
{
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Net;
    using System.Text;
    using System.Web;
    using System.Web.Helpers;
    using System.Web.Mvc;
    using System.Web.Mvc.Ajax;
    using System.Web.Mvc.Html;
    using System.Web.Routing;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.WebPages;
    
    [System.CodeDom.Compiler.GeneratedCodeAttribute("RazorGenerator", "2.0.0.0")]
    [System.Web.WebPages.PageVirtualPathAttribute("~/Views/Share/TopBar.cshtml")]
    public partial class _Views_Share_TopBar_cshtml : System.Web.Mvc.WebViewPage<DemoComponents.TopBarModel>
    {
        public _Views_Share_TopBar_cshtml()
        {
        }
        public override void Execute()
        {
            
            #line 2 "..\..\Views\Share\TopBar.cshtml"
  
    Layout = null;

            
            #line default
            #line hidden
WriteLiteral("\r\n<style");

WriteLiteral(" type=\"text/css\"");

WriteLiteral(@">
    .topbar_container {
        height: 40px;
        background-color: #dddddd;
        border-bottom: 1px solid #808080;
    }

    .topbar_logo {
        float: left;
        width: 200px;
        height: 40px;
        margin-left: 50px;
        line-height: 40px;
    }

    .topbar_user {
        float: right;
        width: 96px;
        height: 36px;
        margin: 2px;
        font-size: 16px;
        border: 1px solid #ff0000;
    }

    .topbar_modules {
        float: right;
        width: 300px;
        height: 40px;
    }

        .topbar_modules div {
            float: left;
            width: 96px;
            height: 36px;
            margin: 2px;
            border: 1px solid #ff0000;
        }
</style>
<div");

WriteLiteral(" class=\"topbar_container\"");

WriteLiteral(">\r\n    <div");

WriteLiteral(" class=\"topbar_logo\"");

WriteLiteral(">我是logo</div>\r\n    <div");

WriteLiteral(" class=\"topbar_user\"");

WriteLiteral(">\r\n");

WriteLiteral("        ");

            
            #line 46 "..\..\Views\Share\TopBar.cshtml"
   Write(Model.UserName);

            
            #line default
            #line hidden
WriteLiteral("\r\n    </div>\r\n    <div");

WriteLiteral(" class=\"topbar_modules\"");

WriteLiteral(">\r\n");

            
            #line 49 "..\..\Views\Share\TopBar.cshtml"
        
            
            #line default
            #line hidden
            
            #line 49 "..\..\Views\Share\TopBar.cshtml"
         foreach (var item in Model.Modules)
        {

            
            #line default
            #line hidden
WriteLiteral("        <div>");

            
            #line 51 "..\..\Views\Share\TopBar.cshtml"
        Write(item);

            
            #line default
            #line hidden
WriteLiteral("</div>\r\n");

            
            #line 52 "..\..\Views\Share\TopBar.cshtml"
        }

            
            #line default
            #line hidden
WriteLiteral("    </div>\r\n</div>\r\n\r\n");

        }
    }
}
#pragma warning restore 1591

步驟三：對生成的程式碼進行修改

TopBar.generated.cs 自動生成的程式碼有兩處不如人意的地方，需要我們對它進行修改，

修改過後不要再去操作TopBar.chhtml，否則我們的修改的內容將會被覆蓋。

步驟四：引入RazorGenerator.Mvc完成預編譯

右鍵DemoComponents專案-->管理NuGet程式包-->搜尋“RazorGenerator.Mvc”-->安裝

成功RazorGenerator.Mvc安裝後，會在專案下新增幾個檔案，如下圖所示。

RazorGeneratorMvcStart會在MVC程式啟動時自動執行，不需要程式設計師做任何操作。

右鍵重新生成DemoComponents專案編譯輸出DLL，到此本文的工作（Razor檢視的預編譯）全部完成。

效果展示及程式碼下載

https://pan.baidu.com/s/1geRqveV

web檢視程式碼及其執行效果如下（TopBar預編譯的路徑為~/Views/Shared/，所以可以直接不帶路徑的使用該檢視）