當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步

發布時間：2024/9/5 asp.net 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、區域—麻雀雖小，五臟俱全的迷你MVC項目

1.1 Area的興起

　　為了方便大規模網站中的管理大量文件，在ASP.NET MVC 2.0版本中引入了一個新概念—區域(Area)。

在項目上右擊創建新的區域，可以讓我們的項目不至于太復雜而導致管理混亂。有了區域后，每個模塊的頁面都放入相應的區域內進行管理很方便。例如：上圖中有兩個模塊，一個是Admin模塊，另一個是Product模塊，所有關于這兩個模塊的控制器、Model以及視圖都放入各自的模塊內。可以從上圖中看出，區域的功能類似一個小的MVC項目，麻雀雖小五臟俱全，有自己的控制器、模型、視圖還有路由設置。區域實際上是應用程序內部的一個 MVC 結構，一個應用程序可能包含若干個 MVC 結構（區域）。例如：一個大型電子商務應用程序可能分為若干個區域，這些區域表示店面、產品檢查、用戶帳戶管理和采購系統。每個區域表示整個應用程序的一個獨立功能。

1.2 注冊區域路由

　　在MVC中添加一個Area區域之后，會默認幫我們注冊這個區域的路由規則。例如：我們創建了一個Admin的區域，然后它幫我們生成了一個AdminAreaRegistration.cs的文件，其代碼如下： public class AdminAreaRegistration : AreaRegistration {public override string AreaName{get{return "Admin";}}public override void RegisterArea(AreaRegistrationContext context){context.MapRoute("Admin_default","Admin/{controller}/{action}/{id}",new { action = "Index", id = UrlParameter.Optional });} }

　　這里，RegisterArea是實現注冊的關鍵方法，通過把另一個路由添加到區域路由集合中實現。請注意，這里的區域名Admin是以硬編碼方式添加到URL中;因此，所有使用此區域名稱作為前綴的請求都被進行特別路由處理。　　

　　你可能感到疑惑：為什么我們不能在主應用程序的路由定義中指定Admin部分?實際上，如果我們將它加入到標準的路由表中，而不通過區域上下文（AreaRegistrationContext），那么我們還是把所有文件駐留到同一個項目中，從而失去了分離項目區域的好處（即區域沒有起到作用）。

二、模板頁—封裝頁面變化點，構建快速View開發模板

　　在傳統的WebForm開發模式中，我們使用MasterPage作為模板頁。那么在MVC3 Razor視圖設計中，我們怎么來使用模板頁呢？

2.1 模板頁的歸宿—Shared文件夾

　　在解決方案資源管理中，我們可以看到Views文件夾下面有一個Shared文件夾。在Shared文件夾里面有一個_Layout.cshtml頁面。這個就是項目中默認的模板頁面，如下圖所示：

　　在Shared中新建一個MVC布局頁，取名為：_MyLayout.cshtml

<!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width" /><title>@ViewBag.Title</title> </head> <body><div>@RenderSection("Head", required: false)<h1>This is MyLayout Page</h1><hr />@RenderBody()</div> </body> </html>

　　其中RenderSection為渲染指定區域，該區域名稱為Head，但不是必須渲染（required:false）。而RenderBody則是重頭戲，他就類似于MasterPage中主內容的PlaceHolder，是每個使用該模板頁都需填充的內容區域。

　　那么，怎么來使用這個模板頁呢？其實很簡單，只需要在要使用模板頁的View中修改Layout屬性即可：

2.2 View未動，ViewStart先行

　　在Razor視圖引擎中，所有頁面啟動之前，ViewStart文件會先執行。那么，這個ViewStart文件到底做了些什么事兒呢？

　　（1）可以看出，這個ViewStart是一個全局的頁面。當我們的頁面未指定Layout的時候，如果項目在全局或在同文件夾內存在_ViewStart.cshtml時該頁面的Layout會自動繼承自_ViewStart.cshtml，如果不同的文件夾層級都存在_ViewStart.cshtml，則繼承離該頁面最近的一個。

　　（2）如果我們想要所有的頁面都默認使用一個指定模板頁，只需將這個Layout改為新模板頁即可。例如：將Layout改為我們剛剛創建的~/Views/Shared/_MyLayout.cshtml。

