MVC学习随笔----如何在页面中添加JS和CSS文件
2016-12-21 20:23
821 查看
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的代码。
[html] view plain copy
@Styles.Render("~/Css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@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文件,可以看到如下代码:
[html] view plain copy
public class BundleConfig
{
// 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jQuery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js", "~/Scripts/jquery.ui.datepicker-zh-CN.js", "~/Scripts/jquery.layout-latest.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/kindeditor").Include(
"~/Scripts/kindeditor/kindeditor-min.js", "~/Scripts/kindeditor/lang/zh_CN.js"));
bundles.Add(new ScriptBundle("~/bundles/ztree").Include(
"~/Scripts/Ztree/jquery.ztree.core-{version}.js"));
//Admin
// 使用 Modernizr 的开发版本进行开发和了解信息。然后,当你做好
// 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Css").Include("~/Content/Default/Style.css"));
bundles.Add(new StyleBundle("~/UserCss").Include("~/Content/Default/User/Style.css"));
//bundles.Add(new StyleBundle("~/AdminCss").Include("~/Content/Admin/Style.css"));
//bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));
bundles.Add(new StyleBundle("~/JqueryUiMetro").Include("~/Content/JqueryUi/Metro/jquery-ui-{version}.css"));
bundles.Add(new StyleBundle("~/ZtreeCss").Include("~/Content/zTree/Default.css"));
//Admin
bundles.Add(new StyleBundle("~/Css/Admin").Include("~/Areas/Admin/Content/Style.css"));
//bundles.Add(new StyleBundle("~/Css/Admin/Easyui").Include("~/Areas/Admin/Content/Easyui/icon.css", "~/Areas/Admin/Content/Easyui/metro-blue/easyui.css"));
}
}
看了上面的代码,应该很容易明白bundles的运行机制,new ScriptBundle().include().前面的括号里的路径是虚拟路径,而后面的是真实的路径,我们发现,真实路径里的有时候并不一定只是一个文件,还有可能是一个文件组。比如
[html] view plain copy
bundles.Add(new ScriptBundle("~/bundles/jQuery").Include("~/Scripts/jquery-{version}.js"));
绑定的就是各个版本的jQuery。
这样,假如我们的一个页面引用了模板页,那么这个页面也就引用了模板页中添加的CSS和Jquery文件。我们来看看页面运行后的源文件。
[html] view plain copy
<link href="/Content/Default/Style.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-2.0.3.js"></script>
这是页面源文件,可以看到css和js文件都已经添加进去了。
另外,因为我们子页面中有一句:
[html] view plain copy
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
这一句通过
[html] view plain copy
@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] view plain copy
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
这两句指定了所添加的文件是
[html] view plain copy
"~/Scripts/jquery.unobtrusive*"和<pre code_snippet_id="463872" snippet_file_name="blog_20140904_3_3751162" name="code" class="html">"~/Scripts/jquery.validate*"
这两个文件中包含了源文件中所列出的那三个文件。*的意思应该是指这类文件的集合。
1.如何在页面中添加Js和CSS文件。
我们只需要在模板页中添加JS和CSS文件,然后子页面调用模板页即可。
@{
ViewBag.Title = "用户注册";
Layout = "~/Views/Shared/_Layout.cshtml";
}
第二句话便是指定该页面的模板页。我们只需要在模板页中进行js和css的引用。
下面来看_Layout.cshtml的代码。
[html] view plain copy
@Styles.Render("~/Css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@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文件,可以看到如下代码:
[html] view plain copy
public class BundleConfig
{
// 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jQuery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js", "~/Scripts/jquery.ui.datepicker-zh-CN.js", "~/Scripts/jquery.layout-latest.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/kindeditor").Include(
"~/Scripts/kindeditor/kindeditor-min.js", "~/Scripts/kindeditor/lang/zh_CN.js"));
bundles.Add(new ScriptBundle("~/bundles/ztree").Include(
"~/Scripts/Ztree/jquery.ztree.core-{version}.js"));
//Admin
// 使用 Modernizr 的开发版本进行开发和了解信息。然后,当你做好
// 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Css").Include("~/Content/Default/Style.css"));
bundles.Add(new StyleBundle("~/UserCss").Include("~/Content/Default/User/Style.css"));
//bundles.Add(new StyleBundle("~/AdminCss").Include("~/Content/Admin/Style.css"));
//bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));
bundles.Add(new StyleBundle("~/JqueryUiMetro").Include("~/Content/JqueryUi/Metro/jquery-ui-{version}.css"));
bundles.Add(new StyleBundle("~/ZtreeCss").Include("~/Content/zTree/Default.css"));
//Admin
bundles.Add(new StyleBundle("~/Css/Admin").Include("~/Areas/Admin/Content/Style.css"));
//bundles.Add(new StyleBundle("~/Css/Admin/Easyui").Include("~/Areas/Admin/Content/Easyui/icon.css", "~/Areas/Admin/Content/Easyui/metro-blue/easyui.css"));
}
}
看了上面的代码,应该很容易明白bundles的运行机制,new ScriptBundle().include().前面的括号里的路径是虚拟路径,而后面的是真实的路径,我们发现,真实路径里的有时候并不一定只是一个文件,还有可能是一个文件组。比如
[html] view plain copy
bundles.Add(new ScriptBundle("~/bundles/jQuery").Include("~/Scripts/jquery-{version}.js"));
绑定的就是各个版本的jQuery。
这样,假如我们的一个页面引用了模板页,那么这个页面也就引用了模板页中添加的CSS和Jquery文件。我们来看看页面运行后的源文件。
[html] view plain copy
<link href="/Content/Default/Style.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-2.0.3.js"></script>
这是页面源文件,可以看到css和js文件都已经添加进去了。
另外,因为我们子页面中有一句:
[html] view plain copy
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
这一句通过
[html] view plain copy
@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] view plain copy
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
这两句指定了所添加的文件是
[html] view plain copy
"~/Scripts/jquery.unobtrusive*"和<pre code_snippet_id="463872" snippet_file_name="blog_20140904_3_3751162" name="code" class="html">"~/Scripts/jquery.validate*"
这两个文件中包含了源文件中所列出的那三个文件。*的意思应该是指这类文件的集合。
相关文章推荐
- 如何在Asp.net 页面中添加CSS和JS的引用, 使得不是文件路径的限制
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- WEB-INF目录下jsp页面如何访问WebRoot中的CSS和JS文件
- 在项目开发中,jsp页面不会少了,如何公用页面(添加页面和修改页面)和公用样式代码(css,js)?
- asp.net后台如何动态添加JS文件和css文件的引用
- jsp页面如何调用多个js文件,css文件一起调用
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件(转)
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- asp.net后台如何动态添加JS文件和css文件的引用
- jsp页面如何引用项目其他文件夹里的css、js文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 页面加入_JS,CSS使用,#include添加文件,缓存页面,页面间传递汉字,IsPostBack控制页面的加载,自定义错语页面
- 关于jsp页面是放在webroot目录下和web-inf下优缺点/(如何访问WebRoot中的CSS和JS文件)
- YII 如何在当前页面外部加载css,img,js文件
- Laravel页面如何引入css/js等静态文件?
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于jsp页面是放在webroot目录下和web-inf下优缺点/(如何访问WebRoot中的CSS和JS文件)
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件