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

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

效果：