Beh*_*zad 5 c# asp.net-mvc bundle
我设计了一个网站MVC 4。现在，我遇到了资源加载和脚本执行时间问题。因为，具有较高优先级（例如jQuery）并且应该首先运行但其他库较晚加载的库，并且脚本依赖于它们加载并较早运行会导致错误！
我的脚本包是：
bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-migrate.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js",
"~/Scripts/jquery.knob.min.js",
"~/Scripts/toastr.min.js",
"~/Scripts/bootstrap.min.js",
"~/Scripts/respond.js",
"~/Scripts/bootstrap-select.min.js",
"~/Scripts/smoothscrool.js",
"~/Scripts/scrollReveal.js",
"~/Scripts/easing.min.js",
"~/Scripts/site.js"));
bundles.Add(new ScriptBundle("~/bundles/contact").Include(
"~/Scripts/contact.js"));
这是我的布局：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", "~/bundles/scripts")
<div id="page-content">
@RenderBody()
</div>
@RenderSection("scripts", required: false)
</body>
</html>
如您所见，在正文的开头，要异步加载的脚本：
@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", "~/bundles/scripts")
这是我的 Contact View razor 代码：
@section scripts
{
@Scripts.Render("~/bundles/contact")
}
<div>
Contact Contents
</div>
现在，尽管在正文的末尾加载了节脚本。但是由于资源的异步加载，依赖脚本加载较早（因为它比布局脚本更紧凑）而导致错误！
如何在运行所有布局异步脚本后强制运行依赖脚本！？
在布局视图中，您应该添加一个动态包，以便在从布局调用该视图时向每个视图添加资源。换句话说，您可以通过在动态包类中定义任何视图资源，在一个文件中为每个视图生成脚本包和样式包。
例如 ：
此路径中的类 BundleConfig App_Start\BundleConfig：
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
var styles = new string[]
{
"~/Content/bootstrap.min.css",
"~/Content/bootstrap-select.min.css",
"~/Content/font-awesome.min.css",
"~/Content/toastr.min.css",
"~/Content/front.css",
"~/Content/style.css"
};
var zocial = new string[] { "~/Content/zocial.css" };
var gridmvc = new string[]
{
"~/Content/Gridmvc.css",
"~/Content/gridmvc.datepicker.min.css"
};
bundles.Add(new StyleBundle("~/Content/stylesheets").Include(styles));
bundles.Add(new StyleBundle("~/Content/stylesheets-zocial").Include(styles.Concat(zocial).ToArray()));
bundles.Add(new StyleBundle("~/Content/stylesheets-gridmvc").Include(styles.Concat(gridmvc).ToArray()));
}
}
public static class BundleExtensions
{
public static string GetViewBundleName(this System.Web.Mvc.HtmlHelper helper, BundleType bundleType)
{
var controller = helper.ViewContext.RouteData.Values["controller"].ToString();
var action = helper.ViewContext.RouteData.Values["action"].ToString();
switch (controller.ToLower())
{
case "home":
{
switch (action.ToLower())
{
case "index": return "~/Content/stylesheets-homepage";
default:
return "~/Content/stylesheets";
}
}
case "sitemaps":
return "~/Content/stylesheets-zocial";
case "blogs":
return "~/Content/stylesheets-gridmvc";
case "account":
return "~/Content/stylesheets-jqueryval";
default:
return "~/Content/stylesheets";
}
}
}
最后，在布局中，必须添加此模型的异步脚本：
Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", Html.GetViewBundleName(BundleType.Scripts)))