學習MVC專案在7天-第2天
介紹 相信您在來這裡之前已經順利完成了第一天的工作。 第一天主要集中在 為什麼MVC ?Asp。Net Web表單vs. Asp。Net mvc理解控制器和檢視 注意: 如果你前一天還沒有完成，請務必先完成。我們的目標是最終使用最佳實踐和現代方法建立一個小型MVC專案。對於每一個下一個實驗室，我們要麼在之前的實驗室中新增新的功能，要麼使之前的實驗室變得更好。 完整的系列 第1天第2天第3天第4天第5天第6天7天獎金第1天獎金第2天 我們很高興地宣佈，這篇文章現在可以從亞馬遜和FlipKart獲得同樣的紙質書 第二天的日程 介紹 第二天的日程 將資料從控制器傳遞到檢視 實驗3 -使用檢視資料 關於實驗三的演講 實驗4 -使用ViewBag 關於實驗四的演講 ViewData和ViewBag的問題 實驗5 -理解強型別檢視 關於實驗五的演講 理解Asp中的檢視模型。Net MVC 檢視模型的解決方案 實驗6 -實現檢視模型 關於實驗六的演講 實驗7 -檢視與收集 關於實驗七的演講 結論 將資料從控制器傳遞到檢視 在實驗2中建立的檢視非常靜態。在現實場景中，它將顯示一些動態資料。在下一個實驗室中，我們將在檢視中顯示一些動態資料。 檢視將從控制器獲取模型形式的資料。 模型 在Asp。Net MVC模型代表業務資料。 實驗3 -使用檢視資料 ViewData是一個字典，它包含要在控制器和檢視之間傳遞的資料。控制器將向這個字典新增專案，然後檢視從中讀取。讓我們做一個演示。 步驟1 -建立模型類 在模型資料夾中建立一個名為Employee的新類，如下所示。 隱藏,複製Code
public class Employee { public string FirstName { get; set; } public string LastName { get; set; } public int Salary { get; set; } }
步驟2 -在控制器中獲取模型 在GetView方法中建立Employee物件，如下所示 隱藏,複製Code
Employee emp = new Employee(); emp.FirstName = "Sukesh"; emp.LastName="Marla"; emp.Salary = 20000;
注意:確保將using語句放在頂部，否則我們必須將Employee類的完全限定名放在頂部。 隱藏,複製Code
using WebApplication1.Models;
步驟3 -建立ViewData並返回View 在viewdata中儲存Employee物件，如下所示。 隱藏,複製Code
ViewData["Employee"] = emp; return View("MyView");
步驟4 -在檢視中顯示員工資料 MyView.cshtml開放。 從ViewData檢索僱員資料，並按如下方式顯示。 隱藏,複製Code
<div>
@{
WebApplication1.Models.Employee emp=(WebApplication1.Models.Employee)
ViewData["Employee"];
}
<b>Employee Details </b><br />
Employee Name : @[email protected] <br />
Employee Salary: @emp.Salary.ToString("C")
</div>步驟5-測試輸出 按F5並測試應用程式。 關於實驗三的演講 使用大括號(即“{”和“}”)和不使用大括號編寫剃刀程式碼有什麼區別? 在最後一個實驗室@emp。可以用以下程式碼段替換FirstName。 隱藏,複製Code
@{
Response.Write(emp.FirstName);
}
沒有大括號的@只顯示變數或表示式的值。 為什麼需要鑄造? ViewData在內部儲存物件。每次向其新增新值時，都會將其裝箱為物件型別。 因此，每次我們試圖從中提取值時，都需要進行拆箱。 “@emp”是什麼意思?FirstName @emp.LastName”? 它的意思是顯示名字後跟空格，然後是姓。 我們可以用一個@關鍵字寫同樣的東西嗎? 是的，那麼它的語法是@(emp)。FirstName + " " + emp.LastName) 為什麼在控制器中建立硬編碼的Employee類? 只是為了演示。我們將實時從資料庫或wcf或web服務或其他地方獲得它。 那麼資料庫邏輯/資料訪問層和業務層呢? 資料訪問層是Asp中不明確的層之一。淨MVC。它總是存在，但從未包含在MVC定義中。如前所述，業務層是模型的一部分。 完整的MVC結構 實驗4 -使用ViewBag ViewBag只是ViewData的語法糖。ViewBag使用了c# 4.0的動態特性，並使ViewData動態。 ViewBag內部使用ViewData。 步驟1 -建立檢視包 繼續相同的實驗3，並將步驟3替換為以下程式碼片段。 隱藏,複製Code
ViewBag.Employee = emp; <span style="font-size: 9pt;">return View("MyView");</span>
步驟2 -在檢視中顯示EmployeeData 用以下程式碼片段更改步驟4。 隱藏,複製Code
@{
WebApplication1.Models.Employee emp = (WebApplication1.Models.Employee)
ViewBag.Employee;
}
Employee Details
Employee Name: @emp.FirstName @emp.LastName
Employee Salary: @emp.Salary.ToString("C")
步驟3 -測試輸出 按F5並測試應用程式 關於實驗四的演講 我們能傳遞ViewData並把它作為ViewBag嗎? 是的,我們可以。反之亦然。正如我之前所說的，ViewBag只是ViewData的語法糖， ViewData和ViewBag的問題 ViewData和ViewBag是在控制器和檢視之間傳遞值的好選項。但在實時專案中，使用任何一種都不是一個好習慣。讓我們討論一下使用ViewData和ViewBag的幾個缺點。 效能問題 ViewData中的值是Object型別。在使用該值之前，我們必須對其進行型別轉換以使其正確。它增加了額外的效能開銷。 沒有型別安全，沒有編譯時錯誤 如果我們嘗試將值轉換為錯誤的型別，或者在檢索值時使用了錯誤的鍵，我們將得到執行時錯誤。作為一種良好的程式設計實踐，錯誤應該在編譯時處理。 沒有合適的公司傳送資料和接收資料之間的聯絡 作為一名開發人員，我個人認為這是一個主要問題。 在MVC中，控制器和檢視之間是鬆散連線的。控制器完全不知道檢視中發生了什麼檢視也不知道控制器中發生了什麼。 從控制器中，我們可以傳遞一個或多個ViewData/ViewBag值。現在，當開發人員編寫檢視時，他/她必須記住來自控制器的內容。如果Controller developer與View developer不同，那麼它會變得更加困難。完全沒認識到。它會導致許多執行時問題和開發效率低下。 實驗5 -理解強型別檢視 ViewData和ViewBag出現這三個問題的原因是資料型別。ViewData中值的資料型別，即“Object”。 如果我們能夠設定需要在控制器和檢視之間傳遞的資料型別，問題就會得到解決，這就是強型別檢視出現的原因。 讓我們做一個演示。這一次，我們將把檢視需求提升到下一個層次。如果工資超過15000，那麼它將以黃色或綠色顯示。 步驟1 -使檢視成為強型別檢視 在檢視的頂部新增以下語句 隱藏,複製Code
@model WebApplication1.Models.Employee
以上陳述使我們的檢視成為Employee型別的強型別檢視。 步驟2 -顯示資料 現在在檢視內部輸入@Model和Dot(.)，在intellisense中你將得到Model (Employee)類的所有屬性。 寫下以下程式碼以顯示資料 隱藏,複製Code
Employee Details
Employee Name : @Model.FirstName @Model.LastName
@if(Model.Salary>15000)
{
<span style="background-color:yellow">
Employee Salary: @Model.Salary.ToString("C")
</span>
}
else
{
<span style="background-color:green">
Employee Salary: @Model.Salary.ToString("C")
</span>
}
步驟3 -從控制器動作方法傳遞模型資料 將操作方法中的程式碼更改為以下。 隱藏,複製Code
Employee emp = new Employee(); emp.FirstName = "Sukesh"; emp.LastName="Marla"; emp.Salary = 20000; return View("MyView",emp);
步驟4 -測試輸出 關於實驗五的演講 是否需要每次在檢視中輸入完全限定的類名(namesnamespace . classname) ? 不，我們可以用using語句。 隱藏,複製Code
@using WebApplication1.Models @model Employee
是必須讓檢視始終是強型別檢視還是有時使用ViewData或ViewBag ? 最佳實踐總是使檢視成為強型別檢視。 我們能使我們的檢視成為一個強型別檢視，包含多個模型嗎? 不,我們不能。在實時專案中，我們經常會在想要在同一個檢視中顯示多個模型的時候結束。這個需求的解決方案將在下次實驗室討論。 理解Asp中的檢視模型。Net MVC 在Lab 5中，我們違反了MVC原則。根據MVC, V即檢視應該是純UI。它不應該包含任何邏輯。我們做了以下三件完全違背MVC架構規則的事情。 附加名和姓並顯示為全名-邏輯顯示工資與貨幣-邏輯顯示工資在不同的顏色根據值。簡單地說，根據某個值改變HTML元素的外觀。-邏輯 除了這三個問題，還有一點值得討論。 假設我們想在檢視中顯示多種型別的資料。 示例—顯示當前登入的使用者名稱和員工資料 我們可以通過以下方式之一來實現這一點。 向Employee類新增使用者名稱屬性——每次我們想要在檢視中顯示新資料時，向Employee類新增新屬性似乎是不合邏輯的。這個新屬性可能與Employee相關，也可能與Employee無關。它也違反了堅實原則的SRP。使用ViewBag或ViewData——我們已經討論了使用這種方法的問題。 檢視模型的解決方案 ViewModel是Asp中未指明的層之一。淨MVC應用程式。它適合於模型和檢視之間，充當檢視的資料容器 模型和檢視模型的區別? 模型是特定於業務的資料。它將基於業務和資料庫結構建立。ViewModel是檢視特定的資料。它將基於檢視建立。 它到底是如何工作的? 這很簡單。 控制器處理使用者互動邏輯，或者簡單地說，處理使用者的請求。控制器獲得一個或多個模型資料。控制器將決定哪個檢視最適合作為正確請求的響應。控制器將通過ViewData/ViewBag/Stongly型別檢視將ViewModel資料傳遞給檢視。控制器會返回檢視。 這裡View和ViewModel是如何連線的? 檢視將是ViewModel型別的強型別檢視。 模型和ViewModel將如何連線? 模型和檢視模型應該彼此獨立。控制器將基於一個或多個模型物件建立和初始化ViewModel物件。 讓我們做一個小實驗室來更好地瞭解它。 實驗6 -實現檢視模型 步驟1 -建立資料夾 在專案中建立一個名為ViewModels的新資料夾 步驟2 -建立EmployeeViewModel 為了做到這一點，讓我們列出檢視上的所有需求 顯示金額之前要加上名和姓，貨幣顯示工資要用d表示不同的顏色(基於值)當前使用者名稱也應該顯示在檢視中 在ViewModels資料夾中建立一個名為employeeviewmodel新類，如下所示。 隱藏,複製Code
public class EmployeeViewModel { public string EmployeeName { get; set; } public string Salary { get; set; } public string SalaryColor { get; set; } public string UserName{get;set;} }
請注意，在檢視模型類中，FirstName和LastName屬性被替換為一個名為EmployeeName的屬性，Salary屬性的資料型別為string，並添加了兩個名為SalaryColor和UserName的新屬性。 步驟3 -在檢視中使用檢視模型 在實驗5中，我們把我們的觀點變成了對型別員工的強烈型別觀點。將其更改為EmployeeViewModel 隱藏,複製Code
@using WebApplication1.ViewModels @model EmployeeViewModel
步驟4 -在檢視中顯示資料 將檢視中的內容替換為以下程式碼片段。 隱藏,複製Code
Hello @Model.UserName
<hr />
<div>
<b>Employee Details</b><br />
Employee Name : @Model.EmployeeName <br />
<span style="background-color:@Model.SalaryColor">
Employee Salary: @Model.Salary
</span>
</div>
步驟5 -建立並傳遞ViewModel 在GetView操作方法中，獲取模型資料並將其轉換為ViewModel物件，如下所示。 隱藏,複製Code
public ActionResult GetView() { Employee emp = new Employee(); emp.FirstName = "Sukesh"; emp.LastName="Marla"; emp.Salary = 20000; EmployeeViewModel vmEmp = new EmployeeViewModel(); vmEmp.EmployeeName = emp.FirstName + " " + emp.LastName; vmEmp.Salary = emp.Salary.ToString("C"); if(emp.Salary>15000) { vmEmp.SalaryColor="yellow"; } else { vmEmp.SalaryColor = "green"; } vmEmp.UserName = "Admin" return View("MyView", vmEmp); }
步驟5 -測試輸出 按F5並測試輸出 輸出與實驗5相同，但是這次檢視不包含任何邏輯。 關於實驗六的演講 這是否意味著，每個模型都有一個檢視模型? 不，每個檢視都有它相應的ViewModel。 在Model和ViewModel之間建立某種關係是一個好的實踐嗎? 不，作為最佳實踐模型和ViewModel應該彼此獨立。 我們應該總是建立ViewModel嗎?如果檢視不包含任何表示邏輯，而想按原樣顯示模型資料，該怎麼辦? 我們應該始終建立ViewModel。每個檢視都應該有自己的檢視模型，即使ViewModel將包含與model相同的屬性。 假設我們有這樣一種情況，檢視不包含表示邏輯，它想按原樣顯示模型資料。讓我們假設在這種情況下我們不會建立viewmodel。 問題是，如果在將來的需求中，如果我們被要求在UI中顯示一些新資料，或者如果我們要求放置一些表示邏輯，我們可能會以從頭開始建立新的UI結束。 所以最好從一開始就保留一個條款並建立ViewModel。在這種情況下，在初始階段ViewModel將與Model幾乎相同。 實驗7 -檢視與收集 在這個實驗室中，我們將在檢視中顯示員工列表。 步驟1 -更改EmployeeViewModel類 從EmployeeViewModel中刪除使用者名稱屬性。 隱藏,複製Code
public class EmployeeViewModel { public string EmployeeName { get; set; } public string Salary { get; set; } public string SalaryColor { get; set; } }
步驟2 -建立集合檢視模型 在ViewModel資料夾中建立一個名為EmployeeListViewModel的類，如下所示。 隱藏,複製Code
public class EmployeeListViewModel { public List<EmployeeViewModel><employeeviewmodel> Employees { get; set; } public string UserName { get; set; } } </employeeviewmodel>
步驟3 -更改強型別檢視的型別 使MyView。EmployeeListViewModel型別的強型別檢視。 隱藏,複製Code
@using WebApplication1.ViewModels @model EmployeeListViewModel
步驟4 -在檢視中顯示所有員工 隱藏,複製Code
<body> Hello @Model.UserName <hr/> <div> <table> <tr> <th>Employee Name</th> <th>Salary</th> </tr> @foreach (EmployeeViewModel item in Model.Employees) { <tr> <td>@item.EmployeeName</td> <tdstyle="background-color:@item.SalaryColor">@item.Salary</td> </tr> } </table> </div> </body>
步驟5 -為員工建立業務層 在這個實驗室裡，我們將把我們的專案提高到一個新的水平。我們將在專案中新增業務層。在模型資料夾中建立一個名為EmployeeBusinessLayer的新類，並使用一個名為GetEmployees的方法。 隱藏,複製Code
public class EmployeeBusinessLayer { public List<Employee><employee> GetEmployees() { List<Employee><employee> employees = new List<Employee><employee>(); Employee emp = new Employee(); emp.FirstName = "johnson"; emp.LastName = " fernandes"; emp.Salary = 14000; employees.Add(emp);</employee></employee></employee> emp = new Employee(); emp.FirstName = "michael"; emp.LastName = "jackson"; emp.Salary = 16000; employees.Add(emp); emp = new Employee(); emp.FirstName = "robert"; emp.LastName = " pattinson"; emp.Salary = 20000; employees.Add(emp); return employees; } }
步驟6 -從控制器傳遞資料 隱藏,收縮,複製Code
public ActionResult GetView() { EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel(); EmployeeBusinessLayer empBal = new EmployeeBusinessLayer(); List<employee> employees = empBal.GetEmployees(); List<EmployeeViewModel><employeeviewmodel> empViewModels = new List<EmployeeViewModel><employeeviewmodel>(); foreach (Employee emp in employees) { EmployeeViewModel empViewModel = new EmployeeViewModel(); empViewModel.EmployeeName = emp.FirstName + " " + emp.LastName; empViewModel.Salary = emp.Salary.ToString("C"); if (emp.Salary > 15000) { empViewModel.SalaryColor = "yellow"; } else { empViewModel.SalaryColor = "green"; } empViewModels.Add(empViewModel); } employeeListViewModel.Employees = empViewModels; employeeListViewModel.UserName = "Admin"; return View("MyView", employeeListViewModel); } </employeeviewmodel></employeeviewmodel></employee>
步驟7 -執行並測試輸出 按F5並執行應用程式。 關於實驗七的演講 我們能讓檢視成為列表的強型別檢視嗎? 是的,我們可以。 為什麼我們建立一個單獨的類叫EmployeeListViewModel，為什麼我們不讓檢視成為一個列表型別的強型別檢視employeelistviewmodelemployeeviewmodel> ? 如果我們使用List<employeeviewmodel>直接而不是EmployeeListViewModel將會有兩個問題。 管理未來的表示邏輯。其次使用者名稱屬性。使用者名稱與個別員工沒有關聯。它與完整檢視相關聯。 為什麼我們從EmployeeViewModel中刪除了使用者名稱屬性並使其成為EmployeeListViewModel的一部分? 所有員工的使用者名稱都是一樣的。在EmployeeViewModel中保留使用者名稱屬性只會增加冗餘程式碼，還會增加對資料的總體記憶需求。 結論 我們完成了第2天。在第三天，我們將把我們的專案進入下一個版本。 在Facebook、linkedinor twitter上聯絡我們，讓我們隨時瞭解最新訊息。 如需在孟買進行線下技術培訓，請訪問StepByStepSchools.Net 線上培訓請訪問JustCompile.com 如果你想開始與MVC 5開始與下面的視訊學習MVC 5在2天。 本文轉載於：http://www.diyabc.com/frontweb/news1705.html