1. 程式人生 > 實用技巧 >在7天-第2天逐步學習MVC(模型檢視控制器)

在7天-第2天逐步學習MVC(模型檢視控制器)

MVC 2非常古老,本文是在很久以前編寫的。我們建議你從這裡開始閱讀我們最新的學習MVC 5系列:-http:// www.codeproject.com/articles/866143/learn - mvc-逐日逐步學習 內容 那麼,議程是什麼?第一天:控制器、強型別的檢視和助手類2天:單元測試,路由和出站url第三天:-區域性檢視、資料註釋,剃鬚刀,身份驗證和授權第四天:- JSON, JQuery,狀態管理和中控制器第五天:捆綁,縮小,檢視模型、領域和異常處理6天:顯示模式,MVC OAuth,模型繫結、佈局和自定義檢視引擎實驗室6:單元測試MVC專案 第1步:建立一個簡單的顯示客戶螢幕專案第2步:新增一個簡單的單元測試專案第3步:新增適當的專案引用第4步:編寫單元測試第5步:最後執行單元測試那麼下一個實驗是什麼? 實驗7:理解MVC路由 步驟1:採用第一天建立的MVC專案步驟2:更改global.asax.cs步驟3:執行應用程式那麼下一個實驗室是什麼? 實驗8:驗證和設定MVC url的預設值 步驟1:建立一個簡單的客戶模型步驟2:建立控制器類步驟3:在MVC路由上使用regex應用驗證步驟4:測試它是否有效那麼下一個實驗室是什麼? 實驗9:理解MVC出站url 步驟1:建立檢視步驟2:為檢視建立控制器步驟3:在連結中提供操作步驟4:享受您的導航 第三天是什麼?50個MVC訪談問題和答案 那麼,議程是什麼? 在第二天,我們將研究以下四個實驗室: 在MVC專案上編寫單元測試。配置MVC工藝路線。驗證MVC路線。配置MVC出站路由。 得到其他部分的連結MVC文章如下:- 第1天:控制器、強型別檢視和助手類 http://www.codeproject.com/Articles/207797/Learn-MVC-Model-view-controller-Step-by-Step-in-7 第2天:-單元測試,路由和出站url http://www.codeproject.com/Articles/259560/Learn-MVC-Model-view-controller-Step-by-Step-in-7 第三天:—部分檢視、資料註釋、Razor、身份驗證和授權 http://www.codeproject.com/Articles/375182/Learn-MVC-Model-View-Controller-Step-by-Step-in-4 第4天:- JSON, JQuery,狀態管理和非同步控制器 http://www.codeproject.com/Articles/667841/Learn-MVC-Model-view-controller-Step-by-Step-in-3 第5天:—繫結、縮小、檢視模型、區域和異常處理 http://www.codeproject.com/Articles/724559/Learn-MVC-Model-view-controller-Step-by-Step-in-7 -顯示模式,MVC OAuth,模型繫結,佈局和自定義檢視引擎 http://www.codeproject.com/Articles/789278/Learn-MVC-Model-view-controller-Step-by-Step-in-d 如果你是一個全新的人,我建議從下面的MVC網站4個視訊開始,大約10分鐘,這樣你可以快速來到MVC。 實驗室沒有。實驗室的描述 同樣為Youtube視訊演示1個簡單的Hello world ASP。淨MVC應用程式。http://youtu.be/KAKxm4eQP24?在這個實驗室中,我們將看到如何使用檢視資料在控制器和檢視之間共享資料。http://youtu.be/Fu9v2MIDlTA?在這個實驗室中,我們將建立一個簡單的客戶模型,並在檢視中顯示相同的資料。http://youtu.be/0-UdqWy9lVc?在這個實驗室中,我們將建立一個簡單的客戶資料輸入螢幕,並在檢視上進行一些驗證。http://youtu.be/1dlxtHuRw34?hd=1 讓我們從上面四個實驗室一個一個的開始。 實驗6:單元測試MVC專案 當我們開始整個MVC系列(第一天)時,我們首先關注兩個關於程式碼背後的問題: 如何在ASP上進行單元測試。網路後臺程式碼?我們如何重用ASP。NET背後的程式碼與不同的使用者介面? 在本節中,讓我們集中討論第一點,即。、單元測試。 如果我們需要在ASP中對下面的方法btngenerateinvoices_click進行單元測試,那麼簡單回顧一下。NET後面的程式碼,我們有以下問題: 如何建立sender和eventargs物件?下面的完整程式碼在HttpContext物件下執行,我如何模擬它?關於ASP。NET UI控制元件,我如何訪問它們?其他ASP呢?NET物件,如會話物件,應用程式,我如何訪問它們? 供參考:許多開發人員會談論模擬測試、rhino模擬等,但它仍然是神祕的,而且隨著會話變數、檢視資料物件、ASP等的增加,複雜性也會增加。NET UI控制元件,造成進一步的混亂。 在這一節中,我們將建立一個簡單的MVC應用程式,並在ASP上進行單元測試。NET應用程式使用VSTS單元測試框架。 步驟1:建立簡單的顯示客戶螢幕專案 第一步是建立一個簡單的MVC專案。我們將使用與h相同的專案在MVC(模型檢視控制器)第1天討論。因此,如果你沒有任何樣例專案,請建立一個使用上面的連結。 最後,控制器類是一個簡單的。net類。例如,如果你仔細觀察你的專案程式碼,你可以很容易地看到如下所示的customer controller類: 隱藏,複製Code

