ASP.NET MVC 4 — pomocnicy, formularze i walidacja

Pobierz zestaw szkoleniowy obozów internetowych

W ASP.NET modelach MVC 4 i praktycznym dostępie do danych laboratorium ładowano i wyświetlano dane z bazy danych. W tym praktycznym laboratorium dodasz do aplikacji sklepu Music Store możliwość edytowania tych danych.

Mając na uwadze ten cel, należy najpierw utworzyć kontroler, który będzie obsługiwać akcje Tworzenia, odczytu, aktualizacji i usuwania (CRUD) albumów. Wygenerujesz szablon widoku indeksu, korzystając z funkcji tworzenia szkieletów ASP.NET MVC w celu wyświetlenia właściwości albumów w tabeli HTML. Aby ulepszyć ten widok, dodasz niestandardowy pomocnik HTML, który obcina długie opisy.

Następnie dodasz widok Edytuj i Utwórz widoki, które umożliwią zmianę albumów w bazie danych przy użyciu elementów formularza, takich jak listy rozwijane.

Na koniec pozwolisz użytkownikom usunąć album, a także uniemożliwić im wprowadzanie nieprawidłowych danych przez zweryfikowanie danych wejściowych.

W tym praktycznym laboratorium założono, że masz podstawową wiedzę na temat ASP.NET MVC. Jeśli wcześniej nie użyto ASP.NET MVC , zalecamy zapoznanie się z ASP.NET praktycznym laboratorium MVC Fundamentals .

W tym laboratorium przedstawiono ulepszenia i nowe funkcje opisane wcześniej przez zastosowanie drobnych zmian w przykładowej aplikacji internetowej udostępnionej w folderze Source.

Uwaga

Cały przykładowy kod i fragmenty kodu znajdują się w zestawie szkoleniowym web camps dostępnym w witrynie Microsoft-Web/WebCampTrainingKit Releases. Projekt specyficzny dla tego laboratorium jest dostępny w ASP.NET pomocników MVC 4, formularzy i walidacji.

Cele

W tym praktycznym laboratorium dowiesz się, jak wykonywać następujące działania:

Tworzenie kontrolera do obsługi operacji CRUD
Generowanie widoku indeksu w celu wyświetlenia właściwości jednostki w tabeli HTML
Dodawanie niestandardowego pomocnika HTML
Tworzenie i dostosowywanie widoku edycji
Rozróżnianie metod akcji reagujących na wywołania HTTP-GET lub HTTP-POST
Dodawanie i dostosowywanie widoku tworzenia
Obsługa usuwania jednostki
Weryfikowanie danych wejściowych użytkownika

Wymagania wstępne

Aby ukończyć to laboratorium, musisz mieć następujące elementy:

Microsoft Visual Studio Express 2012 for Web lub superior (przeczytaj dodatek A , aby uzyskać instrukcje dotyczące sposobu jego instalowania).

Ustawienia

Instalowanie fragmentów kodu

Dla wygody większość kodu, którym będziesz zarządzać w tym laboratorium, jest dostępna jako fragmenty kodu programu Visual Studio. Aby zainstalować fragmenty kodu, uruchom plik .\Source\Setup\CodeSnippets.vsi .

Jeśli nie znasz fragmentów kodu programu Visual Studio Code i chcesz dowiedzieć się, jak z nich korzystać, możesz zapoznać się z dodatkiem z tego dokumentu "Dodatek B: Używanie fragmentów kodu".

Ćwiczenia

Następujące ćwiczenia składają się na to laboratorium praktyczne:

Tworzenie kontrolera Menedżera magazynu i jego widoku indeksu
Dodawanie pomocnika HTML
Tworzenie widoku edycji
Dodawanie widoku tworzenia
Obsługa usuwania
Dodawanie weryfikacji
Używanie nietrudnego zapytania jQuery po stronie klienta

Uwaga

Każde ćwiczenie jest dołączone do folderu End zawierającego wynikowe rozwiązanie, które należy uzyskać po zakończeniu ćwiczeń. Możesz użyć tego rozwiązania jako przewodnika, jeśli potrzebujesz dodatkowej pomocy podczas wykonywania ćwiczeń.

Szacowany czas ukończenia tego laboratorium: 60 minut

Ćwiczenie 1. Tworzenie kontrolera Menedżera magazynu i jego widoku indeksu

W tym ćwiczeniu dowiesz się, jak utworzyć nowy kontroler do obsługi operacji CRUD, dostosować metodę akcji Indeks, aby zwrócić listę albumów z bazy danych, a na koniec wygenerować szablon Widok indeksu, korzystając z funkcji tworzenia szkieletów ASP.NET MVC w celu wyświetlenia właściwości albumów w tabeli HTML.

Zadanie 1 — Tworzenie kontrolera StoreManagerController

W tym zadaniu utworzysz nowy kontroler o nazwie StoreManagerController do obsługi operacji CRUD.

Otwórz rozwiązanie Begin znajdujące się w folderze Source/Ex1-CreatingTheStoreManagerController/Begin/.
1. Zanim przejdziesz dalej, musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Dodaj nowy kontroler. W tym celu kliknij prawym przyciskiem myszy folder Controllers w Eksplorator rozwiązań, wybierz polecenie Dodaj, a następnie polecenie Kontroler. Zmień nazwę kontrolera na StoreManagerController i upewnij się, że wybrano opcję Kontroler MVC z pustymi akcjami odczytu/zapisu. Kliknij przycisk Dodaj.

Okno dialogowe Dodawanie kontrolera

Zostanie wygenerowana nowa klasa Kontrolera. Ponieważ wskazano dodawanie akcji dla operacji odczytu/zapisu, metody wycinków dla tych metod, typowe akcje CRUD są tworzone z wypełnionymi komentarzami TODO, monitując o uwzględnienie logiki specyficznej dla aplikacji.

Zadanie 2 — dostosowywanie indeksu StoreManager

W tym zadaniu dostosujesz metodę akcji indeksu StoreManager, aby zwrócić widok z listą albumów z bazy danych.

W klasie StoreManagerController dodaj następujące dyrektywy using .

