Asp.Net MVC4开发三：HTML5、CSS3、JQuery、JQuery UI的应用

浏览数：115 / 时间：2015年06月09日

在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();

BundleTable.EnableOptimizations = true;
}

上面是一种绑定引用的方式，当然传统方式也是可以用的，例如下面这种引用也没有任何问题，但没有上述优点。如：

因为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")

页面调用：

<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>