2.3 RenderBody與RenderSection

　　（1）RenderBody：

　　@RenderBody()在模板頁中使用表示內容頁在模板中的位置。當創建具有模板頁的內容頁的時候，內容頁就呈現在模板頁中@RenderBody()所在的位置，一個模板頁中只能有一個@RenderBody()。

　　（2）RenderSection：

　　@RenderSection用于在模板布局中定義一個區域，在內容頁可以定義一些內容來填充這個區域，例如內容頁中引用的JS文件，可以填充到模板頁的section位置。每個內容頁的單獨一些信息，可以在模板頁中這個區域顯示。

　　@RenderSection有兩個個參數，第一個參數用于定義section的名稱，第2個參數是布爾類型，如果為TRUE，表示內容頁必須定義這個section，如果為false,則表示內容頁可定義section，也可以不定義。

三、WebAPI初步—構建輕量級Restful服務的利器

?3.1 Restful架構是什么？

　　RESTful架構，就是目前最流行的一種互聯網軟件架構。它結構清晰、符合標準、易于理解、擴展方便，所以正得到越來越多網站的采用。

　　這里借用阮一峰博士的總結，到底什么是Restful架構：

　　（1）每一個URI代表一種資源；

　　（2）客戶端和服務器之間，傳遞這種資源的某種表現層；

　　（3）客戶端通過四個HTTP動詞，對服務器端資源進行操作，實現"表現層狀態轉化"。

　　各位園友可以閱讀阮一峰博士的這篇《理解RESTful架構》的文章來了解Restful架構的基本概念。

　　綜上所示，REST是一種簡潔的設計風格，通過URL來設計系統，以URI來抽象各種資源，以HTTP協議的PUT、DELETE、GET、POST來對應對資源的各種操作。

3.2 WCF and WebAPI

　　首先，ASP.NET Web API 和WCF有著千絲萬縷的聯系。

　　WCF是一個通用的服務架構平臺，其設計之初在于創建一個通用的Web Service平臺，可以在各種不同的協議(TCP, UDP, HTTP)下使用，僅僅通過EndPoint的配置而不需要修改代碼實現就能適應不同的工作環境。WCF也是微軟以前很多服務產品的合體。

　　WCF 里面可以采用模板的方式來實現REST架構風格，但WCF畢竟是一個集大成的平臺（或者說是：比較重量級）。WCF的野心造成了它的龐大復雜，HTTP的單純造就了它的簡單優美。于是經常自問：拿著牛刀削蘋果有必要嗎？廢話，當然沒有必要，水果刀在哪里？因此，我們所需要的僅僅是里面HTTP REST風格的部分。各種因素糾結下，微軟于是便把WCF里面的這部分團隊抽離出來合并到了MVC組中，才有了現在的ASP.NET Web API，并包含在MVC 4中發布。

3.3 第一個WebAPI項目

　　（1）新建一個ASP.NET MVC項目，取名為：MyMvcWebAPIDemo，項目類型選擇WebAPI。

　　（2）在Models中新增一個類，取名為：Product，作為我們要測試的實體模型。

public class Product{public int Id { get; set; }public string Name { get; set; }public string Category { get; set; }public decimal Price { get; set; }} View Code

　　（3）在Controllers中新增一個控制器，并選擇“空WebAPI”類型模板，取名為：ProductController。

　　（4）為了方便進行數據測試，這里定義一個靜態的產品集合。當然，在實際應用中，我們可能會從數據庫中讀取數據集合，并對其進行增刪查改及各種查詢操作。

static List<Product> products = new List<Product> { new Product { Id = 1, Name = "Nokia Lumia 1520", Category = "移動電話", Price = 3500 }, new Product { Id = 2, Name = "Lenovo Thinkpad T430S", Category = "便攜式計算機", Price = 8000 }, new Product { Id = 3, Name = "錘子手機", Category = "移動電話", Price = 3300 } ,new Product { Id = 4, Name = "Wii", Category = "電視游戲機", Price = 1000 },new Product { Id = 5, Name = "Xbox 360", Category = "電視游戲機", Price = 3200 } }; View Code

