Część 5. Edycja formularzy i tworzenie szablonów

Autor: Jon Galloway

Sklep MVC Music Store to aplikacja samouczka, która wprowadza i wyjaśnia krok po kroku, jak używać ASP.NET MVC i Visual Studio na potrzeby tworzenia aplikacji internetowych.

MVC Music Store to uproszczona przykładowa implementacja sklepu, która sprzedaje albumy muzyczne online i implementuje podstawową administrację witryną, logowanie użytkowników i funkcjonalność koszyka zakupów.

W tej serii samouczków szczegółowo przedstawiono wszystkie kroki, które należy wykonać w celu utworzenia przykładowej aplikacji ASP.NET MVC Music Store. Część 5 obejmuje edytowanie formularzy i tworzenie szablonów.

W ostatnim rozdziale ładowaliśmy dane z bazy danych i wyświetlaliśmy je. W tym rozdziale włączymy również edytowanie danych.

Tworzenie kontrolera StoreManagerController

Zaczniemy od utworzenia nowego kontrolera o nazwie StoreManagerController. W przypadku tego kontrolera będziemy korzystać z funkcji tworzenia szkieletów dostępnych w aktualizacji narzędzi platformy ASP.NET MVC 3. Ustaw opcje okna dialogowego Dodawanie kontrolera, jak pokazano poniżej.

Po kliknięciu przycisku Dodaj zobaczysz, że mechanizm tworzenia szkieletów ASP.NET MVC 3 wykonuje dobrą pracę:

• Tworzy nowy element StoreManagerController z lokalną zmienną platformy Entity Framework
• Dodaje folder StoreManager do folderu Views projektu
• Dodaje on do klasy Album pliki Create.cshtml, Delete.cshtml, Edit.cshtml i Index.cshtml.

Nowa klasa kontrolera StoreManager obejmuje akcje kontrolera CRUD (tworzenie, odczytywanie, aktualizowanie i usuwanie), które wiedzą, jak pracować z klasą modelu Album i używają kontekstu programu Entity Framework na potrzeby dostępu do bazy danych.

Modyfikowanie widoku szkieletu

Należy pamiętać, że chociaż ten kod został wygenerowany dla nas, jest to standardowy ASP.NET kod MVC, podobnie jak w przypadku pisania w tym samouczku. Jest to przeznaczone do zaoszczędzenia czasu poświęcanego na pisanie kodu kontrolera standardowy i ręczne tworzenie silnie typiowanych widoków, ale nie jest to rodzaj wygenerowanego kodu, który mógł być poprzedzony tragicznymi ostrzeżeniami w komentarzach dotyczących sposobu, w jaki nie trzeba zmieniać kodu. Jest to twój kod i oczekujesz, że go zmienisz.

Zacznijmy więc od szybkiej edycji widoku indeksu StoreManager (/Views/StoreManager/Index.cshtml). W tym widoku zostanie wyświetlona tabela zawierająca listę albumów w naszym sklepie z linkami Edytuj/Szczegóły/Usuwanie i zawiera właściwości publiczne albumu. Usuniemy pole AlbumArtUrl, ponieważ nie jest to bardzo przydatne w tym wyświetlaczu. W <sekcji tabeli> kodu widoku usuń <elementy th> i <td> otaczające odwołania AlbumArtUrl, zgodnie z wyróżnionymi wierszami poniżej:

<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th>
            AlbumArtUrl
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Artist.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.AlbumArtUrl)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}
</table>

Zmodyfikowany kod widoku będzie wyświetlany w następujący sposób:

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create
New", "Create")
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Artist.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}
</table>

Pierwsze spojrzenie na Menedżera sklepów

Teraz uruchom aplikację i przejdź do /StoreManager/. Spowoduje to wyświetlenie właśnie zmodyfikowanego indeksu Menedżera sklepu z listą albumów w sklepie z linkami do pozycji Edytuj, Szczegóły i Usuń.

