MVC学习随笔----如何在页⾯中添加JS和CSS⽂件
1.如何在页⾯中添加Js和CSS⽂件。
我们只需要在模板页中添加JS和CSS⽂件，然后⼦页⾯调⽤模板页即可。
@{
ViewBag.Title = "⽤户注册";
Layout = "~/Views/Shared/_Layout.cshtml";
}
第⼆句话便是指定该页⾯的模板页。我们只需要在模板页中进⾏js和css的引⽤。
下⾯来看_Layout.cshtml的代码。
[html]
1. @Styles.Render("~/Css")
2. @Scripts.Render("~/bundles/modernizr")
3. @Scripts.Render("~/bundles/jquery")
4. @RenderSection("scripts", required: false)
值得注意的是，这些引⽤语句中的路径并不是真实在我们项⽬⽂件中的路径，⽐如我们的项⽬中并没有~/Css、~、bundles/modernizr这样的⽂件。那么⽂件到底在什么地⽅呢？是通过App_start中的BundleConfig.cs来设置的。打开App_start中的Bundleconfig.cs⽂件，可以看到如下代码：
[html]
1. public class BundleConfig
2. {
3. // 有关 Bundling 的详细信息，请访问 go.microsoft/fwlink/?LinkId=254725
4. public static void RegisterBundles(BundleCollection bundles)
5. {
6. bundles.Add(new ScriptBundle("~/bundles/jQuery").Include(
7. "~/Scripts/jquery-{version}.js"));
8.
9. bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
10. "~/Scripts/jquery-ui-{version}.js", "~/Scripts/jquery.ui.datepicker-zh-CN.js", "~/Scripts/jquery.layout-latest.js"));
11.
12. bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
13. "~/Scripts/jquery.unobtrusive*",
14. "~/Scripts/jquery.validate*"));
15.
16. bundles.Add(new ScriptBundle("~/bundles/kindeditor").Include(
17. "~/Scripts/kindeditor/kindeditor-min.js", "~/Scripts/kindeditor/lang/zh_CN.js"));
18.
19. bundles.Add(new ScriptBundle("~/bundles/ztree").Include(
20. "~/Scripts/core-{version}.js"));
21.
22. //Admin
23.
24. // 使⽤ Modernizr 的开发版本进⾏开发和了解信息。然后，当你做好
25. // ⽣产准备时，请使⽤ modernizr 上的⽣成⼯具来仅选择所需的测试。
26. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
27. "~/Scripts/modernizr-*"));
28.
29. bundles.Add(new StyleBundle("~/Css").Include("~/Content/Default/Style.css"));
30. bundles.Add(new StyleBundle("~/UserCss").Include("~/Content/Default/User/Style.css"));
31. //bundles.Add(new StyleBundle("~/AdminCss").Include("~/Content/Admin/Style.css"));
32. //bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));
33. bundles.Add(new StyleBundle("~/JqueryUiMetro").Include("~/Content/JqueryUi/Metro/jquery-ui-{version}.css"));
34. bundles.Add(new StyleBundle("~/ZtreeCss").Include("~/Content/zTree/Default.css"));
35. //Admin
36. bundles.Add(new StyleBundle("~/Css/Admin").Include("~/Areas/Admin/Content/Style.css"));
37. //bundles.Add(new StyleBundle("~/Css/Admin/Easyui").Include("~/Areas/Admin/Content/Ea
syui/icon.css", "~/Areas/Admin/Content/Easyui/metro-
blue/easyui.css"));
38. }
39. }
看了上⾯的代码，应该很容易明⽩bundles的运⾏机制，new ScriptBundle().include().前⾯的括号⾥的路径是虚拟路径，⽽后⾯的是真实的路径，我们发现，真实路径⾥的有时候并不⼀定只是⼀个⽂件，还有可能是⼀个⽂件组。⽐如
[html]
1. bundles.Add(new ScriptBundle("~/bundles/jQuery").Include("~/Scripts/jquery-{version}.js"));
绑定的就是各个版本的。
这样，假如我们的⼀个页⾯引⽤了模板页，那么这个页⾯也就引⽤了模板页中添加的CSS和Jquery⽂件。我们来看看页⾯运⾏后的源⽂件。
[html]
1. <link href="/Content/Default/Style.css" rel="stylesheet"/>
2.
3. <script src="/Scripts/modernizr-2.6.2.js"></script>
4.
5. <script src="/Scripts/jquery-2.0.3.js"></script>
这是页⾯源⽂件，可以看到css和js⽂件都已经添加进去了。
另外，因为我们⼦页⾯中有⼀句：
[html]
1. @section Scripts {
2. @Scripts.Render("~/bundles/jqueryval")
css和html和js怎么结合
3. }
这⼀句通过
[html]
1. @Scripts.Render("~/bundles/jqueryval")
来填充模板页中的@RenderSection部分，所以我们还引⽤了虚拟路径为~/bundles/jqueryval的脚本⽂件。
所以，⽹页的源⽂件⾥，还有下⾯⼏句。
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
只要看看bundle.cs的源码就可以知道是为什么了。
[html]
1. bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
2. "~/Scripts/jquery.unobtrusive*",
3. "~/Scripts/jquery.validate*"));
这两句指定了所添加的⽂件是
[html]
1. "~/Scripts/jquery.unobtrusive*"和<pre code_snippet_id="463872" snippet_file_name="blog_20140904_3_3751162" name="code" class="html">"~/Scripts/jquery.validate*" 这两个⽂件中包含了源⽂件中所列出的那三个⽂件。*的意思应该是指这类⽂件的集合。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论