加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

使用ASP.NET MVC4 jquery/javascript捆绑

发布时间:2020-12-15 19:11:33 所属栏目:asp.Net 来源:网络整理
导读:当我使用标准的MVC4模板创建我的项目时,有ALOT的javascript包括,例如:jquery-obtrusive,jquery-validate,knockout,整个jQuery UI。 这有多少是值得保留,多少是扔掉?我注意到当你创建一个强类型的控制器create.cshtml视图生成调用: @section Scripts
当我使用标准的MVC4模板创建我的项目时,有ALOT的javascript包括,例如:jquery-obtrusive,jquery-validate,knockout,整个jQuery UI。

这有多少是值得保留,多少是扔掉?我注意到当你创建一个强类型的控制器create.cshtml视图生成调用:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

这个文件究竟是什么?我应该保留吗?我应该引用所有这些最初在BundleConfig.cs中定义的JS文件吗?或者我可以不打扰?

解决方法

What exactly does this file do?

jqueryval不是一个文件,它是一个bundle的引用。

MVC4中的包是一组包含在一起的脚本,样式或其他文件。

您将在App_Start文件夹中有一个BundleConfig.cs文件,其中包含将哪个文件添加到哪个bundle。

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

正如你可以看到上面?/ bundles / jqueryval是bundle的虚拟路径,它结合了其中指定的文件。所以后来当你看到这个:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

上面将包括在该引用下捆绑的脚本。

Should I keep it? Should I reference all of these JS files that were
initially defined in BundleConfig.cs?

在jqueryval包的情况下,您可能会发现包含的不显眼和验证脚本是非常有用的。

它们是脚本,它将管理不显眼的验证,保持你的DOM漂亮和干净。

如果您不需要或希望使用不显眼的验证,您可以删除课程包。如果你这样做,那么我相信你还需要更新你的web.config,设置必需的字段为false,以确保你的项目不会寻找文件,类似于:

<add key="ClientValidationEnabled" value="false" />
<add key="UnobtrusiveJavaScriptEnabled" value="false" />

在本文中很好地解释了使用突出和不显眼验证的好处和确切区别:Brad Wilson: Unobtrusive Client Validation in ASP.NET MVC 3

一般来说,我认为只是包含你需要的东西是好的。如果不需要捆绑中指定的所有文件,请删除这些文件,将捆绑包全部一起排除或创建自己的自定义捆绑包。

试验和错误。如果您删除它们并在浏览器调试器控制台中发现随机异常,请尝试添加一些文件/软件包。

一般来说,绑定也适用于样式表:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/jquery.ui.core.css","~/Content/themes/base/jquery.ui.resizable.css","~/Content/themes/base/jquery.ui.selectable.css","~/Content/themes/base/jquery.ui.accordion.css","~/Content/themes/base/jquery.ui.autocomplete.css","~/Content/themes/base/jquery.ui.button.css","~/Content/themes/base/jquery.ui.dialog.css","~/Content/themes/base/jquery.ui.slider.css","~/Content/themes/base/jquery.ui.tabs.css","~/Content/themes/base/jquery.ui.datepicker.css","~/Content/themes/base/jquery.ui.progressbar.css","~/Content/themes/base/jquery.ui.theme.css"));

对开发人员的好处是只需要引用单个bundle而不是几个文件。

对客户端的好处是浏览器需要做多少个单独的加载来获取scripts / css文件。

例如,如果您的视图中有5个文件引用,客户端浏览器将单独下载所有5个文件,并且每个浏览器中有一个限制,可以同时下载多少文件。这意味着如果客户端具有较慢的连接,他们可能会等待几秒钟,然后文件加载。

但是,如果您将所有5个文件配置为在一个捆绑,浏览器只下载1个文件,捆绑的一个。

此外,捆绑包被缩小(或捆绑中的文件),因此您不仅节省了下载脚本所需的时间,而且还节省了下载大小。

当你测试这个,注意在调试模式没有什么区别,你需要在释放模式或者启用bundle表在BundleConfig.cs文件在RegisterBundles方法的底部优化。

BundleTable.EnableOptimizations = true;

你不必使用bundle,你仍然可以自由引用单个scripts / css文件。它确实使事情更容易,虽然当你需要它。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读