上一章講解了最基本的MVC4說明。今天就介紹下幾種新特性的使用例子:
就當大家有MVC3的基礎了。在這個基礎上在看下面的介紹就容易多了。
1.Web API
MVC4包括一個更好的解決方案:ASP.NET Web API的(稱為作為Web API),該框架提供ASP.NET MVC的開發風格,是專為編寫HTTP服務。用於提供REST風格的WebService,可以理解為WebService的另一種更好的實現方式,更加統一化。示例如下:
1.新建一個示例Model:
public class User { public string Name { get; set; } public string Email { get; set; } public int age { get; set; } }
2.在新建個文件夾叫API。 名字隨便起。位置隨便放。。。建一個名叫Contact的控制器:
內容如下:
public class ContactController : ApiController { User[] user = new User[] { new User { age = 1, Name = "Tomato Soup", Email = "123@qq.com" }, new User { age = 2, Name = "Yo-yo", Email = "1234@qq.com" }, new User { age = 3, Name = "Hammer", Email = "12345@qq.com" } }; [HttpGet] public IEnumerable<User> GetAll() { return user; } [HttpGet] public string Get(int id) { return "value"+id; } }
該控制器 繼承 ApiController. 其他地方和普通的控制器一樣。
3.找到WebApiConfig文件
public static void Register(HttpConfiguration config) { config.Routes.MapHttpRoute( name: "DefaultApi", //routeTemplate: "api/{controller}/{id}", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); }
以前的 routeTemplate 感覺用着不爽,容易混淆方法。就把路徑在加個 action。。。
運行后效果:
可以發現 為XML文件格式。是不是和webservice很像。有時候我們在獲取數據的時候希望數據格式為json 我們可以直接用JQuery ajax來操作
$.ajax({ url: '/api/Contact/GetAll', data: { id: 1 }, type: "get", dataType: "json", contentType: "application/json; charset=utf8", success: function (data) { $.each(data, function (key, value) { console.log(key+":"+value); }); } });
我們用Firebug捕獲下請求:
為此就達到我們所需要的東西了。
2.增強的項目模版
新增了MVC4模版具體可以自己在vs2012中新建模版項目查看
3. 移動項目模板使用jQuery Mobile
如果你將要創建的網站,將被視為在移動瀏覽器,你可以使用新的移動項目模板。此模板預配置您的網站使用流行的jQuery手機庫。可以自己新建一個移動項目模版運行看效果圖:
4. 顯示模式(Display Modes)
ASP.NET MVC4中有一個Display Mode,它可以依Browser類型,來決定要傳回的是那一個View。
比如:要針對IE9做專門的頁面展示,只需加入此圖所示內容
protected void Application_Start() { AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(GlobalConfiguration.Configuration); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("IE9") { ContextCondition = (context => context.Request.UserAgent.Contains("MSIE 9")) }); }
然后建立對應的頁面
當你用非IE9瀏覽和IE9瀏覽的時候 你會神奇的發現效果~~~。
由此你可以想到。如果你想手機訪問與PC訪問顯示不一樣的頁面。。只需要 手機的判斷就ok 啦。
5.異步控制器。
ASP.NET MVC中的異步操作是在MVC 2中被引入的, 之后就沒怎么改過,直到現在, 隨着.net 4.5和 async/await的即將到來, 異步控制器現在已經跟普通的控制器操作代碼差不多了.
一個異步請求,以相同的時間量作為一個同步請求過程。例如,如果一個請求使Web服務調用,需要兩秒鍾內完成,該請求需要2秒是否同步或異步執行。然而,在一個異步調用,一個線程不響應其他請求,等待第一個請求完成時封鎖。因此,異步請求用於防止請求隊列和線程池的增長,當有許多並發請求調用長時間運行的操作。這個我也理解的不透徹。下面寫了個最基本簡單的例子來說明。具體使用情況還需要大家在實踐中應用。。
以控制台程序為例:
class Program { static void Main(string[] args) { Console.WriteLine("請輸入內容:"); //ShowMessageAnsyc(); ShowMessage(); string ss= Console.ReadLine(); Console.WriteLine("你輸入的內容為:"+ss); Console.ReadLine(); } /// <summary> /// 普通方法使用 /// </summary> static void ShowMessage() { DateTime dt=DateTime.Now; int i = 0; while ((DateTime.Now - dt).Seconds<3) { i++; } Console.WriteLine("Hello World!"+i); } /// <summary> /// 異步方法使用 /// </summary> static async void ShowMessageAnsyc() { int i = 0; await Task.Run(() => { DateTime dt = DateTime.Now; while ((DateTime.Now - dt).Seconds < 3) { i++; } }); Console.WriteLine("Hello World Ansyc!"+i); } }
上面分別顯示了 一個我們平時用的方法。和一個異步的方法。每個方法耗時3秒 然后運行后:
輸入 123456平時使用的方法 只能代碼方法執行完成才可以輸入內容
異步方法 可以提前輸入 內容。
結果顯而易見。
6. Bundling and minification(捆綁和微小)
ASP.NET 4支持相同的捆綁和微小的框架中包含ASP.NET4.5。該系統減少了通過結合幾個單獨的腳本引用到您的網站的請求一個單一的請求。它還“更少”的要求,通過一些技術,如縮短變量名和刪除空白符和注釋。該系統的工作原理,以及對CSS,CSS請求捆綁成一個單一的請求,和壓縮的CSS請求的大小,以產生使用最少的字節,包括語義分析等先進技術的同等規則關閉CSS選擇器。
是高度可配置的捆綁系統,使您可以創建自定義捆綁包含特定的腳本,並引用它們與一個單一的URL。你可以看到一些例子參照在/ App_Start/ BundleConfig.cs在一個新的MVC應用程序使用的默認列出的軟件包互聯網的模板。
通俗的來說 就是 自動合並 css/js 並自帶壓縮功能。減少服務器請求
此功能 本來以為是MVC4內置功能。還沾沾自喜。后來發現也是通過外部DLL實現。
一定不能少了 WebGrease.dll 和 Antlr3.Runtime.dll
我們在 BundleConfig.cs文件中加入 如下代碼:
public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/js/jqueryMain").Include("~/Content/js/jquery-1.7.1.js")); bundles.Add(new ScriptBundle("~/bundles/js/jqueryContent").Include( "~/Content/js/jquery.validate.js", "~/Content/js/modernizr-2.5.3.js" )); bundles.Add(new StyleBundle("~/bundles/css/main").Include("~/Content/css/site.css")); }
注意:new ScriptBundle("~/bundles/js/jqueryContent") 中的的名字 不能有特殊符號。。比如 . - 否則無效呀。。咳咳。
然后我們頁面引用:
<!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <title>母版頁</title> @Styles.Render("~/bundles/css/main") @RenderSection("styles", required: false) </head> <body> <header> <div class="content-wrapper"> </div> </header> <div id="body"> <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - MVC 應用程序</p> </div> </div> </footer> @Scripts.Render("~/bundles/js/jqueryMain") @Scripts.Render("~/bundles/js/jqueryContent") @RenderSection("scripts", required: false) </body> </html>
同時設置:
web.config文件中
<system.web> <httpRuntime targetFramework="4.5"/> <compilation debug="false" targetFramework="4.5"/> <pages> <namespaces> <add namespace="System.Web.Helpers"/> <add namespace="System.Web.Mvc"/> <add namespace="System.Web.Mvc.Ajax"/> <add namespace="System.Web.Mvc.Html"/> <add namespace="System.Web.Optimization"/> <add namespace="System.Web.Routing"/> <add namespace="System.Web.WebPages"/> </namespaces> </pages> </system.web>
設置 compilation 的 debug 為 false
運行后以jqueryContent為例:
可以發現js 自動合並 並且被壓縮了。
如果我們不想啟用這個功能。可以把設置 compilation 的 debug 為 true
運行后效果:
效果對比明顯。。。
新特性就介紹到此了。。。先不寫了