http://blog.csdn.net/xxjoy_777/article/details/39050011

1.如何在页面中添加Js和CSS文件。

我们只需要在模板页中添加JS和CSS文件,然后子页面调用模板页即可。

@{
    ViewBag.Title = "用户注册";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

第二句话便是指定该页面的模板页。我们只需要在模板页中进行js和css的引用。

下面来看_Layout.cshtml的代码。

  1. @Styles.Render("~/Css")
  2. @Scripts.Render("~/bundles/modernizr")
  3. @Scripts.Render("~/bundles/jquery")
  4. @RenderSection("scripts", required: false)

第一条的作用是引入了一个捆绑的css文件,第二个引入一个捆绑的modernizr文件,modernizr是一个javascript文件库,它主要作用是为了兼容各类浏览器之间的差异。第三条语句引入一个捆绑的jquery文件。第四条语句@renderSection的作用是在模板页中占用一个位置,这个位置的名字就叫做scripts,然后让用户在子页面中去呈现这个叫做scripts的Section。false的意思是在子页面中并不要求一定要实现这个Section的呈现。关于@RenderSection的更多知识,可以参考这里。http://blog.csdn.net/xxjoy_777/article/details/39050667

值得注意的是,这些引用语句中的路径并不是真实在我们项目文件中的路径,比如我们的项目中并没有~/Css、~、bundles/modernizr这样的文件。那么文件到底在什么地方呢?

是通过App_start中的BundleConfig.cs来设置的。打开App_start中的Bundleconfig.cs文件,可以看到如下代码:

  1. public class BundleConfig
  2. {
  3. // 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/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. bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
  9. "~/Scripts/jquery-ui-{version}.js", "~/Scripts/jquery.ui.datepicker-zh-CN.js", "~/Scripts/jquery.layout-latest.js"));
  10. bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
  11. "~/Scripts/jquery.unobtrusive*",
  12. "~/Scripts/jquery.validate*"));
  13. bundles.Add(new ScriptBundle("~/bundles/kindeditor").Include(
  14. "~/Scripts/kindeditor/kindeditor-min.js", "~/Scripts/kindeditor/lang/zh_CN.js"));
  15. bundles.Add(new ScriptBundle("~/bundles/ztree").Include(
  16. "~/Scripts/Ztree/jquery.ztree.core-{version}.js"));
  17. //Admin
  18. // 使用 Modernizr 的开发版本进行开发和了解信息。然后,当你做好
  19. // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
  20. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
  21. "~/Scripts/modernizr-*"));
  22. bundles.Add(new StyleBundle("~/Css").Include("~/Content/Default/Style.css"));
  23. bundles.Add(new StyleBundle("~/UserCss").Include("~/Content/Default/User/Style.css"));
  24. //bundles.Add(new StyleBundle("~/AdminCss").Include("~/Content/Admin/Style.css"));
  25. //bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));
  26. bundles.Add(new StyleBundle("~/JqueryUiMetro").Include("~/Content/JqueryUi/Metro/jquery-ui-{version}.css"));
  27. bundles.Add(new StyleBundle("~/ZtreeCss").Include("~/Content/zTree/Default.css"));
  28. //Admin
  29. bundles.Add(new StyleBundle("~/Css/Admin").Include("~/Areas/Admin/Content/Style.css"));
  30. //bundles.Add(new StyleBundle("~/Css/Admin/Easyui").Include("~/Areas/Admin/Content/Easyui/icon.css", "~/Areas/Admin/Content/Easyui/metro-blue/easyui.css"));
  31. }
  32. }

看了上面的代码,应该很容易明白bundles的运行机制,new ScriptBundle().include().前面的括号里的路径是虚拟路径,而后面的是真实的路径,我们发现,真实路径里的有时候并不一定只是一个文件,还有可能是一个文件组。比如

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

绑定的就是各个版本的jQuery

这样,假如我们的一个页面引用了模板页,那么这个页面也就引用了模板页中添加的CSS和Jquery文件。我们来看看页面运行后的源文件。

  1. <link href="/Content/Default/Style.css" rel="stylesheet"/>
  2. <script src="/Scripts/modernizr-2.6.2.js"></script>
  3. <script src="/Scripts/jquery-2.0.3.js"></script>

这是页面源文件,可以看到css和js文件都已经添加进去了。

另外,因为我们子页面中有一句:

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

这一句通过

  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的源码就可以知道是为什么了。

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

