C# MVC + Cassette

Cassette 與 MVC 預設的 Bundle 最大的差異就是會自動轉換 CSS 的圖片網址。缺點就是開發時 F5 啟動專案會變慢。

NuGet 安裝

• Cassette.Aspnet
• Cassette.Views
• Cassette

Web.config

基本上安裝完就會自動配置以下設定，但可以在確認一下。

原始碼

1. <configuration> 
2.  <configSections> 
3.    <section name="cassette" 
4.             type="Cassette.CassetteConfigurationSection, Cassette" 
5.             requirePermission="false" 
6.    /> 
7.  </configSections> 
8.  <system.web> 
9.    <pages> 
10.      <namespaces> 
11.        <add namespace="Cassette.Views" /> 
12.      </namespaces> 
13.    </pages> 
14.    <httpModules> 
15.      <add name="CassetteHttpModule" 
16.           type="Cassette.Aspnet.CassetteHttpModule, Cassette.Aspnet" 
17.      /> 
18.    </httpModules> 
19.    <httpHandlers> 
20.      <!-- 用來處理綑綁打包的處理器 --> 
21.      <add path="cassette.axd" 
22.           verb="*" 
23.           type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet" 
24.       /> 
25.    </httpHandlers> 
26.  </system.web> 
27.  <system.webServer> 
28.    <!-- 保留 httpHandlers(IIS6) 及 handlers(IIS7) 需要關閉驗證 --> 
29.    <validation validateIntegratedModeConfiguration="false" /> 
30.    <modules> 
31.      <add name="CassetteHttpModule" 
32.           type="Cassette.Aspnet.CassetteHttpModule, Cassette.Aspnet" 
33.      /> 
34.    </modules> 
35.    <handlers> 
36.      <!-- 用來處理綑綁打包的處理器 --> 
37.      <add name="CassetteHttpHandler" 
38.           path="cassette.axd" 
39.           verb="*" 
40.           allowPathInfo="true" 
41.           preCondition="integratedMode" 
42.           type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet" 
43.       /> 
44.    </handlers> 
45.  </system.webServer> 
46.  
47.  <!-- For configuration options: http://getcassette.net/documentation/v2/web-config --> 
48.  <cassette rewriteHtml="false" /> 
49. </configuration> 

<configuration>
  <configSections>
    <section name="cassette"
             type="Cassette.CassetteConfigurationSection, Cassette"
             requirePermission="false"
    />
  </configSections>
  <system.web>
    <pages>
      <namespaces>
        <add namespace="Cassette.Views" />
      </namespaces>
    </pages>
    <httpModules>
      <add name="CassetteHttpModule"
           type="Cassette.Aspnet.CassetteHttpModule, Cassette.Aspnet"
      />
    </httpModules>
    <httpHandlers>
      <!-- 用來處理綑綁打包的處理器 -->
      <add path="cassette.axd"
           verb="*"
           type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet"
       />
    </httpHandlers>
  </system.web>
  <system.webServer>
    <!-- 保留 httpHandlers(IIS6) 及 handlers(IIS7) 需要關閉驗證 -->
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <add name="CassetteHttpModule"
           type="Cassette.Aspnet.CassetteHttpModule, Cassette.Aspnet"
      />
    </modules>
    <handlers>
      <!-- 用來處理綑綁打包的處理器 -->
      <add name="CassetteHttpHandler"
           path="cassette.axd"
           verb="*"
           allowPathInfo="true"
           preCondition="integratedMode"
           type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet"
       />
    </handlers>
  </system.webServer>

  <!-- For configuration options: http://getcassette.net/documentation/v2/web-config -->
  <cassette rewriteHtml="false" />
</configuration>

Views/Web.config

增加給 cshtml 用的 namespace

原始碼

1. <configuration> 
2.  <system.web.webPages.razor> 
3.    <pages pageBaseType="System.Web.Mvc.WebViewPage"> 
4.      <namespaces> 
5.        <add namespace="Cassette.Views" /> 
6.      </namespaces> 
7.    </pages> 
8.  </system.web.webPages.razor> 
9. </configuration> 

<configuration>
  <system.web.webPages.razor>
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="Cassette.Views" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>
</configuration>

CassetteConfiguration.cs

原始碼

1. public class CassetteBundleConfiguration : IConfiguration<BundleCollection> 
2. { 
3.    public void Configure(BundleCollection bundles) 
4.    { 
5.        bundles.AddPerIndividualFile<StylesheetBundle>("Content"); 
6.        bundles.AddPerIndividualFile<ScriptBundle>("Scripts"); 
7.  
8.        bundles.Add<StylesheetBundle>("Styles/Bundles", new string[]  
9.        { 
10.            "~/Scripts/bootstrap/css/bootstrap.css", 
11.            "~/Scripts/bootstrap/css/bootstrap-theme.css", 
12.            //... 
13.        }); 
14.  
15.        bundles.Add<ScriptBundle>("Scripts/Bundles", new string[]  
16.        { 
17.            "~/Scripts/jquery/jquery-1.12.2.js", 
18.            "~/Scripts/jquery.validate/jquery.validate-1.12.0.js", 
19.            //... 
20.        }); 
21.    } 
22. } 

public class CassetteBundleConfiguration : IConfiguration<BundleCollection>
{
    public void Configure(BundleCollection bundles)
    {
        bundles.AddPerIndividualFile<StylesheetBundle>("Content");
        bundles.AddPerIndividualFile<ScriptBundle>("Scripts");

        bundles.Add<StylesheetBundle>("Styles/Bundles", new string[] 
        {
            "~/Scripts/bootstrap/css/bootstrap.css",
            "~/Scripts/bootstrap/css/bootstrap-theme.css",
            //...
        });

        bundles.Add<ScriptBundle>("Scripts/Bundles", new string[] 
        {
            "~/Scripts/jquery/jquery-1.12.2.js",
            "~/Scripts/jquery.validate/jquery.validate-1.12.0.js",
            //...
        });
    }
}

_Layout.cshtml

原始碼

1. <!DOCTYPE html> 
2. @{ 
3.    Bundles.Reference("Styles/Bundles"); 
4.    Bundles.Reference("Scripts/Bundles"); 
5. } 
6. <html> 
7. <head> 
8.    @Bundles.RenderStylesheets() 
9. </head> 
10. <body id="DialogLayout"> 
11.    @Bundles.RenderScripts() 
12. </body> 
13. </html> 

<!DOCTYPE html>
@{
    Bundles.Reference("Styles/Bundles");
    Bundles.Reference("Scripts/Bundles");
}
<html>
<head>
    @Bundles.RenderStylesheets()
</head>
<body id="DialogLayout">
    @Bundles.RenderScripts()
</body>
</html>

Release Mode

當 Web.config 的 compilation debug="false" 就會壓縮綑綁。

原始碼

1. <compilation debug="false" targetFramework="4.5" /> 

<compilation debug="false" targetFramework="4.5" />