(Fragment kodu — ASP.NET pomocników i formularzy i formularzy MVC 4 — Ex1 przy użyciu mvcMusicStore)
```
using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;
```
Dodaj pole do klasy StoreManagerController w celu przechowywania wystąpienia klasy MusicStoreEntities.

(Fragment kodu — ASP.NET pomocników i formularzy i formularzy MVC 4 — Ex1 MusicStoreEntities)
```
public class StoreManagerController : Controller
{
    private MusicStoreEntities db = new MusicStoreEntities();
```
Zaimplementuj akcję Indeks StoreManagerController, aby zwrócić widok z listą albumów.

Logika akcji Kontrolera będzie bardzo podobna do napisanej wcześniej akcji Indeks kontrolera sklepu StoreController. Użyj LINQ, aby pobrać wszystkie albumy, w tym informacje o gatunku i artystę na potrzeby wyświetlania.

(Fragment kodu — ASP.NET pomocników i formularzy i formularzy MVC 4 — Indeks Ex1 StoreManagerController)
```
//
// GET: /StoreManager/

public ActionResult Index()
{
    var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
         .OrderBy(a => a.Price);

    return this.View(albums.ToList());
}
```

Zadanie 3 . Tworzenie widoku indeksu

W tym zadaniu utworzysz szablon Widok indeksu, aby wyświetlić listę albumów zwróconych przez kontroler StoreManager .

Przed utworzeniem nowego szablonu Widok należy skompilować projekt, aby okno dialogowe Dodawanie widoku wiedziało o klasie Album do użycia. Wybierz pozycję Kompilacja | Skompiluj plik MvcMusicStore , aby skompilować projekt.
Kliknij prawym przyciskiem myszy metodę akcji Indeks i wybierz polecenie Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku .

Dodawanie widoku z poziomu metody Index
W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku to Indeks. Wybierz opcję Utwórz widok silnie typizowane i wybierz pozycję Album (MvcMusicStore.Models) z listy rozwijanej Klasa modelu. Wybierz pozycję Lista z listy rozwijanej Szablon szkieletu . Pozostaw aparat widoków razor i inne pola z wartością domyślną, a następnie kliknij przycisk Dodaj.

Dodawanie widoku indeksu

Zadanie 4 . Dostosowywanie szkieletu widoku indeksu

W tym zadaniu dostosujesz prosty szablon Widok utworzony za pomocą ASP.NET funkcji tworzenia szkieletów MVC, aby wyświetlić odpowiednie pola.

Uwaga

Obsługa tworzenia szkieletów w ASP.NET MVC generuje prosty szablon widoku, który wyświetla listę wszystkich pól w modelu Album. Tworzenie szkieletów umożliwia szybkie rozpoczęcie pracy w silnie typiowanym widoku: zamiast ręcznego pisania szablonu Widok szkielet szybko generuje szablon domyślny, a następnie można zmodyfikować wygenerowany kod.

Przejrzyj utworzony kod. Wygenerowana lista pól będzie częścią poniższej tabeli HTML używanej do wyświetlania danych tabelarycznych.

@model IEnumerable<MvcMusicStore.Models.Album>

@{
     ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
     @Html.ActionLink("Create New", "Create")
</p>
<table>
     <tr>
          <th>
                @Html.DisplayNameFor(model => model.GenreId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.ArtistId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Title)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Price)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.AlbumArtUrl)
          </th>
          <th></th>
     </tr>

@foreach (var item in Model) {
     <tr>
          <td>
                @Html.DisplayFor(modelItem => item.GenreId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.ArtistId)
          </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>

<Zastąp kod tabeli> następującym kodem, aby wyświetlić tylko pola Gatunek, Artysta, Tytuł albumu i Cena. Spowoduje to usunięcie kolumn AlbumId i Adresu URL sztuki albumu. Ponadto zmienia kolumny GenreId i ArtistId, aby wyświetlić ich połączone właściwości klasy Artist.Name i Genre.Name, a następnie usuwa link Szczegóły .

<table>
    <tr>
      <th></th>
      <th>Genre</th>
      <th>Artist</th>
      <th>Title</th>
      <th>Price</th>
    </tr>

    @foreach (var item in Model) {
     <tr>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
          <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>
     </tr>
    }
</table>

Zmień następujące opisy.

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

Zadanie 5 . Uruchamianie aplikacji

W tym zadaniu sprawdzisz, czy szablon StoreManager Index View wyświetla listę albumów zgodnie z projektem poprzednich kroków.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager, aby sprawdzić, czy jest wyświetlana lista albumów, pokazując tytuł, artysta i gatunek.

Przeglądanie listy albumów

Ćwiczenie 2. Dodawanie pomocnika HTML

Strona indeksu StoreManager ma jeden potencjalny problem: właściwości Tytuł i Nazwa artysty mogą być wystarczająco długie, aby odrzucić formatowanie tabeli. W tym ćwiczeniu dowiesz się, jak dodać niestandardowy pomocnik HTML, aby obcinać ten tekst.

Na poniższym rysunku widać, jak format jest modyfikowany ze względu na długość tekstu, gdy używasz małego rozmiaru przeglądarki.

Przeglądanie listy albumów bez obciętego tekstu

Przeglądanie listy albumów bez obciętego tekstu

Zadanie 1 — rozszerzanie pomocnika HTML

W tym zadaniu dodasz nową metodę Truncate do obiektu HTML uwidocznionego w widokach ASP.NET MVC. W tym celu zaimplementujesz metodę rozszerzenia do wbudowanej klasy System.Web.Mvc.HtmlHelper dostarczonej przez ASP.NET MVC.

Uwaga

Aby dowiedzieć się więcej na temat metod rozszerzeń, odwiedź ten artykuł msdn. https://msdn.microsoft.com/library/bb383977.aspx.

Otwórz rozwiązanie Begin znajdujące się w folderze Source/Ex2-AddingAnHTMLHelper/Begin/. W przeciwnym razie możesz kontynuować korzystanie z rozwiązania końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Otwórz widok indeksu menedżera sklepu. W tym celu w Eksplorator rozwiązań rozwiń folder Views, a następnie StoreManager i otwórz plik Index.cshtml.

Dodaj następujący kod poniżej dyrektywy @model , aby zdefiniować metodę 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 = "Store Manager - All Albums";
}

