我用 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>
可以看到，在body的开头，要加载的脚本async:
@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>
现在，虽然部分脚本加载在正文的末尾。但是由于资源的异步加载，依赖脚本加载较早(因为它比布局脚本更紧凑)而导致错误!
如何在运行所有布局异步脚本后强制运行依赖脚本!？
最佳答案
在布局 View 中，您应该添加一个动态包，以便在从布局调用该 View 时向每个 View 添加资源。 换句话说，您可以通过在动态包类中定义任何 View 资源，在一个文件中为每个 View 生成脚本包和样式包。
例如:
在此路径 App_Start\BundleConfig 中类 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)))
关于c# - 如何在异步加载中订购 MVC 包？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40437262/