public class CustomerController : Controller
{
...
....
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = 12;
objCustomer.CustomerCode = "1001";
objCustomer.Amount = 90.34;

return View("DisplayCustomer",objCustomer);
}
}

簡單地說,因為這是一個簡單的。net類,所以我們可以很容易地例項化這個類併為它建立自動化的單元測試。這正是我們下一步要做的。 步驟2:新增一個簡單的單元測試專案 讓我們使用VSTS單元測試框架來測試控制器類。如果您是VSTS單元測試的新手,請參閱本文了解單元測試:http://www.codeproject.com/KB/cs/VSTSTesting.aspx。使用測試專案解決方案模板向您的解決方案新增一個新專案。 步驟3:新增適當的專案引用 我們需要在單元測試專案中新增對MVC應用程式的引用,以便我們能夠獲得控制器類。 一旦你添加了引用,你應該看到MVC應用程式在你的專案引用如下圖所示: 步驟4:編寫單元測試 一旦您添加了引用,開啟單元測試類,即。, UnitTest1.cs。在這個類中建立一個名為DisplayCustomer的簡單測試方法,它由TestMethod屬性賦予屬性,如下面的程式碼片段所示。 如果您看到下面的程式碼片段,我們正在建立控制器類的一個物件,呼叫控制器操作,即。,然後檢查檢視名稱是否為DisplayCustomer。如果它們相等,則意味著測試通過,否則測試失敗。 隱藏,複製Code

[TestMethod]
public void DisplayCustomer()
{
CustomerController obj = new CustomerController();
var varresult = obj.DisplayCustomer();
Assert.AreEqual("DisplayCustomer", varresult.ViewName);
}