<h2>Albums</h2>

Zadanie 2 . Obcięcie tekstu na stronie

W tym zadaniu użyjesz metody Truncate , aby obcinać tekst w szablonie Widok.

Otwórz widok indeksu menedżera sklepu. W tym celu w Eksplorator rozwiązań rozwiń folder Views, a następnie StoreManager i otwórz plik Index.cshtml.

Zastąp wiersze, które pokazują nazwę artysty i tytuł albumu. W tym celu zastąp następujące wiersze.

<tr>
     <td>
          @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

          @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
     </td>
     <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>
</tr>

Zadanie 3 — uruchamianie aplikacji

W tym zadaniu sprawdzisz, czy szablon StoreManager Index View obcina tytuł i nazwę artysty albumu.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager , aby sprawdzić, czy długie teksty w kolumnie Tytuł i Artysta są obcięte.

Obcięte tytuły i nazwy artystów

Ćwiczenie 3. Tworzenie widoku edycji

W tym ćwiczeniu dowiesz się, jak utworzyć formularz umożliwiający menedżerom sklepów edytowanie albumu. Będą przeglądać adres URL /StoreManager/Edit/id (identyfikator jest unikatowym identyfikatorem albumu do edycji), co spowoduje wywołanie HTTP-GET na serwerze.

Metoda akcji Edycja kontrolera pobierze odpowiedni album z bazy danych, utworzy obiekt StoreManagerViewModel , aby go hermetyzować (wraz z listą artystów i gatunków), a następnie przekazać go do szablonu Widok w celu renderowania strony HTML z powrotem do użytkownika. Ta strona będzie zawierać <element formularza> z polami tekstowymi i listami rozwijanymi do edytowania właściwości albumu.

Gdy użytkownik zaktualizuje wartości formularza Album i kliknie przycisk Zapisz , zmiany zostaną przesłane za pośrednictwem wywołania HTTP-POST z powrotem do /StoreManager/Edit/id. Mimo że adres URL pozostaje taki sam jak w ostatnim wywołaniu, ASP.NET MVC identyfikuje, że tym razem jest to HTTP-POST i dlatego wykonuje inną metodę akcji Edit (jedną ozdobioną [HttpPost]).

Zadanie 1 . Implementowanie metody akcji edycji HTTP-GET

W tym zadaniu zaimplementujesz wersję HTTP-GET metody akcji Edytuj, aby pobrać odpowiedni album z bazy danych, a także listę wszystkich gatunków i artystów. Spakuje te dane do obiektu StoreManagerViewModel zdefiniowanego w ostatnim kroku, który następnie zostanie przekazany do szablonu Widok w celu renderowania odpowiedzi.

Otwórz rozwiązanie Rozpocznij znajdujące się w folderze Source/Ex3-CreatingTheEditView/Begin/. W przeciwnym razie możesz kontynuować korzystanie z rozwiązania końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Otwórz klasę StoreManagerController . W tym celu rozwiń folder Kontrolery i kliknij dwukrotnie StoreManagerController.cs.
Zastąp metodę akcji HTTP-GET Edit następującym kodem, aby pobrać odpowiedni album , a także listy Gatunki i artyści .

(Fragment kodu — ASP.NET pomocników i formularzy i weryfikacji MVC 4 — Akcja HTTP-GET Edit ex3 StoreManagerController)
```
public ActionResult Edit(int id)
{
    Album album = this.db.Albums.Find(id);

    if (album == null)
    {
         return this.HttpNotFound();
    }

    this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
    this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

    return this.View(album);
}
```
Uwaga

Używasz elementu System.Web.Mvc SelectList for Artists and Genres zamiast Listy System.Collections.Generic .

SelectList to czystszy sposób wypełniania list rozwijanych HTML i zarządzania elementami takimi jak bieżące zaznaczenie. Utworzenie wystąpienia i późniejsze skonfigurowanie tych obiektów ViewModel w akcji kontrolera spowoduje, że edytowanie scenariusza formularza będzie czystsze.

Zadanie 2 . Tworzenie widoku edycji

W tym zadaniu utworzysz szablon Edytuj widok, który będzie później wyświetlał właściwości albumu.

Utwórz widok edycji. W tym celu kliknij prawym przyciskiem myszy metodę akcji Edytuj i wybierz polecenie Dodaj widok.
W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku to Edytuj. Zaznacz pole wyboru Utwórz silnie wpisany widok i wybierz pozycję Album (MvcMusicStore.Models) z listy rozwijanej Wyświetl klasę danych. Wybierz pozycję Edytuj z listy rozwijanej Szablon szkieletu . Pozostaw inne pola z wartością domyślną, a następnie kliknij przycisk Dodaj.

Dodawanie widoku edycji

Zadanie 3 — uruchamianie aplikacji

W tym zadaniu sprawdzisz, czy na stronie StoreManager Edit View są wyświetlane wartości właściwości albumu przekazanego jako parametr.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager/Edit/1 , aby sprawdzić, czy są wyświetlane wartości właściwości przekazanego albumu.

Widok edycji albumu przeglądania

Zadanie 4 . Implementowanie list rozwijanych w szablonie edytora albumów

W tym zadaniu dodasz listy rozwijane do szablonu Wyświetl utworzone w ostatnim zadaniu, aby użytkownik mógł wybrać z listy artystów i gatunków.

Zastąp cały kod zestawu pól Album następującym kodem:

<fieldset>
     <legend>Album</legend>

     @Html.HiddenFor(model => model.AlbumId)

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Title)
          @Html.ValidationMessageFor(model => model.Title)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Price)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Price)
          @Html.ValidationMessageFor(model => model.Price)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.AlbumArtUrl)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.AlbumArtUrl)
          @Html.ValidationMessageFor(model => model.AlbumArtUrl)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Artist)
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Genre)
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <p>
          <input type="submit" value="Save" />
     </p>