Kliknięcie linku Edytuj powoduje wyświetlenie formularza edycji z polami albumu, w tym listami rozwijanymi dla gatunku i artysty.

Kliknij link "Powrót do listy" u dołu, a następnie kliknij link Szczegóły albumu. Spowoduje to wyświetlenie szczegółowych informacji dotyczących pojedynczego albumu.

Ponownie kliknij link Wstecz do listy, a następnie kliknij link Usuń. Spowoduje to wyświetlenie okna dialogowego potwierdzenia z wyświetlonymi szczegółami albumu i pytaniem, czy na pewno chcemy go usunąć.

Kliknięcie przycisku Usuń u dołu spowoduje usunięcie albumu i powrót do strony Indeks, na której zostanie wyświetlony usunięty album.

Nie robimy tego z Menedżerem sklepu, ale pracujemy nad kontrolerem i wyświetlamy kod dla operacji CRUD do rozpoczęcia od.

Patrząc na kod kontrolera menedżera sklepu

Kontroler menedżera sklepu zawiera dobrą ilość kodu. Przejdźmy przez to od góry do dołu. Kontroler zawiera niektóre standardowe przestrzenie nazw dla kontrolera MVC, a także odwołanie do przestrzeni nazw Modele. Kontroler ma prywatne wystąpienie klasy MusicStoreEntities używane przez każdą z akcji kontrolera na potrzeby dostępu do danych.

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;
 