步驟5:最後執行單元測試 一旦編寫了測試用例,就可以通過單擊test、windows,然後單擊test view來執行測試用例。 在test檢視中,右鍵單擊測試並執行所選的測試用例,如下所示: 如果一切順利,您應該會看到一個綠色,表示測試通過了,或者您應該看到一個紅色,帶有關於測試失敗原因的詳細資訊。 下一個實驗室裡會有什麼 在下一個實驗室我們將討論MVC路由。MVC就是將動作連線到控制器,MVC路由幫助我們實現這一點。所以準備好進入我們的下一個教程。 實驗7:理解MVC路由 介紹 最後,MVC只不過是一個對映到控制器和對映到動作的控制器的URL。 例如,當用戶從瀏覽器傳送一個類似於www.questpond.com/locateproduct的請求URL時,這些操作將被對映到MVC控制器中,MVC控制器最終呼叫這些函式。 下面是一個簡單的表格,顯示了整個事情的樣子: 更復雜的是,我們可以將多個URL對映到一個控制器,也可以將多個控制器對映到單個URL。例如,您可以將www.questpond.com/contactus和www.questpond.com/aboutus對映到一個名為AboutUsController的控制器。 如果我們有某種機制可以配置這些對映,那就太好了。這正是MVC路由的意義所在。MVC路由有助於輕鬆配置URL並將其與控制器對映。 步驟1:以第1天建立的MVC專案為例 讓我們以在上一節中討論過的同一個客戶專案為例。 第二步:改變全球 所有路由對映都儲存在“global.asax”中。cs“後臺程式碼檔案。所以第一步是我們需要去改變這個檔案。 所有路由對映都儲存在一個名為routes的集合中。此集合屬於名稱空間System.Web.Routing。要新增路由,需要呼叫MapRoute方法並傳遞三個引數名稱、url和預設值。 下面是maproute函式片段的列印螢幕。 Name是將通過它從集合中標識路由的鍵名。Url定義了我們想要與控制器連線的Url格式。例如,在下面的程式碼片段中,我們說View/ViewCustomer是URL格式。預設值定義了當URL被呼叫時將被呼叫的控制器類和動作函式。例如,在下面的程式碼中,我們說當View/ViewCustomer被呼叫時,它將呼叫Customer控制器類,而被呼叫的動作函式將是DisplayCustomer。 如果你的控制器接受引數,你可以使用{括號。例如,在下面的程式碼片段中,我們使用了{來指定我們可以有一個id引數。如果希望將引數定義為可選引數,可以使用UrlParameter。可選的列舉。 第一件事是註釋預設對映程式碼。稍後我們將解釋預設對映程式碼。 隱藏,複製Code

//routes.MapRoute(
// "Default", // Route name
// "{controller}/{action}/{id}", // URL with parameters
// new { controller = "Home", action = "Index", id = 
UrlParameter.Optional }); // Parameter defaults

放置以下程式碼,這意味著當我們呼叫http://localhost/View/ViewCustomer/時,它將呼叫客戶控制器,並將呼叫displaycustomer函式。 隱藏,複製Code

routes.MapRoute(
"View", // Route name
"View/ViewCustomer/{id}", // URL with parameters
new { controller = "Customer", action = "DisplayCustomer", 
id = UrlParameter.Optional }); // Parameter defaults

下面是將要呼叫的操作函式DisplayCustomer。 隱藏,複製Code

public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = 12;
objCustomer.CustomerCode = "1001";
objCustomer.Amount = 90.34;

return View("DisplayCustomer",objCustomer);
}

步驟3:執行應用程式 如果執行該應用程式,應該會看到以下顯示。 如果您還記得我們註釋了預設的入口路徑的話。讓我們來了解一下這個預設程式碼的確切含義。 "{controller}/{action}/{id}"定義了URL將被自動命名為控制器名稱/函式動作名稱/值的約定。因此,如果您有一個將Customer和action函式作為搜尋的控制器類,那麼URL將自動結構為http://xyz.com/Customer/Search。 隱藏,複製Code

//routes.MapRoute(
// "Default", // Route name
// "{controller}/{action}/{id}", // URL with parameters
// new { controller = "Home", action = "Index", id = 
UrlParameter.Optional }); // Parameter defaults

下一個實驗室裡有什麼? 在下一個實驗中,我們將討論如何驗證MVC URL。所有對MVC的操作都是通過MVC URL進行的,甚至資料也是通過MVC URL提供的。因此在下一節中,我們將看到如何驗證在MVC URL中傳遞的資料。 實驗8:驗證和設定MVC url的預設值 MVC都是關於通過URL發生的動作,這些動作的資料也由URL提供。如果我們能驗證通過這些MVC url傳遞的資料,那就太好了。 例如,讓我們考慮MVC URL http://localhost/Customer/ViewCustomer。如果任何人想檢視1001客戶程式碼的客戶詳細資訊,他需要輸入http://localhost/Customer/ViewCustomer/1001。 客戶程式碼本質上是數字的。換句話說,任何人輸入類似於http://localhost/Customer/ViewCustomer/Shiv的MVC URL都是無效的。MVC框架提供了一種驗證機制,通過這種機制,我們可以檢查URL本身是否使用了適當的資料。在這個實驗中,我們將看到如何驗證在MVC URL中輸入的資料。 步驟1:建立一個簡單的客戶模型 第一步是建立一個簡單的customer類模型,它將由控制器呼叫。 隱藏,複製Code