</fieldset>

Uwaga

Dodano pomocnik Html.DropDownList do renderowania list rozwijanych do wybierania artystów i gatunków. Parametry przekazane do listy Html.DropDownList to:

Nazwa pola formularza ("ArtistId").
Lista wyboru wartości listy rozwijanej.

Zadanie 5 . Uruchamianie aplikacji

W tym zadaniu przetestujesz, że na stronie StoreManager Edit View są wyświetlane listy rozwijane zamiast pól tekstowych Artist and Genre ID (Identyfikator gatunku).

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager/Edit/1 , aby sprawdzić, czy wyświetla listy rozwijane zamiast pól tekstowych Artysta i Identyfikator gatunku.

Widok edycji albumu przeglądania, tym razem z listami rozwijanymi

Zadanie 6 . Implementowanie metody akcji Http-POST Edit

Teraz, gdy widok edycji jest wyświetlany zgodnie z oczekiwaniami, musisz zaimplementować metodę akcji edycji HTTP-POST, aby zapisać zmiany wprowadzone w albumie.

W razie potrzeby zamknij przeglądarkę, aby wrócić do okna programu Visual Studio. Otwórz element StoreManagerController z folderu Controllers .
Zastąp kod metody akcji HTTP-POST Edit następującym kodem (należy pamiętać, że metoda, która musi zostać zamieniona, jest przeciążona wersja, która odbiera dwa parametry):

(Fragment kodu — ASP.NET pomocników MVC 4 i formularzy i walidacji — Akcja edycji HTTP-POST Ex3 StoreManagerController)
```
[HttpPost]
public ActionResult Edit(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Entry(album).State = EntityState.Modified;
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}
```
Uwaga

Ta metoda zostanie wykonana, gdy użytkownik kliknie przycisk Zapisz w widoku i wykona http-POST wartości formularza z powrotem na serwerze, aby utrwały je w bazie danych. Dekorator [HttpPost] wskazuje, że należy użyć metody dla tych scenariuszy HTTP-POST. Metoda przyjmuje obiekt Album . ASP.NET MVC automatycznie utworzy obiekt Album na podstawie opublikowanych <wartości formularza> .

Metoda wykona następujące kroki:
1. Jeśli model jest prawidłowy:
  1. Zaktualizuj wpis albumu w kontekście, aby oznaczyć go jako zmodyfikowany obiekt.
  2. Zapisz zmiany i przekieruj do widoku indeksu.
2. Jeśli model jest nieprawidłowy, wypełni element ViewBag wartością GenreId i ArtistId, a następnie zwróci widok z odebranymi obiektami Album, aby umożliwić użytkownikowi wykonanie dowolnej wymaganej aktualizacji.

Zadanie 7 . Uruchamianie aplikacji

W tym zadaniu przetestujesz, że strona StoreManager Edit View rzeczywiście zapisuje zaktualizowane dane albumu w bazie danych.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager/Edit/1. Zmień tytuł albumu na Załaduj i kliknij przycisk Zapisz. Sprawdź, czy tytuł albumu rzeczywiście zmienił się na liście albumów.

Aktualizowanie albumu

Ćwiczenie 4. Dodawanie widoku tworzenia

Teraz, gdy kontrolka StoreManagerController obsługuje możliwość edycji , w tym ćwiczeniu dowiesz się, jak dodać szablon Utwórz widok, aby umożliwić menedżerom sklepów dodawanie nowych albumów do aplikacji.

Podobnie jak w przypadku funkcji Edytuj, zaimplementujesz scenariusz Tworzenie przy użyciu dwóch oddzielnych metod w klasie StoreManagerController :

Jedna metoda akcji wyświetli pusty formularz, gdy menedżerowie sklepu najpierw odwiedzą adres URL /StoreManager/Create .
Druga metoda akcji będzie obsługiwać scenariusz, w którym menedżer sklepu klika przycisk Zapisz w formularzu i przesyła wartości z powrotem do adresu URL /StoreManager/Create jako HTTP-POST.

Zadanie 1 . Implementowanie metody akcji HTTP-GET Create

W tym zadaniu zaimplementujesz wersję HTTP-GET metody akcji Utwórz, aby pobrać listę wszystkich gatunków i artystów, spakować te dane do obiektu StoreManagerViewModel , który następnie zostanie przekazany do szablonu Widok.

Otwórz rozwiązanie Rozpocznij znajdujące się w folderze Source/Ex4-AddingACreateView/Begin/. W przeciwnym razie możesz kontynuować korzystanie z rozwiązania końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Otwórz klasę StoreManagerController . W tym celu rozwiń folder Kontrolery i kliknij dwukrotnie StoreManagerController.cs.

Zastąp kod metody Create action następującym kodem:

(Fragment kodu — ASP.NET pomocników i formularzy i formularzy MVC 4 — Akcja HTTP-GET Create ex4 StoreManagerController)

//
// GET: /StoreManager/Create

public ActionResult Create()
{
     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");

     return this.View();
}

Zadanie 2 . Dodawanie widoku tworzenia

W tym zadaniu dodasz szablon Utwórz widok, który wyświetli nowy (pusty) formularz Album.

Kliknij prawym przyciskiem myszy wewnątrz metody akcji Utwórz i wybierz polecenie Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku.
W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku to Utwórz. Wybierz opcję Utwórz widok silnie typizowane i wybierz pozycję Album (MvcMusicStore.Models) z listy rozwijanej Klasa modelu i Utwórz z listy rozwijanej Szablon szkieletu. Pozostaw inne pola z wartością domyślną, a następnie kliknij przycisk Dodaj.

Dodawanie widoku tworzenia

Zaktualizuj pola GenreId i ArtistId, aby użyć listy rozwijanej, jak pokazano poniżej:

...
<fieldset>
     <legend>Album</legend>

     <div class="editor-label">
          @Html.LabelFor(model => model.GenreId, "Genre")
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", String.Empty)
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.ArtistId, "Artist")
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", String.Empty)
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
    ...

Zadanie 3 — uruchamianie aplikacji

