Widok czyli graficzny interfejs użytkownika definiuje się w ASP .NET MVC za pomocą kilku helperów oraz czystego HTML\XHTML. Prosty widok prawie niczym nie różni się od dokumentu XHTML:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>ViewPage1</title> </head> <body> <div> </div> </body> </html>
Jedyną nowością jest dodanie deklaracji Page oraz atrybutu runat=”server”.
Jak jednak pamiętamy z poprzedniego postu, kontroler do widoku przekazuje tzw. model:
public ActionResult Index() { Model model=new Model(); model.FirstName="Piotr"; model.LastName="Nazwisko" return View(model); }
Model to dowolna klasa zdefiniowana przez użytkownika np:
public class Model { public string FirstName { get; set; } public string LastName { get; set; } }
W jaki sposób dostać się do modelu w widoku? Przede wszystkim należy stworzyć tzw.strong type view (widok z silną typizacją). Najłatwiej zrealizować to za pomocą kreatora (Add->View):
W kreatorze zaznaczamy opcję “Create a strongly-typed view” oraz wybieramy klasę Model. Dzięki temu zostanie wygenerowany następujący kod:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.Model>" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>SampleView</title> </head> <body> <div> </div> </body> </html>
Jak widać, kod w atrybucie Inherits ma przypisany typ generyczny System.Web.Mvc.ViewPage<MvcApplication1.Models.Model>. W tej chwili można już za pomocą odpowiednich dyrektyw dostać się do zawartości modelu:
<div> Your first name is: <%=Model.FirstName %> Your last name is: <%=Model.LastName %> </div>
Dyrektywa <%=%> wyświetla po prostu zawartość zmiennej. W identyczny sposób można zwracać wartości funkcji.
Inną dyrektywą jest <% jakiś kod %>. Wykonuje ona dowolny kod:
<div> <%string firstName=Model.FirstName; if (firstName.StartsWith("P")) { %> Your first name is: <%=Model.FirstName%> Your last name is: <%=Model.LastName%> <%} %> </div>
W najnowszej wersji frameworka dodano jeszcze jedną dyrektywę: <%: %>. Służy ona do automatycznego kodowania tekstu (ochrona przed XSS). Przykładowo <%:Model.FirstName%> jest równoważne wywołaniu <%=Html.Encode(Model.FirstName)%>.
Oprócz wspomnianych strong-typed view, można definiować widoki bez podania typu modelu. W takim przypadku deklaracja Page wygląda następująco (brak typu generycznego ViewPage):
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
Z kolei wyświetlanie zawartości:
<%= Html.Encode(ViewData["FirstName"]) %>
W następnym poście pokaże jak definiować własne formularze i walidować dane.