public class Customer
{
public int Id { set; get; }
public string CustomerCode { set; get; }
public double Amount { set; get; }
}

步驟2:建立控制器類 下一步是建立一個簡單的控制器類,它擁有在步驟1中建立的customer模型物件的集合。 隱藏,收縮,複製Code

public class CustomerController : Controller
{
List<Customer> Customers = new List<Customer>();
//
// GET: /Customer/
public CustomerController()
{
Customer obj1 = new Customer();
obj1.Id = 12;
obj1.CustomerCode = "1001";
obj1.Amount = 90.34;

Customers.Add(obj1);

obj1 = new Customer();
obj1.Id = 11;
obj1.CustomerCode = "1002";
obj1.Amount = 91;
Customers.Add(obj1);

}

[HttpGet]
public ViewResult DisplayCustomer(int id)
{
Customer objCustomer = Customers[id];

return View("DisplayCustomer",objCustomer);
}
}

控制器有一個簡單的DisplayCustomer函式,它使用id值顯示客戶。該函式接受id值並在客戶集合中查詢。下面是該函式的縮小後的重新發布的程式碼。 隱藏,複製Code

[HttpGet]
public ViewResult DisplayCustomer(int id)
{
Customer objCustomer = Customers[id];

return View("DisplayCustomer",objCustomer);
}

如果你看DisplayCustomer函式,它接受一個數字id值。我們想在這個ID欄位上進行驗證,包含以下約束: Id應該始終是數字。它應該在0到99之間。 我們希望在使用資料呼叫MVC URL時觸發上述驗證。 步驟3:在MVC路由上使用正則表示式應用驗證 步驟2中描述的驗證可以通過在路線圖上應用正則表示式來實現。如果你去全球。並檢視asax檔案中的maproute函式,該函式的輸入是約束,如下圖所示。 如果您是正則表示式的新手,我們建議您瀏覽一下這個關於正則表示式的視訊:http://youtu.be/c2zm0roe-uc? 因此,為了適應數字驗證,我們需要指定regex約束,即。, ' \d{1,2} '中的maproute函式,如下所示。' \d{1,2} '在正則表示式中意味著輸入應該是數字的,並且最大長度應該是1或2,即在0到99之間。 您可以通過輸入id=0來指定預設值,如下面的程式碼片段所示。以防萬一,如果有人沒有指定ID的值,它將預設接受值為0。 隱藏,複製Code

routes.MapRoute(
"View", // Route name
"View/ViewCustomer/{id}", // URL with parameters
new { controller = "Customer", action = "DisplayCustomer", 
id = 0 }, new { id = @"\d{1,2}" }); // Parameter defaults