W tym zadaniu sprawdzisz, czy na stronie StoreManager Create View zostanie wyświetlony pusty formularz Album.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager/Create. Sprawdź, czy jest wyświetlany pusty formularz do wypełniania nowych właściwości albumu.

Tworzenie widoku z pustym formularzem

Zadanie 4 . Implementowanie metody akcji tworzenia HTTP-POST

W tym zadaniu zaimplementujesz wersję HTTP-POST metody akcji Create, która zostanie wywołana po kliknięciu przycisku Zapisz przez użytkownika. Metoda powinna zapisać nowy album w bazie danych.

W razie potrzeby zamknij przeglądarkę, aby wrócić do okna programu Visual Studio. Otwórz klasę StoreManagerController . W tym celu rozwiń folder Kontrolery i kliknij dwukrotnie StoreManagerController.cs.

Zastąp kod metody akcji HTTP-POST Create następującym kodem:

(Fragment kodu — ASP.NET pomocników i formularzy i formularzy MVC 4 oraz walidacja — Ex4 StoreManagerController HTTP- POST Create action)

[HttpPost]
public ActionResult Create(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Albums.Add(album);
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

Uwaga

Akcja Utwórz jest bardzo podobna do poprzedniej metody akcji Edytuj, ale zamiast ustawiać obiekt jako zmodyfikowany, jest dodawany do kontekstu.

Zadanie 5 . Uruchamianie aplikacji

W tym zadaniu przetestujesz, że strona StoreManager Create View umożliwia utworzenie nowego albumu, a następnie przekierowanie do widoku indeksu StoreManager.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager/Create. Wypełnij wszystkie pola formularza danymi dla nowego albumu, tak jak na poniższej ilustracji:

Tworzenie albumu
Sprawdź, czy nastąpi przekierowanie do widoku indeksu StoreManager, który zawiera właśnie utworzony nowy album.

Nowy album utworzony

Ćwiczenie 5. Obsługa usuwania

Możliwość usuwania albumów nie jest jeszcze zaimplementowana. To jest to, o czym będzie to ćwiczenie. Podobnie jak wcześniej, scenariusz Delete zostanie zaimplementowany przy użyciu dwóch oddzielnych metod w klasie StoreManagerController :

Jedna metoda akcji wyświetli formularz potwierdzenia
Druga metoda akcji będzie obsługiwać przesyłanie formularza

Zadanie 1 . Implementowanie metody akcji usuwania HTTP-GET

W tym zadaniu zaimplementujesz wersję akcji HTTP-GET metody akcji Usuń, aby pobrać informacje o albumie.

Otwórz rozwiązanie Rozpocznij znajdujące się w folderze Source/Ex5-HandlingDeletion/Begin/. W przeciwnym razie możesz kontynuować korzystanie z rozwiązania końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Otwórz klasę StoreManagerController . W tym celu rozwiń folder Kontrolery i kliknij dwukrotnie StoreManagerController.cs.
Akcja Usuń kontrolera jest dokładnie taka sama jak poprzednia akcja kontrolera Szczegóły sklepu: wysyła zapytanie do obiektu albumu z bazy danych przy użyciu identyfikatora podanego w adresie URL i zwraca odpowiedni widok. W tym celu zastąp kod metody akcji HTTP-GET Delete następującym kodem:

(Fragment kodu — ASP.NET pomocników i formularzy i walidacji MVC 4 — akcja Usuwania HTTP-GET ex5
```
//
// GET: /StoreManager/Delete/5

public ActionResult Delete(int id)
{
     Album album = this.db.Albums.Find(id);

     if (album == null)
     {
          return this.HttpNotFound();
     }

     return this.View(album);
}
```
Kliknij prawym przyciskiem myszy metodę akcji Usuń i wybierz polecenie Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku.
W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku to Usuń. Wybierz opcję Utwórz widok silnie typizowane i wybierz pozycję Album (MvcMusicStore.Models) z listy rozwijanej Klasa modelu. Wybierz pozycję Usuń z listy rozwijanej Szablon szkieletu . Pozostaw inne pola z wartością domyślną, a następnie kliknij przycisk Dodaj.

Dodawanie widoku usuwania

Szablon Usuń zawiera wszystkie pola z modelu. Pokażesz tylko tytuł albumu. W tym celu zastąp zawartość widoku następującym kodem:

@model MvcMusicStore.Models.Album
@{
     ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>

<h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>

@using (Html.BeginForm()) {
     <p>
          <input type="submit" value="Delete" /> |
          @Html.ActionLink("Back to List", "Index")
     </p>
}

Zadanie 2 — uruchamianie aplikacji

W tym zadaniu sprawdzisz, czy na stronie StoreManager Delete View zostanie wyświetlony formularz usuwania potwierdzenia.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager. Wybierz jeden album do usunięcia, klikając pozycję Usuń i sprawdź, czy nowy widok został przekazany.

Usuwanie albumu

Zadanie 3. Implementowanie metody akcji usuwania HTTP-POST

W tym zadaniu zaimplementujesz wersję akcji HTTP-POST metody akcji Usuń, która zostanie wywołana po kliknięciu przycisku Usuń przez użytkownika. Metoda powinna usunąć album w bazie danych.

W razie potrzeby zamknij przeglądarkę, aby wrócić do okna programu Visual Studio. Otwórz klasę StoreManagerController . W tym celu rozwiń folder Kontrolery i kliknij dwukrotnie StoreManagerController.cs.

Zastąp kod metody akcji HTTP-POST Delete następującym kodem:

(Fragment kodu — ASP.NET pomocników i formularzy i walidacji MVC 4 — akcja Usuwania HTTP-POST — Ex5

//
// POST: /StoreManager/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
     Album album = this.db.Albums.Find(id);
     this.db.Albums.Remove(album);
     this.db.SaveChanges();

     return this.RedirectToAction("Index"); 
}

Zadanie 4 . Uruchamianie aplikacji

W tym zadaniu przetestujesz, że strona StoreManager Delete View umożliwia usunięcie albumu, a następnie przekierowanie do widoku indeksu StoreManager.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager. Wybierz jeden album do usunięcia, klikając pozycję Usuń. Potwierdź usunięcie, klikając przycisk Usuń :

Usuwanie albumu
Sprawdź, czy album został usunięty, ponieważ nie jest wyświetlany na stronie Indeks .

Ćwiczenie 6. Dodawanie walidacji

Obecnie wprowadzone formularze Tworzenia i edytowania nie wykonują żadnej weryfikacji. Jeśli użytkownik pozostawi pole wymagane puste lub wpisz litery w polu ceny, pierwszy błąd, który zostanie wyświetlony, będzie pochodzić z bazy danych.

Walidację można dodać do aplikacji, dodając adnotacje danych do klasy modelu. Adnotacje danych umożliwiają opisywanie reguł, które mają zostać zastosowane do właściwości modelu, a ASP.NET MVC zajmie się wymuszaniem i wyświetlaniem odpowiednich komunikatów dla użytkowników.

Zadanie 1 . Dodawanie adnotacji danych

W tym zadaniu dodasz adnotacje danych do modelu albumu, który w razie potrzeby wyświetli komunikaty weryfikacji na stronie Tworzenie i edytowanie.

W przypadku prostej klasy Model dodanie adnotacji danych jest obsługiwane po prostu przez dodanie instrukcji using dla elementu System.ComponentModel.DataAnnotation, a następnie umieszczenie atrybutu [Wymagane] we odpowiednich właściwościach. Poniższy przykład spowoduje, że właściwość Name będzie polem wymaganym w widoku.

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

Jest to nieco bardziej złożone w przypadkach takich jak ta aplikacja, w której jest generowany model danych jednostki. Jeśli dodano adnotacje danych bezpośrednio do klas modelu, zostaną one zastąpione w przypadku zaktualizowania modelu z bazy danych. Zamiast tego można użyć klas częściowych metadanych, które będą istnieć do przechowywania adnotacji i są skojarzone z klasami modelu przy użyciu atrybutu [MetadataType].

Otwórz rozwiązanie Rozpocznij znajdujące się w folderze Source/Ex6-AddingValidation/Begin/. W przeciwnym razie możesz kontynuować korzystanie z rozwiązania końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Otwórz Album.cs z folderu Models.
Zastąp Album.cs zawartości wyróżnionym kodem, tak aby wyglądała następująco:

Uwaga

Wiersz [DisplayFormat(ConvertEmptyStringToNull=false)] wskazuje, że puste ciągi z modelu nie zostaną przekonwertowane na wartość null po zaktualizowaniu pola danych w źródle danych. To ustawienie pozwoli uniknąć wyjątku, gdy program Entity Framework przypisze wartości null do modelu przed zweryfikowaniem pól przez adnotację danych.

(Fragment kodu — ASP.NET pomocników i formularzy MVC 4 oraz weryfikacji — klasa częściowa metadanych albumu Ex6)
```
namespace MvcMusicStore.Models
{
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }

        [DisplayName("Genre")]
        public int GenreId { get; set; }

        [DisplayName("Artist")]
        public int ArtistId { get; set; }

        [Required(ErrorMessage = "An Album Title is required")]
        [DisplayFormat(ConvertEmptyStringToNull = false)]
        [StringLength(160, MinimumLength = 2)]
        public string Title { get; set; }

        [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [DisplayName("Album Art URL")]
        [DataType(DataType.ImageUrl)]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }

        public virtual Genre Genre { get; set; }

        public virtual Artist Artist { get; set; }
    }
}
```
Uwaga

Ta klasa częściowa Album ma atrybut MetadataType, który wskazuje klasę AlbumMetaData dla adnotacji danych. Oto niektóre atrybuty adnotacji danych, których używasz do dodawania adnotacji do modelu albumu:
- Wymagane — wskazuje, że właściwość jest polem wymaganym
- DisplayName — definiuje tekst, który ma być używany w polach formularza i komunikatach sprawdzania poprawności
- DisplayFormat — określa sposób wyświetlania i formatowania pól danych.
- StringLength — definiuje maksymalną długość pola ciągu
- Zakres — daje maksymalną i minimalną wartość pola liczbowego
- SzkieletColumn — umożliwia ukrywanie pól z formularzy edytora

Zadanie 2 — uruchamianie aplikacji

W tym zadaniu sprawdzisz, czy pola Tworzenia i edytowania stron są weryfikowane przy użyciu nazw wyświetlanych wybranych w ostatnim zadaniu.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager/Create. Sprawdź, czy nazwy wyświetlane są zgodne z nazwami w klasie częściowej (na przykład Adres URL albumu art zamiast AlbumArtUrl)
Kliknij przycisk Utwórz bez wypełniania formularza. Sprawdź, czy otrzymujesz odpowiednie komunikaty sprawdzania poprawności.

Zweryfikowane pola na stronie Tworzenie
Możesz sprawdzić, czy taka sama sytuacja występuje na stronie Edytuj . Zmień adres URL na /StoreManager/Edit/1 i sprawdź, czy nazwy wyświetlane są zgodne z tymi w klasie częściowej (na przykład Adres URL albumu art zamiast AlbumArtUrl). Opróżnij pola Tytuł i Cena , a następnie kliknij przycisk Zapisz. Sprawdź, czy otrzymujesz odpowiednie komunikaty sprawdzania poprawności.

Zweryfikowane pola na stronie Edytowanie

Ćwiczenie 7. Używanie nietrudnego zapytania jQuery po stronie klienta

W tym ćwiczeniu dowiesz się, jak włączyć weryfikację zapytania jQuery w trybie unobtrusive MVC 4 po stronie klienta.

Uwaga

Unobtrusive jQuery używa prefiksu data-ajax JavaScript do wywoływania metod akcji na serwerze, a nie natrętnie emitowania wbudowanych skryptów klienta.

Zadanie 1 . Uruchamianie aplikacji przed włączeniem nietrudnego zapytania jQuery

W tym zadaniu uruchomisz aplikację przed dołączeniem zapytania jQuery w celu porównania obu modeli weryfikacji.

Otwórz rozwiązanie Begin znajdujące się w folderze Source/Ex7-UnobtrusivejQueryValidation/Begin/. W przeciwnym razie możesz kontynuować korzystanie z rozwiązania końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Naciśnij klawisz F5, aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Przeglądaj /StoreManager/Utwórz i kliknij przycisk Utwórz bez wypełniania formularza, aby sprawdzić, czy są wyświetlane komunikaty sprawdzania poprawności:

Walidacja klienta jest wyłączona

W przeglądarce otwórz kod źródłowy HTML:

...
          <div class="editor-label">
                <label for="Price">Price</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                <span class="field-validation-valid" id="Price_validationMessage"></span>
          </div>

          <div class="editor-label">
                <label for="AlbumArtUrl">Album Art URL</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
          </div>

          <p>
                <input type="submit" value="Create" />
          </p>
     </fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
...

Zadanie 2 . Włączanie nietrudnej weryfikacji klienta

W tym zadaniu włączysz nietrudną walidację klienta w trybie jQuery z pliku Web.config, który jest domyślnie ustawiony na wartość false we wszystkich nowych projektach MVC 4 ASP.NET. Ponadto dodasz niezbędne odwołania do skryptów, aby działanie weryfikacji klienta w trybie jQuery było nieprawdziwe.

Otwórz plik Web.Config w katalogu głównym projektu i upewnij się, że wartości clientValidationEnabled i UnobtrusiveJavaScriptEnabled kluczy są ustawione na true.
```
...
<configuration>
  <appSettings>
     <add key="webpages:Version" value="2.0.0.0" />
     <add key="webpages:Enabled" value="false" />
     <add key="PreserveLoginUrl" value="true" />
     <add key="ClientValidationEnabled" value="true" />
     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...
```
Uwaga

Możesz również włączyć walidację klienta według kodu w Global.asax.cs, aby uzyskać te same wyniki:

HtmlHelper.ClientValidationEnabled = true;

Ponadto można przypisać atrybut ClientValidationEnabled do dowolnego kontrolera w celu zachowania niestandardowego.
Otwórz plik Create.cshtml w pliku Views\StoreManager.
Upewnij się, że następujące pliki skryptów, jquery.validate i jquery.validate.unobtrusive, są przywoływany w widoku za pośrednictwem pakietu "~/bundles/jqueryval".
```
...
@section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
}
```
Uwaga

Wszystkie te biblioteki jQuery są zawarte w nowych projektach MVC 4. Więcej bibliotek można znaleźć w folderze /Scripts projektu.

Aby te biblioteki sprawdzania poprawności działały, należy dodać odwołanie do biblioteki platformy jQuery. Ponieważ to odwołanie zostało już dodane w pliku _Layout.cshtml , nie trzeba dodawać go w tym konkretnym widoku.

Zadanie 3. Uruchamianie aplikacji przy użyciu niestrudyjnej weryfikacji jQuery

W tym zadaniu przetestujesz, czy szablon tworzenia widoku StoreManager wykonuje walidację po stronie klienta przy użyciu bibliotek jQuery, gdy użytkownik utworzy nowy album.

Naciśnij klawisz F5, aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Przeglądaj /StoreManager/Utwórz i kliknij przycisk Utwórz bez wypełniania formularza, aby sprawdzić, czy są wyświetlane komunikaty sprawdzania poprawności:

Walidacja klienta z włączoną funkcją jQuery

W przeglądarce otwórz kod źródłowy dla widoku Utwórz:

...
<div class="editor-label">
    <label for="Title">Title</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="Price">Price</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
</div>        
...

Uwaga

Dla każdej reguły sprawdzania poprawności klienta niestrudzony jQuery dodaje atrybut data-val-rulename="message". Poniżej znajduje się lista tagów, które Niestrudzone zapytanie jQuery wstawia do pola danych wejściowych HTML w celu przeprowadzenia weryfikacji klienta:

Wartość danych
Data-val-number
Zakres wartości danych
Data-val-range-min / Data-val-range-max
Wymagana wartość danych
Długość wartości danych
Data-val-length-max / Data-val-length-min

Wszystkie wartości danych są wypełnione adnotacją danych modelu. Następnie całą logikę, która działa po stronie serwera, można uruchomić po stronie klienta. Na przykład atrybut Price ma następującą adnotację danych w modelu:

[Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }

Po użyciu nietrudnego zapytania jQuery wygenerowany kod to:

<input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />

Podsumowanie

Wykonując to praktyczne laboratorium, nauczyliśmy się, jak umożliwić użytkownikom zmianę danych przechowywanych w bazie danych przy użyciu następujących elementów:

Akcje kontrolera, takie jak Indeks, Tworzenie, Edytowanie, Usuwanie
funkcja tworzenia szkieletów ASP.NET MVC na potrzeby wyświetlania właściwości w tabeli HTML
Niestandardowe pomocniki HTML służące do ulepszania środowiska użytkownika
Metody akcji reagujące na wywołania HTTP-GET lub HTTP-POST
Szablon edytora udostępnionego dla podobnych szablonów widoków, takich jak Tworzenie i edytowanie
Elementy formularza, takie jak listy rozwijane
Adnotacje danych na potrzeby walidacji modelu
Walidacja po stronie klienta przy użyciu biblioteki jQuery Unobtrusive

Dodatek A: Instalowanie programu Visual Studio Express 2012 dla sieci Web

Program Microsoft Visual Studio Express 2012 dla sieci Web lub innej wersji "Express" można zainstalować przy użyciu Instalator platformy Microsoft Web. Poniższe instrukcje zawierają instrukcje wymagane do zainstalowania programu Visual Studio Express 2012 for Web przy użyciu Instalator platformy Microsoft Web.

Przejdź do strony [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Alternatywnie, jeśli masz już zainstalowany Instalator platformy internetowej, możesz go otworzyć i wyszukać produkt "Visual Studio Express 2012 for Web with Windows Azure SDK" (Program Visual Studio Express 2012 for Web with Windows Azure SDK).
Kliknij pozycję Zainstaluj teraz. Jeśli nie masz Instalatora platformy internetowej, nastąpi przekierowanie do pobrania i zainstalowania go najpierw.
Po otwarciu Instalatora platformy internetowej kliknij przycisk Zainstaluj , aby rozpocząć instalację.

Instalowanie programu Visual Studio Express
Przeczytaj wszystkie licencje i postanowienia dotyczące produktów, a następnie kliknij pozycję Akceptuję , aby kontynuować.

Akceptowanie postanowień licencyjnych
Poczekaj na zakończenie procesu pobierania i instalacji.

Postęp instalacji
Po zakończeniu instalacji kliknij przycisk Zakończ.

Ukończono instalację
Kliknij przycisk Zakończ, aby zamknąć Instalatora platformy internetowej.
Aby otworzyć program Visual Studio Express dla Sieci Web, przejdź do ekranu startowego i zacznij pisać "VS Express", a następnie kliknij kafelek VS Express for Web.

Kafelek programu VS Express dla sieci Web

Dodatek B: Używanie fragmentów kodu

W przypadku fragmentów kodu masz cały potrzebny kod na wyciągnięcie ręki. Dokument laboratorium zawiera informacje o tym, kiedy można ich używać, jak pokazano na poniższej ilustracji.

Wstawianie kodu do projektu przy użyciu fragmentów kodu programu Visual Studio Code

Wstawianie kodu do projektu przy użyciu fragmentów kodu programu Visual Studio Code

Aby dodać fragment kodu przy użyciu klawiatury (tylko w języku C#)

Umieść kursor, w którym chcesz wstawić kod.
Zacznij wpisywać nazwę fragmentu kodu (bez spacji lub łączników).
Zobacz, jak funkcja IntelliSense wyświetla pasujące nazwy fragmentów kodu.
Wybierz poprawny fragment kodu (lub kontynuuj wpisywanie do momentu wybrania nazwy całego fragmentu kodu).
Naciśnij dwukrotnie Tab, aby wstawić fragment kodu w lokalizacji kursora.

Zacznij wpisywać nazwę fragmentu kodu

Zacznij wpisywać nazwę fragmentu kodu

Naciśnij Tab, aby wybrać wyróżniony fragment kodu

Naciśnij Tab, aby wybrać wyróżniony fragment kodu

Ponownie naciśnij Tab, a fragment kodu zostanie rozwiń

Ponownie naciśnij Tab, a fragment kodu zostanie rozwiń

Aby dodać fragment kodu przy użyciu myszy (C#, Visual Basic i XML) 1. Kliknij prawym przyciskiem myszy miejsce, w którym chcesz wstawić fragment kodu.

Wybierz pozycję Wstaw fragment kodu , a następnie pozycję Moje fragmenty kodu.
Wybierz odpowiedni fragment kodu z listy, klikając go.

Kliknij prawym przyciskiem myszy miejsce, w którym chcesz wstawić fragment kodu, a następnie wybierz polecenie Wstaw fragment kodu

Kliknij prawym przyciskiem myszy miejsce, w którym chcesz wstawić fragment kodu, a następnie wybierz polecenie Wstaw fragment kodu

Wybierz odpowiedni fragment kodu z listy, klikając go

Wybierz odpowiedni fragment kodu z listy, klikając go

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2024-07-16

Udostępnij za pomocą

ASP.NET MVC 4 — pomocnicy, formularze i walidacja

Cele

Wymagania wstępne

Ustawienia

Ćwiczenia

Ćwiczenie 1. Tworzenie kontrolera Menedżera magazynu i jego widoku indeksu

Zadanie 1 — Tworzenie kontrolera StoreManagerController

Zadanie 2 — dostosowywanie indeksu StoreManager

Zadanie 3 . Tworzenie widoku indeksu

Zadanie 4 . Dostosowywanie szkieletu widoku indeksu

Zadanie 5 . Uruchamianie aplikacji

Ćwiczenie 2. Dodawanie pomocnika HTML

Zadanie 1 — rozszerzanie pomocnika HTML

Zadanie 2 . Obcięcie tekstu na stronie

Zadanie 3 — uruchamianie aplikacji

Ćwiczenie 3. Tworzenie widoku edycji

Zadanie 1 . Implementowanie metody akcji edycji HTTP-GET

Zadanie 2 . Tworzenie widoku edycji

Zadanie 3 — uruchamianie aplikacji

Zadanie 4 . Implementowanie list rozwijanych w szablonie edytora albumów

Zadanie 5 . Uruchamianie aplikacji

Zadanie 6 . Implementowanie metody akcji Http-POST Edit

Zadanie 7 . Uruchamianie aplikacji

Ćwiczenie 4. Dodawanie widoku tworzenia

Zadanie 1 . Implementowanie metody akcji HTTP-GET Create

Zadanie 2 . Dodawanie widoku tworzenia

Zadanie 3 — uruchamianie aplikacji

Zadanie 4 . Implementowanie metody akcji tworzenia HTTP-POST

Zadanie 5 . Uruchamianie aplikacji

Ćwiczenie 5. Obsługa usuwania

Zadanie 1 . Implementowanie metody akcji usuwania HTTP-GET

Zadanie 2 — uruchamianie aplikacji

Zadanie 3. Implementowanie metody akcji usuwania HTTP-POST

Zadanie 4 . Uruchamianie aplikacji

Ćwiczenie 6. Dodawanie walidacji

Zadanie 1 . Dodawanie adnotacji danych

Zadanie 2 — uruchamianie aplikacji

Ćwiczenie 7. Używanie nietrudnego zapytania jQuery po stronie klienta

Zadanie 1 . Uruchamianie aplikacji przed włączeniem nietrudnego zapytania jQuery

Zadanie 2 . Włączanie nietrudnej weryfikacji klienta

Zadanie 3. Uruchamianie aplikacji przy użyciu niestrudyjnej weryfikacji jQuery

Podsumowanie

Dodatek A: Instalowanie programu Visual Studio Express 2012 dla sieci Web

Dodatek B: Używanie fragmentów kodu

Sprzężenie zwrotne

Dodatkowe zasoby