13

使用这些说明手动将 ASP.NET MVC 项目升级到 MVC4 后，您如何在 MVC4 中设置新的 CSS 和 JavaScript 资产捆绑以及 ASP.NET Web 优化框架的最小化功能？默认模板已全部设置好，但是您如何手动完成呢？

4

2 回答 2

31
  • 右键单击 References 然后 Manage NuGet Packages 并添加“Microsoft.AspNet.Web.Optimization”（或Install-Package Microsoft.AspNet.Web.Optimization在 NuGet 控制台中键入）。
  • 在您的 Web.config 文件中，将以下内容添加到<system.webServer>，允许使用无扩展 URL 提供缩小的捆绑包。
<handlers>
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
  • 在您的 App_Start 文件夹中，添加一个名为 BundleConfig.cs 的新类。它应该看起来像这样：
using System.Web;
using System.Web.Optimization;

namespace MvcApplication1
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css"));
        }
    }
}
  • 编辑以上内容以添加您需要的脚本和样式表包，然后将以下行添加到 Global.asax.cs 中的 using 部分和 Application_Start 中：
//using section
using System.Web.Optimization;

//Application_Start
BundleConfig.RegisterBundles(BundleTable.Bundles);
  • 将 _Layout.cshtml 中的 CSS 和 JavaScript 以及标签替换为对@Styles.Render("~/Content/css")和的调用@Scripts.Render("~/bundles/jquery")，将参数替换为添加到 BundleConfig.cs 的包的名称。确保不要将任何包命名为与项目中的文件夹相同的名称。

你现在应该已经准备好了——在此处阅读有关如何使用完整功能集的信息：http ://www.asp.net/mvc/overview/performance/bundling-and-minification

于 2012-08-23T07:13:30.507 回答
0

是 按照以下步骤捆绑和缩小 JS 和 CSS：

  • 首先打开包管理器控制台并运行命令，选择您的 Web 应用程序作为项目。

安装包 Microsoft.AspNet.Web.Optimization

  • 转到 global.asax 右键单击​​并查看代码

  • 粘贴以下代码：

    public static void MinifyJavaScriptAndCSS()
{
   var scripts1 = new ScriptBundle("~/bundles/customJSBundle");
   scripts1.Include("~/Scripts/script1.js");
   scripts1.Include("~/Scripts/script2.js");
   BundleTable.Bundles.Add(scripts1);

    //Bundle Css
    var css1 = new StyleBundle("~/bundles/customCSSBundle");
    css1.Include("~/Styles/style1.css");
    css1.Include("~/Styles/style2.css");
    BundleTable.Bundles.Add(css1);  
 }

  • 在 Application_Start() 中调用它

     protected void Application_Start()
{
    ApplicationHelper.MinifyJavaScript();
 }

  • 转到 Views/Shared 中的 _Layout.cshtml

  • 在头部添加行

    @ViewBag.Title - 我的 ASP.NET 应用程序 @Styles.Render("~/bundles/customCSSBundle")

  • 在关闭body标签之前添加这个

     //your code
  @Scripts.Render("~/bundles/customJSBundle")
 </body>

  • 在 web.config 中如果设置编译 debug=true，文件将不会被捆绑。如果将其设置为 false，则将捆绑文件。

于 2014-05-30T08:17:19.650 回答