namespace MvcMusicStore.Controllers
{ 
    public class StoreManagerController : Controller
    {
        private MusicStoreEntities db = new MusicStoreEntities();

Akcje Indeks i Szczegóły menedżera sklepu

Widok indeksu pobiera listę albumów, w tym informacje o gatunku i wykonawcy każdego albumu, jak poprzednio widzieliśmy podczas pracy z metodą Store Browse. Widok Indeks jest następujący po odwołaniach do połączonych obiektów, aby można było wyświetlić nazwę gatunku każdego albumu i nazwę artysty, aby kontroler był wydajny i wysyłał zapytania o te informacje w oryginalnym żądaniu.

//
// GET: /StoreManager/
public ViewResult Index()
{
    var albums = db.Albums.Include(a => a.Genre).Include(a => a.Artist);
    return View(albums.ToList());
}

Akcja kontrolera Szczegóły kontrolera StoreManager działa dokładnie tak samo jak akcja Szczegóły kontrolera sklepu, którą napisaliśmy wcześniej — wysyła zapytanie o album przy użyciu metody Find(), a następnie zwraca ją do widoku.

//
// GET: /StoreManager/Details/5
public ViewResult Details(int id)
{
    Album album = db.Albums.Find(id);
    return View(album);
}

Metody tworzenia akcji

Metody akcji Utwórz różnią się nieco od metod, które widzieliśmy do tej pory, ponieważ obsługują dane wejściowe formularza. Gdy użytkownik po raz pierwszy odwiedzi /StoreManager/Create/, zostanie wyświetlony pusty formularz. Ta strona HTML będzie zawierać <element formularza> zawierający elementy wejściowe listy rozwijanej i pola tekstowego, w których można wprowadzić szczegóły albumu.

Gdy użytkownik wypełni wartości formularza Album, może nacisnąć przycisk "Zapisz", aby przesłać te zmiany z powrotem do naszej aplikacji w celu zapisania w bazie danych. Gdy użytkownik naciśnie przycisk "Zapisz", <formularz> wykona żądanie HTTP-POST z powrotem do adresu URL /StoreManager/Create/ i prześle <wartości formularza> w ramach żądania HTTP-POST.

ASP.NET MVC pozwala nam łatwo podzielić logikę tych dwóch scenariuszy wywołania adresu URL, umożliwiając zaimplementowanie dwóch oddzielnych metod akcji "Utwórz" w klasie StoreManagerController — jeden do obsługi początkowego przeglądania HTTP-GET do adresu URL /StoreManager/Create/, a drugi do obsługi HTTP-POST przesłanych zmian.

Przekazywanie informacji do widoku przy użyciu elementu ViewBag

Wcześniej w tym samouczku użyliśmy elementu ViewBag, ale nie rozmawialiśmy o tym zbyt wiele. Obiekt ViewBag umożliwia przekazywanie informacji do widoku bez użycia silnie typizowanego obiektu modelu. W takim przypadku nasza akcja Edytuj kontroler HTTP-GET musi przekazać zarówno listę gatunków, jak i artystów do formularza, aby wypełnić listy rozwijane, a najprostszym sposobem, aby to zrobić, jest zwrócenie ich jako elementów ViewBag.

Obiekt ViewBag jest obiektem dynamicznym, co oznacza, że można wpisać ViewBag.Foo lub ViewBag.YourNameHere bez konieczności pisania kodu w celu zdefiniowania tych właściwości. W tym przypadku kod kontrolera używa właściwości ViewBag.GenreId i ViewBag.ArtistId, aby wartości rozwijane przesłane za pomocą formularza były wartościami GenreId i ArtistId, które są właściwościami Album, które będą ustawiane.

Te wartości listy rozwijanej są zwracane do formularza przy użyciu obiektu SelectList, który jest kompilowany tylko w tym celu. Odbywa się to przy użyciu kodu w następujący sposób:

ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name");

Jak widać w kodzie metody akcji, do utworzenia tego obiektu są używane trzy parametry:

• Lista elementów, które będą wyświetlane na liście rozwijanej. Pamiętaj, że nie jest to tylko ciąg — przekazujemy listę gatunków.
• Następnym parametrem przekazywanym do listy SelectList jest wybrana wartość. W ten sposób selectList wie, jak wstępnie wybrać element na liście. Będzie to łatwiejsze do zrozumienia, gdy przyjrzymy się formularzowi Edycja, który jest bardzo podobny.
• Ostatnim parametrem jest właściwość, która ma być wyświetlana. W tym przypadku oznacza to, że właściwość Genre.Name będzie wyświetlana użytkownikowi.

Mając to na uwadze, akcja HTTP-GET Create jest dość prosta — dwa listy SelectLists są dodawane do obiektu ViewBag i żaden obiekt modelu nie jest przekazywany do formularza (ponieważ nie został jeszcze utworzony).

//
// GET: /StoreManager/Create
public ActionResult Create()
{
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name");
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name");
    return View();
}

Pomocnicy HTML do wyświetlania list rozwijanych w widoku tworzenia

Ponieważ omówiliśmy sposób przekazywania wartości listy rozwijanej do widoku, przyjrzyjmy się temu widokowi, aby zobaczyć, jak te wartości są wyświetlane. W kodzie widoku (/Views/StoreManager/Create.cshtml) zostanie wykonane następujące wywołanie w celu wyświetlenia listy rozwijanej Gatunek.

@Html.DropDownList("GenreId",
String.Empty)

Jest to nazywane Pomocnik HTML — metoda narzędzia, która wykonuje typowe zadanie wyświetlania. Pomocnicy HTML są bardzo przydatni w utrzymywaniu zwięzłego i czytelnego kodu widoku. Pomocnik Html.DropDownList jest dostarczany przez ASP.NET MVC, ale jak zobaczymy później, można utworzyć własnych pomocników do wyświetlania kodu, który będziemy ponownie używać w naszej aplikacji.

Wywołanie Html.DropDownList musi zawierać tylko dwie rzeczy — gdzie można wyświetlić listę i jaką wartość (jeśli istnieje) należy wstępnie wybrać. Pierwszy parametr, GenreId, informuje DropDownList, aby wyszukać wartość o nazwie GenreId w modelu lub ViewBag. Drugi parametr służy do wskazania wartości, która ma być wyświetlana jako początkowo wybrana na liście rozwijanej. Ponieważ ten formularz jest formularzem Tworzenia, nie ma wartości do wstępnie zaznaczonej, a funkcja String.Empty jest przekazywana.

Obsługa wartości formularza opublikowanego

Jak wspomniano wcześniej, istnieją dwie metody akcji skojarzone z każdym formularzem. Pierwszy obsługuje żądanie HTTP-GET i wyświetla formularz. Drugi obsługuje żądanie HTTP-POST, które zawiera przesłane wartości formularza. Zwróć uwagę, że akcja kontrolera ma atrybut [HttpPost], który informuje ASP.NET MVC, że powinien odpowiadać tylko na żądania HTTP-POST.

//
// POST: /StoreManager/Create
[HttpPost]
public ActionResult Create(Album album)
{
    if (ModelState.IsValid)
    {
        db.Albums.Add(album);
        db.SaveChanges();
        return RedirectToAction("Index");  
    }
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

Ta akcja ma cztery obowiązki:

• 1. Odczytywanie wartości formularza
• 2. Sprawdzanie, czy wartości formularzy przechodzą zgodnie z regułami walidacji
• 3. Jeśli przesłanie formularza jest prawidłowe, zapisz dane i wyświetl zaktualizowaną listę
• 4. Jeśli przesyłanie formularza jest nieprawidłowe, ponownie odtworzyj formularz z błędami walidacji

Odczytywanie wartości formularza za pomocą powiązania modelu

Akcja kontrolera polega na przetwarzaniu przesyłania formularza, który zawiera wartości w polach GenreId i ArtistId (z listy rozwijanej) oraz wartości pola tekstowego Tytuł, Cena i AlbumArtUrl. Chociaż istnieje możliwość bezpośredniego uzyskiwania dostępu do wartości formularzy, lepszym rozwiązaniem jest użycie funkcji powiązania modelu wbudowanego w ASP.NET MVC. Gdy działanie kontrolera przyjmuje typ modelu jako parametr, ASP.NET MVC podejmie próbę wypełnienia obiektu tego typu przy użyciu danych wejściowych formularza (a także wartości tras i zapytań). Robi to, wyszukując wartości, których nazwy pasują do właściwości obiektu modelu, np. podczas ustawiania wartości GenreId nowego obiektu Album, szuka danych wejściowych o nazwie GenreId. Podczas tworzenia widoków przy użyciu standardowych metod w ASP.NET MVC formularze będą zawsze renderowane przy użyciu nazw właściwości jako nazw pól wejściowych, więc nazwy pól będą po prostu dopasowywane.

Weryfikowanie modelu

Model jest weryfikowany przy użyciu prostego wywołania modelu ModelState.IsValid. Nie dodaliśmy jeszcze żadnych reguł weryfikacji do naszej klasy Album - zrobimy to nieco - więc teraz to sprawdzenie nie ma wiele do zrobienia. Ważne jest, aby ten test ModelStat.IsValid dostosować się do reguł weryfikacji, które wprowadzimy w naszym modelu, więc przyszłe zmiany reguł weryfikacji nie będą wymagały żadnych aktualizacji kodu akcji kontrolera.

Zapisywanie przesłanych wartości

Jeśli przesyłanie formularza przejdzie walidację, nadszedł czas, aby zapisać wartości w bazie danych. W programie Entity Framework wystarczy dodać model do kolekcji Albums i wywołać metodę SaveChanges.

db.Albums.Add(album);
db.SaveChanges();

Platforma Entity Framework generuje odpowiednie polecenia SQL, aby utrwały wartość. Po zapisaniu danych nastąpi przekierowanie z powrotem do listy albumów, abyśmy mogli zobaczyć naszą aktualizację. Jest to wykonywane przez zwrócenie funkcji RedirectToAction z nazwą akcji kontrolera, którą chcemy wyświetlić. W tym przypadku jest to metoda Index.

Wyświetlanie nieprawidłowych przesłanych formularzy z błędami walidacji

W przypadku nieprawidłowych danych wejściowych formularza wartości listy rozwijanej są dodawane do elementu ViewBag (tak jak w przypadku HTTP-GET), a powiązane wartości modelu są przekazywane z powrotem do widoku do wyświetlania. Błędy walidacji są wyświetlane automatycznie przy użyciu @Html.ValidationMessageFor pomocnika HTML.

Testowanie formularza tworzenia

Aby to przetestować, uruchom aplikację i przejdź do /StoreManager/Create/ — spowoduje to wyświetlenie pustego formularza zwróconego przez metodę StoreController Create HTTP-GET.

Wypełnij niektóre wartości i kliknij przycisk Utwórz, aby przesłać formularz.

Obsługa edycji

Para akcji Edytuj (HTTP-GET i HTTP-POST) jest bardzo podobna do metod tworzenia akcji, na które właśnie przyjrzeliśmy się. Ponieważ scenariusz edycji obejmuje pracę z istniejącym albumem, metoda Edit HTTP-GET ładuje album na podstawie parametru "id" przekazanego za pośrednictwem trasy. Ten kod do pobierania albumu przez AlbumId jest taki sam, jak wcześniej omówiliśmy w akcji Kontrolera szczegółów. Podobnie jak w przypadku metody Create/HTTP-GET, wartości listy rozwijanej są zwracane za pośrednictwem elementu ViewBag. Dzięki temu możemy zwrócić album jako obiekt modelu do widoku (który jest silnie wpisany do klasy Album) podczas przekazywania dodatkowych danych (np. listy gatunków) za pośrednictwem elementu ViewBag.

//
// GET: /StoreManager/Edit/5
public ActionResult Edit(int id)
{
    Album album = db.Albums.Find(id);
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

Akcja Edytuj HTTP-POST jest bardzo podobna do akcji Utwórz HTTP-POST. Jedyną różnicą jest to, że zamiast dodawać nowy album do bazy danych. Kolekcja albumów— znajdujemy bieżące wystąpienie albumu przy użyciu bazy danych. Entry(album) i ustawienie jego stanu na Zmodyfikowany. Informuje to platformę Entity Framework, że modyfikujemy istniejący album w przeciwieństwie do tworzenia nowego.

//
// POST: /StoreManager/Edit/5
[HttpPost]
public ActionResult Edit(Album album)
{
    if (ModelState.IsValid)
    {
        db.Entry(album).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

Możemy to przetestować, uruchamiając aplikację i przechodząc do /StoreManger/, a następnie klikając link Edytuj dla albumu.

Spowoduje to wyświetlenie formularza Edycja wyświetlanego przez metodę Edit HTTP-GET. Wypełnij niektóre wartości i kliknij przycisk Zapisz.

Spowoduje to opublikowanie formularza, zapisanie wartości i zwrócenie nas do listy Album z informacją o zaktualizowaniu wartości.

Obsługa usuwania

Usunięcie jest zgodne z tym samym wzorcem co Edytuj i Utwórz, używając jednej akcji kontrolera w celu wyświetlenia formularza potwierdzenia i innej akcji kontrolera do obsługi przesyłania formularza.

Akcja kontrolera HTTP-GET Delete jest dokładnie taka sama jak w przypadku poprzedniej akcji Kontrolera szczegółów Menedżera sklepu.

//
// GET: /StoreManager/Delete/5
 
public ActionResult Delete(int id)
{
    Album album = db.Albums.Find(id);
    return View(album);
}

Wyświetlamy formularz, który jest silnie wpisany do typu Album przy użyciu szablonu Usuń widok zawartości.

Szablon Usuń pokazuje wszystkie pola modelu, ale możemy uprościć to nieco. Zmień kod widoku w pliku /Views/StoreManager/Delete.cshtml na następujący.

@model MvcMusicStore.Models.Album
@{
    ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>
<p>Are you sure you want to delete the album titled 
   <strong>@Model.Title</strong>?
</p>
@using (Html.BeginForm()) {
    <p>
        <input type="submit" value="Delete" />
    </p>
    <p>
        @Html.ActionLink("Back to
List", "Index")
    </p>
}

Spowoduje to wyświetlenie uproszczonego potwierdzenia usunięcia.

Kliknięcie przycisku Usuń powoduje opublikowanie formularza z powrotem na serwerze, co powoduje wykonanie akcji DeleteConfirmed.

//
// POST: /StoreManager/Delete/5
[HttpPost, ActionName("Delete")]
public ActionResult DeleteConfirmed(int id)
{            
    Album album = db.Albums.Find(id);
    db.Albums.Remove(album);
    db.SaveChanges();
    return RedirectToAction("Index");
}

Nasza akcja usuwania HTTP-POST kontrolera wykonuje następujące czynności:

• 1. Ładuje album według identyfikatora
• 2. Usuwa album i zapisuje zmiany
• 3. Przekierowuje do indeksu z informacją, że album został usunięty z listy

Aby to przetestować, uruchom aplikację i przejdź do /StoreManager. Wybierz album z listy i kliknij link Usuń.

Spowoduje to wyświetlenie ekranu potwierdzenia Usuń.

Kliknięcie przycisku Usuń powoduje usunięcie albumu i zwrócenie go do strony Indeks Menedżera sklepu, która pokazuje, że album został usunięty.

Używanie niestandardowego pomocnika HTML do obcinania tekstu

Mamy jeden potencjalny problem ze stroną indeksu Menedżera sklepu. Właściwości Tytuł albumu i Nazwa artysty mogą być wystarczająco długie, aby można było odrzucić formatowanie tabeli. Utworzymy niestandardowy pomocnik HTML, aby umożliwić nam łatwe obcinanie tych i innych właściwości w naszych widokach.

Składnia @helper Razor ułatwiła tworzenie własnych funkcji pomocników do użycia w widokach. Otwórz widok /Views/StoreManager/Index.cshtml i dodaj następujący kod bezpośrednio po @model wierszu.

@helper Truncate(string
input, int length)
 {
    if (input.Length <= length) {
        @input
    } else {
        @input.Substring(0, length)<text>...</text>
    }
}

Ta metoda pomocnika przyjmuje ciąg i maksymalną długość, która ma być dozwolona. Jeśli podany tekst jest krótszy niż określona długość, pomocnik wyprowadza go zgodnie z oczekiwaniami. Jeśli jest dłuższy, zostanie obcięty tekst i renderuje "..." dla reszty.

Teraz możemy użyć naszego pomocnika Truncate, aby upewnić się, że właściwości Tytuł albumu i Nazwa artysty są mniejsze niż 25 znaków. Poniżej pojawi się kompletny kod widoku korzystający z naszego nowego pomocnika Truncate.

@model IEnumerable<MvcMusicStore.Models.Album>
@helper Truncate(string input, int length)
 {
    if (input.Length <= length) {
        @input
    } else {
        @input.Substring(0, length)<text>...</text>
    }
}
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create
New", "Create")
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Truncate(item.Artist.Name, 25)
        </td>
        <td>
            @Truncate(item.Title, 25)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}
</table>

Teraz, gdy przeglądamy adres URL /StoreManager/, albumy i tytuły są przechowywane poniżej naszych maksymalnych długości.

Uwaga: Pokazuje to prosty przypadek tworzenia i używania pomocnika w jednym widoku. Aby dowiedzieć się więcej na temat tworzenia pomocników, których można używać w całej witrynie, zobacz mój wpis w blogu: http://bit.ly/mvc3-helper-options

WsteczDalej