ASP .NET MVC, Html.Display(…), Html.DisplayFor(…)

Podczas budowania formularzy często potrzebujemy wyświetlić zbiory danych. Załóżmy, że mamy klasę Contact zawierającą dane kontaktowe użytkownika (email, telefon, fax). W celu wyświetlenia informacji zawartych w klasie można oczywiście użyć zwykłych wywołań Html.Label np:

<p>Phone:</p><%=Model.Contact.Phone%>
<p>Email:</p><%=Model.Contact.Email%>
<p>Fax:</p><%=Model.Contact.Fax%>

Metoda całkowicie poprawna jednak bardzo niewygodna – co jeśli do klasy dodamy nowe pole, np. MobilePhoneNumber? Oczywiście programista będzie musiał modyfikować kod – mało interesująca opcja. Na szczęście ASP .NET MVC dostarcza funkcję Display, która wyświetli wszystkie właściwości:

<%=Html.Display("Contact")%>

ViewData[“Contact”] musi zawierać oczywiście instancję klasy Contact:

Contact contact = new Contact();
contact.Email = "contact@live.com";
contact.Fax = "252525";
contact.Phone = "45353";

ViewData["Contact"] = contact;

Dla ścisłości dołączam jeszcze deklarację Contact:

[MetadataType(typeof(Contact_Metadata))]
public class Contact 
{
   public string Phone { get; set; }
   public string Fax { get; set; }
   public string Email { get; set; }
}

Warto zwrócić uwagę na atrybut MetadataType. Dzięki niemu możemy zdefiniować właściwości pól (długość, typ itp):

internal class Contact_Metadata
{
   [Required(ErrorMessage = "Phone is required.")]        
   public string Phone { get; set; }
   
   [Required(ErrorMessage = "Fax is required.")]
   public string Fax { get; set; }

   [Required(ErrorMessage = "Email is required.")]
   [StringLength(200, ErrorMessage = "Email must be 200 characters or less.")]
   [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Valid Email Address is required.")]
   [DataType(DataType.EmailAddress)]
   public string Email { get; set; }

}

Jak wspomniałem Html.Display wyświetli wszystkie pola klasy:

image

Na tym jednak nie koniec zalet płynących z wykorzystania Display. Można definiować własne szablony dla poszczególnych pól. Szablony w formie widoków częściowych należy umieszczać w folderze DisplayTemplates np:

image

Przykładowy szablon dla pola Email (dodaje element graficzny):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>

<a href="mailto:<%= Html.DisplayFor(emailaddress => emailaddress) %>">
    <%= Html.DisplayFor(emailaddress => emailaddress) %>
</a>
<img src="/Content/email.gif" />

W analogiczny sposób można definiować szablony dla całej klasy Contact a nie tylko dla poszczególnych pól. W tym celu dodajemy widok częściowy Contact.ascx i umieszczamy go również w DisplayTemplates:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcApplication2.Contact>" %>

<p>
    <%= Html.LabelFor(c => c.Phone)%>:
    <%= Html.DisplayFor(c => c.Phone)%>
</p>
<p>
    <%= Html.LabelFor(c => c.Email) %>:
    <%= Html.DisplayFor(c => c.Email) %>
</p>
<p>
    <%= Html.LabelFor(c => c.Fax) %>:
    <%= Html.DisplayFor(c => c.Fax) %>
</p>

Leave a Reply

Your email address will not be published.