在Asp.Net MVC4里面UI层也就是View层默认使用HTML5以及与HTML相对应的CSS3，JS默认使用JQuery和JQuery UI。新建一个MVC4项目，项目会自动包含JQuery、JQuery UI所需要的文件及智能提示支持; HTML则是自动生成HTML5格式标签的页面。
先来看看MVC4项目里面对这些内容的支持：
在MVC4项目里面有Scripts和Content两个文件夹，Scripts里面存放Java scripts库包括JQuery, JQuery UI, JQuery Validation以及modernizr等。而在Content Base文件夹里面包含了JQuery UI所需要的CSS文件。
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
}
在Global.asax文件里面注册了所需要的绑定，当程序启动时运行绑定内容。
再来看看绑定是怎么工作的：
public class BundleConfig
{
// For more information on Bundling, visit
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.min.js",
"~/Scripts/DataGrid.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you‘re
// ready for production, use the build tool at to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",
"~/Content/themes/base/jquery-ui.css",
"~/Content/DataGrid.css"));
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"));
}
}
View页面的引用：
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
用Styles.Render(StyleBundle name)在页面添加CSS的引用， 用Scripts.Render(StyleBundle name)在页面添加Scripts的引用， Render是数组型参数params，所以可以同时将多个Bundles放在一个Render方法添加到页面。这样做的一个好处是页面更简洁，而且添加更方便，只需要把想要添加的文件Add到某一个Bundles组，引用后会在页面添加Bundles下面所有的绑定文件的引用。而且可以使用 BundleTable.EnableOptimizations 对引用文件进行压缩以增加网络传输性能，将该属性设为ture添加到application_start方法里面：
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
BundleTable.EnableOptimizations = true;
}
上面是一种绑定引用的方式，当然传统方式也是可以用的，例如下面这种引用也没有任何问题，但没有上述优点。如：
<script src="xxxxxxxxxxxx"></script>
<link href="xxxxxxxxxxxxxxxxx">
因为MVC4默认使用HTML5，所以页面布局也是HTML5的布局，HTML5的布局是这样的：
所以在Views文件夹下面会有一个Shared文件夹，里面放置的页面就是共享页面，有点类似web form里面的user control。
在Shared文件夹里面有一个_Layout.cshtml文件，是一个布局页面，如果想修改网络的布局，那么只需要修改该文件就行。
在mvc4网站默认的布局下面，会将jquery.js的引用放在Layout页面的最后，在其它页面使用JQuery或调用JQuery UI时会报错，比如：“无法识别$”，或“不支持Button/dialog”等等。调试JS内容，可以打开浏览器高级选项，找到两个禁止Javascript调试的选项，去掉选中状态就行。针对上面错误，我们可以把scripts.render()和styles.render()方法放置在head部分，那么在其它页面就不需要重新添加一遍了。当然把styles和scripts放置在页面的最后是有好处的，这样可以让页面内容更快地显示，但如果遇到错误，就是位置太靠后了。
来看一个Juery及ui使用的例子：
在_Layout.cshtml文件的head里面添加引用，我将jquery ui的css回到了Content/css Bundles：
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui")
页面调用：
<input type="button" id="testJUI" value="Modal confirmation">
<script>
$(document).ready(
$("#testJUI").click(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 240,
modal: true,
buttons: {
Confirm: function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
})
})
);
</script>
<div id="dialog-confirm" title="Confirm Dialog" style="display:none;">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Confrim or Cancel?</p>
</div>
效果：
在上面有一段关于modernizr的JS类库说明，意思是说：当你在开发过程当中时，你可以使用和依赖它的功能，但当你准备发布到产品环境时，使用构建工具通过官网地址取你所需要的验证就行。它也间接说明了modernizr的作用，起验证作用，因为HTML5目前不是对所有浏览器都支持，那么对于不支持的浏览器我们需要采用一些可替代的方法，比如用传统的JS和支持的HTML tag操作。那么这时就需要用到modernizr的功能了，他提供验证浏览器的功能。
目前所支持的浏览器有：IE9及以上，Firefox, Safari, Opera, Chrome等，浏览器前缀分别是：IE 是 -ms-, Firefox 是 -moz-, Safari和Chrome是一样的 -webkit-, Opera是-o-。
看一个CSS3的例子：
.featured .content-wrapper {
background-color: #7ac0da;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
color: #3e5667;
padding: 20px 40px 30px 40px;
}
向<html>元素添加“no-js”的类
<!DOCTYPE html>
<html lang="en" class="no-js">
- 当Modernizr运行的时候，它会把这个“no-js”的类变为“js”来使你知道它已经运行。Modernizr并不仅仅只做这一件事情，它还会为 所有它检测过的特性添加class类，如果浏览器不支持某个特性，它就为该特性对应的类名加上“no-”的前缀。
- 添加no-js class到html元素下，是告诉浏览器是否支持JavaScript，如果不支持就显示no-js，如果支持就把no-js删掉。
下面是一个列表对照，用上述方法可以对下面所有内容进行验证。
| CSS功能 |
Modernizr类（属性） |
|
@font-face |
fontface |
|
::before and ::after pseudo-elements |
generatedcontent |
|
background-size |
backgroundsize |
|
border-image |
borderimage |
|
border-radius |
borderradius |
|
box-shadow |
boxshadow |
|
CSS animations |
cssanimations |
|
CSS 2D transformations |
csstransforms |
|
CSS 3D transformations |
csstransforms3d |
|
CSS transitions |
csstransitions |
|
flexible box layout |
flexbox |
|
gradients |
cssgradients |
|
hsla() |
hsla |
|
multi-column layout |
csscolumns |
|
multiple backgrounds |
multiplebgs |
|
opacity |
opacity |
|
reflection |
cssreflections |
|
rgba() |
rgba |
|
text-shadow |
textshadow |
HTML5和CSS3能做到什么？相信网上已经有很多的实例了，动画效果不输flash，所以很多人相信HTML5是互联网的未来。来看看HTML5和之前版本有何区别？
下面分别是HTML5新增和移除的内容：
html5 变更的标签
- 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型：<!DOCTYPE html>。它有意不使用版本，因此文档将会适用所有版本的HTML。
- 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang=”en”> 将对 HTML5 有效。
- 简单易记的编码类型 你现在可以在 meta 标签中使用 “charset”：<meta charset=”utf-8″ />
- 不需要闭合标签 在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。
-
新增标签 新增的语义化标签
header, hgroup, nav, section, article, details, figure, figcaption, aside, time, mark, audio, video, source, track, bdi, canvas, command, datalist, summary, embed, keygen, meter, output, progress, rp, rt, ruby, - 废弃的标签 下面这些标签并不被 HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>[删除线]、<strike>[删除线]、<tt>[定义打字机文本]、<u>[下划线文本]; 和 <xmp>[和pre类似];
-
新增属性 在 HTML5 中，增加了很多form表单属性，当然还有其他属性。
required, from, pattern, placeholder, email, range[min, max, step], url, date, time, datetime, datetime-local, month, week, tel, number, search, --, contentcontenteditableable, contextmenu,data-yourvalue, draggable, item, itemprop, spellcheck, subject
新增的内容比较多，而移除的内容其实也不怎么用到，或者是直接和其它的元素在功能上是重叠的。新增内容最吸引人的地方当算交互式的标签了，比如：audio, video, canvas等。在布局方面，目前直接提供了header, section, nav, article, footer等，所以现在布局对于完全不懂CSS的程序员来说也不是难事。可以查看_Layout.cshtml文件，里面的布局就相当简洁。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("OTP Portal", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("DataGrid", "Index", "DataGrid")</li>
<li>@Html.ActionLink("WebGrid", "index", "WebGrid")</li>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@*@Scripts.Render("~/bundles/jquery")*@
@RenderSection("scripts", required: false)
</body>
</html>
仔细观察Layout文件就发现有些明显的变化，HTML页面或Web form页面里面doctype, html, meta变得简洁了，里面的连接已经不需要了，那些以连接形式出现的命名空间完全从MVC4里面消失了，所以对于HTML5来说，因为需要copy的东西少了，需要自己用JS写的功能也少了很多。
另一个重要的变化就是标签属性的变化，现在Input标签提供了与type相当的属性，直接可以验证用户输入，比如：required必填项，date日期格式及datepicker选择器，number数字格式，长度等等。如：
<input type="email" />
<br />
<input type="date" />
<br />
<input type="number" maxlength="5" min="0" />
效果：
与之前的HTML相比，我们不需要自己写JS的验证，也不需要JS的日期控件，更重要的是在MVC4里面直接用强类型绑定MODEL后，所有需要的验证都在Model类里面定义，安全而且高效。
Asp.Net MVC4开发三：HTML5、CSS3、JQuery、JQuery UI的应用,布布扣,bubuko.com