第四步:測試它是否有效 現在我們已經使用maproute函式完成了驗證,現在可以測試這些驗證是否有效了。在第一個測試中,我們指定了valid 1,我們看到控制器被擊中,資料被顯示。 如果嘗試指定值超過100,將會出現如下所示的錯誤。請注意,這個錯誤令人困惑,但這是在maproute函式中指定的正則表示式驗證的影響。 如果您試圖指定一個非數字值,您應該再次得到相同的錯誤,這將確認我們的正則表示式驗證工作正常。 需要注意的最重要一點是,這些驗證甚至在請求到達控制器函式之前就執行了。 下一個實驗室裡會有什麼 在任何網站開發中,一個至關重要的事情就是定義從一個頁面到另一個頁面的導航。在MVC中,一切都是一個動作,這些動作會呼叫檢視或頁面。我們不能指定像www.questpond.com/home.aspx這樣的直接超連結,這將違背MVC的目的。換句話說,我們需要指定操作,這些操作將呼叫url。 在下一個實驗中,我們將研究如何在MVC檢視中定義一個出站URL,它將幫助我們從一個頁面導航到另一個頁面。 實驗室9:Understanding MVC出站url 介紹 當我們談到web應用程式時,終端使用者希望從一個頁面導航到另一個頁面。因此,作為一個簡單的開發人員,您的第一個想法就是提供如下圖所示的頁面名稱。 例如,如果你想從家裡瀏覽。aspx有關。aspx給錨一個超連結的頁面名稱,這樣就沒問題了。 這樣做違背了MVC原則。MVC原則說命中應該首先到達控制器,但是通過指定<a href="/KB/aspnet/Home.aspx">第一個點擊出現在檢視中。這完全繞過了你的控制器邏輯,你的MVC架構就會失敗。 理想情況下,操作應該指導應該呼叫哪個頁面。因此,超連結應該在錨標記中有操作,而不是在頁面名稱中。,直接檢視名稱。 步驟1:建立檢視 讓我們建立如下圖所示的三個檢視Home、About和Product。 讓我們在這三個頁面之間建立一個簡單的導航,如下所示。從home檢視,我們想導航到about和產品檢視。從“關於”和“產品”檢視,我們想要導航回主頁檢視。 步驟2:為檢視建立控制器 下一步是定義將呼叫這些檢視的控制器操作。在下面的程式碼片段中,我們定義了三個操作:GotoHome(呼叫home檢視)、Aboutus(呼叫about檢視)和SeeProduct(呼叫product檢視)。 隱藏,複製Code

public class SiteController : Controller
{
//
// GET: /Site/

public ActionResult GotoHome()
{
return View("Home");
}

public ActionResult AboutUs()
{
return View("About");
}

public ActionResult SeeProduct()
{
return View("Product");
}
}

步驟3:在連結中提供操作 要呼叫操作而不是檢視,我們需要在錨標記中指定操作,如下面的程式碼片段所示。 隱藏,複製Code

This is products
<a href="GotoHome">Go Home</a><br />
<a href="Aboutus">About us</a><br />

如果希望使用HTML helper類建立錨鏈接,可以使用操作連結函式,如下面的程式碼片段所示。 隱藏,複製Code

<%= Html.ActionLink("Home","Gotohome") %>

以上程式碼是針對產品頁面的,您可以對about us和主頁進行相同型別的導航。 隱藏,複製Code

This is About us
<ahref="GotoHome">Go Home</a><br/>
<ahref="SeeProduct">See Product</a><br/>

This is home page
<br/>
<ahref="SeeProduct">See Product</a><br/>
<ahref="Aboutus">About us</a><br/>
</div>

第四步:享受你的導航 一旦指定了連結中的操作,就可以在home、about和products頁面之間導航。 在導航時,你可以看到url是如何指向動作的,而不是像home這樣的絕對頁面名稱。aspx, aboutus。aspx等,這違反了完整的MVC原則。 第三天是什麼? 在第三節中,我們將討論部分檢視、使用資料註釋的驗證、Razor (MVC 3)、MVC Windows身份驗證、MVC表單身份驗證等等。與第二天相比,下一個實驗室會更先進一些。下面是第三天的連結:點選這裡檢視第三天MVC的一步一步。 最後一點:你可以觀看我的。net訪談問答視訊,內容涉及各種話題,比如WCF、Silverlight、LINQ、WPF、設計模式、實體框架等等。 用於與各種主題相關的技術培訓,包括ASP。請聯絡[email protected]或訪問www.sukesh-marla.com 從MVC 5開始 如果你想開始與MVC 5開始與下面的視訊學習MVC 5在2天。 50個MVC訪談問題和答案 如果你要去面試,你可以閱讀我的50個重要的MVC面試問題回答文章http://www.codeproject.com/articles/556995/model-view-controller-mvc-interview-question- and 本文轉載於:http://www.diyabc.com/frontweb/news1815.html