　　（5）定義一些方法，用于對產品集合的各種操作：

public class ProductController : ApiController{static List<Product> products = new List<Product> { new Product { Id = 1, Name = "Nokia Lumia 1520", Category = "移動電話", Price = 3500 }, new Product { Id = 2, Name = "Lenovo Thinkpad T430S", Category = "便攜式計算機", Price = 8000 }, new Product { Id = 3, Name = "錘子手機", Category = "移動電話", Price = 3300 } ,new Product { Id = 4, Name = "Wii", Category = "電視游戲機", Price = 1000 },new Product { Id = 5, Name = "Xbox 360", Category = "電視游戲機", Price = 3200 } };/// <summary>/// GET/// </summary>/// <returns></returns>public IEnumerable<Product> GetAllProducts(){return products.OrderBy(p => p.Id);}/// <summary>/// GET/// </summary>/// <param name="id"></param>/// <returns></returns>public Product GetProductById(int id){Product product = products.FirstOrDefault(p => p.Id == id);if (product == null){var resp = new HttpResponseMessage(HttpStatusCode.NotFound);throw new HttpResponseException(resp);}return product;}/// <summary>/// GET/// </summary>/// <param name="productName">產品名</param>/// <returns></returns>public Product GetProductByName(string productName){Product product = products.FirstOrDefault(p => p.Name.Contains(productName));if (product == null){var resp = new HttpResponseMessage(HttpStatusCode.NotFound);throw new HttpResponseException(resp);}return product;}/// <summary>/// GET/// </summary>/// <param name="category">類型名稱</param>/// <returns></returns>public IEnumerable<Product> GetAllProductsByCategory(string category){if (category.Equals("--請選擇--")){return products;}IEnumerable<Product> productList = products.Where(p => string.Equals(p.Category, category, StringComparison.OrdinalIgnoreCase));return productList.OrderBy(p => p.Id);}/// <summary>/// POST/// </summary>/// <returns></returns>public bool PostProduct(Product product){int index = products.FindIndex(p => p.Name == product.Name);if (index != -1){return false;}product.Id = products.Max(p => p.Id) + 1;products.Add(product);return true;}/// <summary>/// PUT/// </summary>/// <returns></returns>public bool PutProduct(int id, [FromBody]Product product){int index = products.FindIndex(p => p.Id == id);if (index == -1){return false;}products.RemoveAt(index);products.Add(product);return true;}/// <summary>/// DELETE/// </summary>/// <returns></returns>public bool DeleteProduct(int id){Product product = products.FirstOrDefault(p => p.Id == id);if (product == null){return false;}products.Remove(product);return true;}} View Code

　　一般來說，Http的四種訪問類型中，Get：一般用作查詢，多次操作得到結果一致；Post：一般用于修改、添加多次重復操作得到結果不一致。Put：一般用于修改，多次操作得到結果一致。Delete：一般用于刪除數據，多次操作得到結果一致。

　　現在，我們來看一下我們寫的這些方法：

　　①用于GET方式獲取的方法有：

　　GetAllProducts用于獲取所有產品的集合；GetProductById用于返回指定Id的產品對象；

　　GetProductByName用戶返回指定Name的產品對象；GetAllProductsByCategory則用戶返回指定Category（種類）的產品集合；

　　②用于POST方式的方法有：

　　PostProduct用于增加一個產品信息；

　　③用于PUT方式的方法有：

　　PutProduct用于修改一個指定的產品信息；

　　④用于DELETE方式的方法有：

　　DeleteProduct用于刪除一個選擇的產品信息；

　　以上GET、POST、PUT、DELETE則構成了我們通過HTTP協議對資源的各種操作了。具體的代碼，這里我就不過多贅述，相信大家都能看懂。

　　（6）此時，我們有了一個能工作的Web API了。該控制器上的每個方法都映射到一個URI，例如下表中所示的前三個方法所對應的URI：

Controller Method
控制器方法URI

GetAllProducts	/api/product
GetProductById	/api/product/id
GetProductsByCategory	/api/product/?category=category

　　客戶端可以通過URI來訪問我們的控制器已達到對資源的操作，那么，我們可以設計一個頁面來發送AJAX請求來實踐一下。

　　（7）在Views中的默認Home/Index這個頁面中，加入以下代碼：

　　通過調試運行，可以看到以下頁面效果，并可以看到，由于我們在頁面中加入了獲取產品列表的GET請求，于是產品信息被加載到了頁面中：

　　其對應的JS語句為：可以看到，我們通過api/Product調用了API控制器中的GetAllProducts方法，獲取了所有產品信息。

$.getJSON("api/Product", function (data) {if (data != null) {if ($("#resultList").length > 0) {$("#resultList").remove();}var html = "<ol id='resultList' class='round'>";$.each(data, function (key, value) {html += "<li class='one'><h5>" + value.Name + "</h5>類型：" + value.Category+ " 價格：" + value.Price + " | <a href='#' οnclick='editProduct(" + value.Id + ")'>編輯</a><a href='#' οnclick='deleteProduct(" + value.Id + ")'>刪除</a></li>";});html += "</ol>";$("#result").append(html);} });

　　（8）下面我們可以來試試其他的API方法：

3.4 第一個RestClient客戶端項目

　　有了我們上面的WebAPI項目的支持，我們可以在客戶端（如：WindowsForm項目、Windows Phone項目等等）對WebAPI項目中的資源進行訪問和操作，現在我們就來實現一個RestClient控制臺項目模擬一個客戶端對WebAPI發起HTTP訪問請求。

　　（1）新建一個控制臺項目，取名為：MyConsoleRestClientDemo。

　　（2）新建一個類，取名為：RestClient.cs。它封裝了我們常用的HTTP操作，如GET、POST、PUT、DELETE方式。

public class RestClient{private string BaseUri;public RestClient(string baseUri){this.BaseUri = baseUri;}#region Delete方式public string Delete(string data, string uri){return CommonHttpRequest(data, uri, "DELETE");}public string Delete(string uri){//Web訪問對象64string serviceUrl = string.Format("{0}/{1}", this.BaseUri, uri);HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(serviceUrl);myRequest.Method = "DELETE";// 獲得接口返回值68HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);//string ReturnXml = HttpUtility.UrlDecode(reader.ReadToEnd());string ReturnXml = reader.ReadToEnd();reader.Close();myResponse.Close();return ReturnXml;}#endregion#region Put方式public string Put(string data, string uri){return CommonHttpRequest(data, uri, "PUT");}#endregion#region POST方式實現public string Post(string data, string uri){return CommonHttpRequest(data, uri, "POST");}public string CommonHttpRequest(string data, string uri, string type){//Web訪問對象，構造請求的url地址string serviceUrl = string.Format("{0}/{1}", this.BaseUri, uri);//構造http請求的對象HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(serviceUrl);//轉成網絡流byte[] buf = System.Text.Encoding.GetEncoding("UTF-8").GetBytes(data);//設置myRequest.Method = type;myRequest.ContentLength = buf.Length;myRequest.ContentType = "application/json";myRequest.MaximumAutomaticRedirections = 1;myRequest.AllowAutoRedirect = true;// 發送請求Stream newStream = myRequest.GetRequestStream();newStream.Write(buf, 0, buf.Length);newStream.Close();// 獲得接口返回值HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);string ReturnXml = reader.ReadToEnd();reader.Close();myResponse.Close();return ReturnXml;}#endregion#region GET方式實現public string Get(string uri){//Web訪問對象64string serviceUrl = string.Format("{0}/{1}", this.BaseUri, uri);//構造一個Web請求的對象HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(serviceUrl);// 獲得接口返回值68//獲取web請求的響應的內容HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();//通過響應流構造一個StreamReaderStreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);//string ReturnXml = HttpUtility.UrlDecode(reader.ReadToEnd());string ReturnXml = reader.ReadToEnd();reader.Close();myResponse.Close();return ReturnXml;}#endregion} View Code

　　（3）在Program.cs中的Main方法中，調用RestClient類為我們提供的方法對WebAPI服務器（這里是本機：http://localhost:8080/）發起訪問：

class Program{static string restfulServiceUri = "http://localhost:8080/";static void Main(string[] args){RestClient restClient = new RestClient(restfulServiceUri);#region 01.Get方式無參數請求Console.WriteLine("----------------------獲取所有產品列表-----------------------");string getResult = restClient.Get("api/Product");Console.WriteLine(getResult);Console.WriteLine();#endregion#region 02.Get方式帶參數請求Console.WriteLine("----------------------獲取Id=1的產品信息-----------------------");string getByIdResult = restClient.Get("api/Product/1");Console.WriteLine(getByIdResult);Console.WriteLine();Console.WriteLine("----------------------獲取Name=錘子手機的產品信息-----------------------");string getByNameResult = restClient.Get("api/Product/?productName=錘子手機");Console.WriteLine(getByNameResult);Console.WriteLine();Console.WriteLine("----------------------獲取Category=移動電話的產品信息-----------------------");string getByTypeResult = restClient.Get("api/Product/?category=移動電話");Console.WriteLine(getByTypeResult);Console.WriteLine();#endregion#region 03.Post方式請求結果//Console.WriteLine("----------------------新增一個產品信息-----------------------");//string jsonParam = @"{Id:""250"",Name:""小米2S"",Category:""移動電話"",Price:""1800""}";//string postResult = restClient.Post(jsonParam, "api/Product");//Console.WriteLine(postResult);//getResult = restClient.Get("api/Product");//Console.WriteLine(getResult);//Console.WriteLine();#endregion#region 04.Delete方式請求結果//Console.WriteLine("----------------------刪除一個產品信息-----------------------");//string deleteId = "6";//string deleteResult = restClient.Delete("api/Product/" + deleteId);//Console.WriteLine(deleteResult);//getResult = restClient.Get("api/Product");//Console.WriteLine(getResult);//Console.WriteLine();#endregion#region 05.Put方式請求結果Console.WriteLine("----------------------修改一個產品信息-----------------------");string jsonParam = @"{Id:""5"",Name:""PlayStation 3"",Category:""電視游戲機"",Price:""3200""}";string putResult = restClient.Put(jsonParam, "api/Product/5");Console.WriteLine(putResult);getResult = restClient.Get("api/Product");Console.WriteLine(getResult);Console.WriteLine();#endregionConsole.ReadKey();}} View Code

　　（4）調試運行，查看訪問結果如下：可以看出，返回的均為JSON格式的數據，和我們在瀏覽器中訪問指定URI的結果一致。

3.5 初探小結

　　ASP.NET Web API 是一種框架，用于輕松構建可以訪問多種客戶端（包括瀏覽器和移動設備）的 HTTP 服務。 ASP.NET Web API 是一種用于在 .NET Framework 上構建 RESTful 應用程序的理想平臺。

參考文章

（1）搏擊的小船，《ASP.NET MVC2 Areas區域新概念》，http://www.cnblogs.com/guanjie20/archive/2010/09/09/1822175.html

（2）游響云停，《ASP.NET MVC3細嚼慢咽-(2)模板頁?》，http://blog.csdn.net/zx13525079024/article/details/8301943

（3）李林峰，《無廢話MVC入門教程四[視圖中的Layout使用]》，http://www.cnblogs.com/iamlilinfeng/archive/2013/02/28/2934397.html

（4）阮一峰，《理解Restful架構》，http://www.ruanyifeng.com/blog/2011/09/restful.html

（5）便當之神，《ASP.Net WebAPI》，http://www.cnblogs.com/bnbqian/archive/2012/06/28/2565417.html

（6）dudu，《HttpClient + ASP.NET Web API, WCF之外的另一個選擇》，http://www.cnblogs.com/dudu/archive/2012/05/11/asp_net_webapi_httpclient.html

附件下載

（1）MyWebAPIDemo：http://pan.baidu.com/s/1hqzgwb6

作者：周旭龍

出處：http://edisonchou.cnblogs.com

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。

轉載于:https://www.cnblogs.com/edisonchou/p/3943884.html

總結

以上是生活随笔為你收集整理的ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：安装netframewoMS SQL S
下一篇： Dijkstra's algorithm