这两句指定了所添加的文件是

  1. "~/Scripts/jquery.unobtrusive*"和<pre code_snippet_id="463872" snippet_file_name="blog_20140904_3_3751162" name="code" class="html">"~/Scripts/jquery.validate*"

这两个文件中包含了源文件中所列出的那三个文件。*的意思应该是指这类文件的集合。

MVC学习随笔----如何在页面中添加JS和CSS文件的更多相关文章

  1. 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

    今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

  2. Django中载入js和css文件

    Django中载入js和css文件 项目的文件夹结构例如以下: mysite |-mysite |-|-static |-|---js和css文件 |-|-|-init.py |-| |-models ...

  3. Yii2的相关学习记录,自定义gii模板和引用vendor中的js、css(四)

    上文中后台模板框架已经搭建起来了,但还是有些不协调,像是有两个User标题,或者我们想自己在gii生成时添加或删除些公用的东西.这就需要我们定义自己的gii模板. 我们以CRUD的模板为例,默认的gi ...

  4. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  5. OAF在打开的新页面中添加按钮,功能是关闭当前页面

    OAF在打开的新页面中添加按钮,功能是关闭当前页面 javascript:close()

  6. FineUI中在一个页面中通过控件事件(JS)向父页面中添加Tab页

    1.在前台页面尾部添加js代码 </form>    <script type="text/javascript">        var basePath ...

  7. ToolkitScriptManager vs. ScriptManager 关于“只能向页面中添加 ScriptManager 的一个实例”讨论

    在使用ASP.NET设计AJAX功能网页时,需要首先声明ToolkitScriptManager或者ScriptManager控件,这些全局的脚本核心控制,然后才能使用众多的AJAX控件.如果没有创建 ...

  8. Web前端开发最佳实践(4):在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  9. PyQt学习随笔:Model/View中TableView视图数据项编辑结果及视图数据项的访问

    按照<PyQt学习随笔:Model/View中设置视图数据项可编辑的方法>的方法支持视图数据可编辑后,编辑后的数据无需主动保存,PyQt会自动将界面变更的数据保存到对应的Model存储中, ...

随机推荐

  1. 从无到有实现登录功能以及thinkphp怎么配置数据库信息

    好开心,终于解决了.从学习android到现在写登录功能已经不是一次两次了,如今再写想着肯定是信手拈来,没有想到的是尽然折磨了我一天的时间才搞定它.唉...... 先来看几张截图,这次的登录跟以往的不 ...

  2. MAC OS X El CAPITAN 搭建SPRING MVC (1)- 目录、包名、创建web.xml

    一. 下载STS(Spring Tool Suite) 官方地址:http://spring.io/tools/sts 下载spring tool suite for mac 最新版本.这个IDE是很 ...

  3. 玩转Podfile

    前言 经常使用CocoaPods来管理iOS项目中的第三方库,但是我们要使用CocoaPods来管理第三方库,前提是要写好Podfile文件,通过这个文件来配置第三方库与项目之间的依赖.版本等信息. ...

  4. MYSQL基础操作之单表的增删改查

    一.添加数据. -- 1.创建表,并插入一定的数据. CREATE TABLE STUDENT( ID INT, USERNAME ), SERVLET INT, JSP INT, ADDRESS ) ...

  5. 在Ubuntu上搭建Hadoop群集

    前面我搭建的Hadoop都是单机伪分布式的,并不能真正感受到Hadoop的最大特点,分布式存储和分布式计算.所以我打算在虚拟机中同时开启3台机器,实现分布式的Hadoop群集. 1.准备3台Ubunt ...

  6. python学习笔记4-正则表达式

    import re -- 所有正则表达式相关的功能都包含在re模块中 re.sub() -- 字符串替换 >>> import re >>> s= "10 ...

  7. laravel框架中容器类简化代码-摘自某书

    <?php //容器类装实例或提供实例的回调函数 class Container { protected $bindings = []; //绑定接口和生成相应实例的回调函数 public fu ...

  8. css3

    CSS3的换行 如果某个单词太长,不适合在一个区域内,它扩展到外面: 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字: 允许长文本换行: p {word-wrap:break-wo ...

  9. 烂泥:学习centos之快速搭建LNMP环境

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 以前在centos下安装软件都是喜欢源码安装,不过昨天因为一个事情需要一个centos 下的LNMP环境.反倒不会搞了,今天特意记录下,以备后续使用. 一 ...

  10. LVM 管理减少swap分区空间增加到根分区

    简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,它由Heinz Mauelshagen在Linux 2.4内核上实现 ...