Share via

ASP.NET MVC 4 — pomocnicy, formularze i walidacja

  • Artykuł

Autor: Web Camps Team

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 Music Store możliwość edytowania tych danych.

Mając na uwadze ten cel, najpierw utworzysz kontroler, który będzie obsługiwać akcje Tworzenia, odczytu, aktualizacji i usuwania (CRUD) albumów. Wygenerujesz 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. Aby ulepszyć ten widok, dodasz niestandardowy pomocnik HTML, który obcina długie opisy.

Następnie dodasz pozycję Edytuj i Utwórz widoki, które umożliwią zmianę albumów w bazie danych za pomocą 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 ich 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 ćwiczeniami praktycznymi MVC Fundamentals .

To laboratorium przeprowadzi Cię przez ulepszenia i nowe funkcje opisane wcześniej przez zastosowanie drobnych zmian do przykładowej aplikacji internetowej udostępnionej w folderze Source.

Uwaga

Wszystkie przykładowe 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 witrynie ASP.NET pomocników MVC 4, formularzy i walidacji.

Cele

W tym laboratorium Hands-On 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, które reagują 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:

Konfigurowanie

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 Visual Studio Code fragmentów kodu i chcesz dowiedzieć się, jak ich używać, 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 Hands-On Lab:

  1. Tworzenie kontrolera Menedżera magazynu i jego widoku indeksu
  2. Dodawanie pomocnika HTML
  3. Tworzenie widoku edycji
  4. Dodawanie widoku tworzenia
  5. Obsługa usuwania
  6. Dodawanie walidacji
  7. Używanie nietrudnego zapytania jQuery po stronie klienta

Uwaga

Każdemu ćwiczeniu towarzyszy folder End zawierający 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ć jego metodę akcji Index, 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.

  1. 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 Project (Projekt ) i wybierz polecenie Manage NuGet Packages (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 należy wykonać te kroki.

  2. 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 pozycję Dodaj.

    Okno dialogowe Dodawanie kontrolera okna dialogowego

    Okno dialogowe Dodawanie kontrolera

    Zostanie wygenerowana nowa klasa Kontrolera. Ponieważ wskazano dodawanie akcji dla 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 Indeks StoreManager, aby zwrócić widok z listą albumów z bazy danych.

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

    (Fragment kodu — ASP.NET pomocników i formularzy MVC 4 oraz weryfikacji — Ex1 przy użyciu mvcMusicStore)

    using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;

  2. 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();

  3. Zaimplementuj akcję Indeks StoreManagerController, aby zwrócić widok z listą albumów.

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

    (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 kontrolera StoreManager .

  1. 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.

  2. Kliknij prawym przyciskiem myszy wewnątrz metody akcji Indeks i wybierz polecenie Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku .

    Dodawanie widoku Dodaj

    Dodawanie widoku z poziomu metody Index

  3. W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku jest indeksem. Wybierz opcję Utwórz silnie typizowany widok , a następnie wybierz pozycję Album (MvcMusicStore.Models) z listy rozwijanej Klasa modelu . Wybierz pozycję Lista z listy rozwijanej Szablon szkieletu . Pozostaw aparat widokówrazor i inne pola z ich wartością domyślną, a następnie kliknij przycisk Dodaj.

    Dodawanie widoku indeksu Dodawanie

    Dodawanie widoku indeksu

Zadanie 4 . Dostosowywanie szkieletu widoku indeksu

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

Uwaga

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

  1. 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>

  2. <Zastąp kod tabeli> następującym kodem, aby wyświetlić tylko pola Gatunek, Artysta, Tytuł albumu i Cena. Spowoduje to usunięcie kolumn Adres URL albumu i albumu . Ponadto zmienia kolumny GenreId i ArtistId, aby wyświetlić ich połączone właściwości klasy Artist.Name i Genre.Name oraz 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>

  3. 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 przetestujesz, czy szablon StoreManagerIndex View wyświetla listę albumów zgodnie z projektem poprzednich kroków.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. 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

    Przeglądanie listy albumów

Ćwiczenie 2. Dodawanie pomocnika HTML

Strona Indeks StoreManager ma jeden potencjalny problem: właściwości Tytuł i Nazwa artysty mogą być wystarczająco długie, aby wyrzucić 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 Albumy z nie obciętym tekstem

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 MVC ASP.NET. W tym celu zaimplementujesz metodę rozszerzenia do wbudowanej klasy System.Web.Mvc.HtmlHelper dostarczonej przez ASP.NET MVC.

Uwaga

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

  1. 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 należy pobrać brakujące pakiety NuGet. W tym celu kliknij menu Project (Projekt ) i wybierz polecenie Manage NuGet Packages (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 należy wykonać te kroki.

  2. 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.

  3. 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 . Obcinanie tekstu na stronie

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

  1. 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.

  2. Zastąp wiersze, które zawierają 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 przetestujesz, czy szablon StoreManagerIndex View obcina tytuł i nazwę artysty albumu.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager , aby sprawdzić, czy długie teksty w kolumnie Tytuł i Artysta zostały obcięte.

    Obcięte tytuły i nazwiska artystów

    Obcięte tytuły i nazwy artystów

Ćwiczenie 3. Tworzenie widoku edycji

W tym ćwiczeniu dowiesz się, jak utworzyć formularz, aby umożliwić 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 do serwera.

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 edycji 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 HTTP-GET Edit

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.

  1. Otwórz rozwiązanie Begin 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 należy pobrać brakujące pakiety NuGet. W tym celu kliknij menu Project (Projekt ) i wybierz polecenie Manage NuGet Packages (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 należy wykonać te kroki.

  2. Otwórz klasę StoreManagerController . W tym celu rozwiń folder Controllers i kliknij dwukrotnie plik StoreManagerController.cs.

  3. 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 formularzy MVC 4 — Akcja edycji HTTP-GET 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.MvcSelectList 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 scenariusz Edycji formularza będzie czyszczący.

Zadanie 2 . Tworzenie widoku edycji

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

  1. Utwórz widok edycji. Aby to zrobić, kliknij prawym przyciskiem myszy wewnątrz metody akcji Edytuj i wybierz polecenie Dodaj widok.

  2. W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku to Edytuj. Zaznacz pole wyboru Utwórz silnie typizowany widok i wybierz pozycję Album (MvcMusicStore.Models) z listy rozwijanej Wyświetl klasę danych . Wybierz pozycję Edytuj z listy rozwijanej Szablon szkieletu . Pozostaw pozostałe pola z wartością domyślną, a następnie kliknij przycisk Dodaj.

    Dodawanie widoku edycji

    Dodawanie widoku edycji

Zadanie 3 . Uruchamianie aplikacji

W tym zadaniu przetestujesz, czy na stronie StoreManager Edit View (Widok edycjiStoreManager) zostaną wyświetlone wartości właściwości albumu przekazanego jako parametr.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. 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

    Widok edycji albumu przeglądania

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

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

  1. 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:

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

Zadanie 5 . Uruchamianie aplikacji

W tym zadaniu przetestujesz, że strona StoreManagerEdit View wyświetla listy rozwijane zamiast pól tekstowych Identyfikator gatunku i Artysty.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. 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 z listami rozwijanymi

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

Zadanie 6 . Implementowanie metody akcji edycji HTTP-POST

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

  1. W razie potrzeby zamknij przeglądarkę, aby powrócić do okna programu Visual Studio. Otwórz plik StoreManagerController z folderu Controllers .

  2. Zastąp kod metody akcji HTTP-POST Edit następującym kodem (pamiętaj, że metoda, którą należy zamienić, 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 do serwera, aby utrwały je w bazie danych. Dekorator [HttpPost] wskazuje, że metoda powinna być używana 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 przekierowuj do widoku indeksu.

    2. Jeśli model jest nieprawidłowy, wypełni element ViewBag identyfikatorem GenreId i ArtistId, a następnie zwróci widok z odebranego obiektu 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.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /StoreManager/Edit/1. Zmień tytuł albumu na Załaduj i kliknij pozycję Zapisz. Sprawdź, czy tytuł albumu został rzeczywiście zmieniony na liście albumów.

    Aktualizowanie albumu Aktualizowanie

    Aktualizowanie albumu

Ćwiczenie 4. Dodawanie widoku tworzenia

Teraz, gdy funkcja 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 :

  1. Jedna metoda akcji wyświetli pusty formularz, gdy menedżerowie sklepów najpierw odwiedzają adres URL /StoreManager/Create .
  2. 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 /StoreManager/Create URL jako HTTP-POST.

Zadanie 1 . Implementowanie metody akcji HTTP-GET Create

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

  1. Otwórz rozwiązanie Begin 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. Po otwarciu podanego rozwiązania Begin należy pobrać niektóre brakujące pakiety NuGet przed kontynuowaniem. Aby to zrobić, kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.

    2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij przycisk Przywróć , aby pobrać brakujące pakiety.

    3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj | rozwiązanie.

      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 należy uruchomić te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

  2. Otwórz klasę StoreManagerController . W tym celu rozwiń folder Kontrolery i kliknij dwukrotnie plik StoreManagerController.cs.

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

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

    //
// 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.

  1. Kliknij prawym przyciskiem myszy w metodzie Tworzenia akcji i wybierz pozycję Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku.

  2. W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku to Utwórz. Wybierz opcję Utwórz silnie typizowanego widoku 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.

    Dodawanieadding-a-create-view.pngwidoku tworzenia

    Dodawanie widoku tworzenia

  3. 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 przetestujesz, że na stronie StoreManagerCreate View zostanie wyświetlony pusty formularz Album.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

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

    Tworzenie widoku z pustym formularzem Utwórz

    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, gdy użytkownik kliknie przycisk Zapisz . Metoda powinna zapisać nowy album w bazie danych.

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

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

    (Fragment kodu — ASP.NET pomocników MVC 4 i formularzy i walidacji — 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 dość podobna do poprzedniej metody akcji Edytuj, ale zamiast ustawiać obiekt zgodnie z modyfikacją, jest dodawana 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.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. 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 w

    Tworzenie albumu

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

    Utworzony nowy album

    Utworzony nowy album

Ćwiczenie 5. Obsługa usuwania

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

  1. Jedna metoda akcji wyświetli formularz potwierdzenia
  2. Druga metoda akcji obsłuży 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.

  1. 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. Po otwarciu podanego rozwiązania Begin należy pobrać niektóre brakujące pakiety NuGet przed kontynuowaniem. Aby to zrobić, kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.

    2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij przycisk Przywróć , aby pobrać brakujące pakiety.

    3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj | rozwiązanie.

      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 należy uruchomić te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

  2. Otwórz klasę StoreManagerController . W tym celu rozwiń folder Kontrolery i kliknij dwukrotnie plik StoreManagerController.cs.

  3. 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 Obsługa usuwania HTTP-GET)

    //
// 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);
}

  4. Kliknij prawym przyciskiem myszy w metodzie akcji Usuń i wybierz pozycję Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku.

  5. W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku to Usuń. Wybierz opcję Utwórz silnie typizowanego widoku 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

    Dodawanie widoku usuwania

  6. Szablon Usuń zawiera wszystkie pola z modelu. Zostanie wyświetlony 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 przetestujesz, że na stronie StoreManagerDelete View zostanie wyświetlony formularz usuwania potwierdzenia.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. 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.

    Zrzut ekranu przedstawia zaznaczony link Usuń, co powoduje otwarcie okna Potwierdzenia usuwania.

    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, gdy użytkownik kliknie przycisk Usuń . Metoda powinna usunąć album w bazie danych.

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

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

    (Fragment kodu — ASP.NET pomocników MVC 4 i formularzy i walidacji — akcja Usuwania HTTP-POST — ex5 Obsługa usuwania HTTP-POST)

    //
// 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.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. 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ń :

    Zrzut ekranu przedstawiający okno Usuń potwierdzenie.

    Usuwanie albumu

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

Ćwiczenie 6. Dodawanie walidacji

Obecnie dostępne formularze Tworzenia i edytowania nie wykonują żadnej weryfikacji. Jeśli użytkownik opuści wymagane pole puste lub wpisz litery w polu ceny, pierwszy błąd otrzymany zostanie 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 odpowiedniego komunikatu dla użytkowników.

Zadanie 1 — dodawanie adnotacji danych

W tym zadaniu dodasz adnotacje danych do modelu albumu, co spowoduje wyświetlenie komunikatów weryfikacji na stronie Tworzenie i edytowanie.

W przypadku prostej klasy Model dodanie adnotacji danych jest po prostu obsługiwane przez dodanie instrukcji using dla elementu System.ComponentModel.DataAnnotation, a następnie umieszczenie atrybutu [Required] na odpowiednich właściwościach. Poniższy przykład spowoduje, że właściwość Name będzie wymagane pole 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 generowany jest 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].

  1. Otwórz rozwiązanie Begin 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. Po otwarciu podanego rozwiązania Begin należy pobrać niektóre brakujące pakiety NuGet przed kontynuowaniem. Aby to zrobić, kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.

    2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij przycisk Przywróć , aby pobrać brakujące pakiety.

    3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj | rozwiązanie.

      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 należy uruchomić te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

  2. Otwórz plik Album.cs z folderu Models .

  3. Zastąp zawartość Album.cs 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, gdy pole danych zostanie zaktualizowane w źródle danych. To ustawienie pozwoli uniknąć wyjątku, gdy program Entity Framework przypisuje wartości null do modelu przed zweryfikowaniem pól przez adnotację danych.

    (Fragment kodu — ASP.NET pomocników MVC 4 i formularzy i walidacji — 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 używane do dodawania adnotacji do modelu Album:

    • Wymagane — wskazuje, że właściwość jest polem wymaganym
    • DisplayName — definiuje tekst, który ma być używany w polach formularzy i komunikatach weryfikacji
    • 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 Utwórz i Edytuj strony zostaną zweryfikowane przy użyciu nazw wyświetlanych wybranych w ostatnim zadaniu.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. 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 (np. Adres URL albumu zamiast AlbumArtUrl)

  3. Kliknij pozycję Utwórz bez wypełniania formularza. Sprawdź, czy otrzymujesz odpowiednie komunikaty weryfikacji.

    Zweryfikowane pola na stronie Tworzenie

    Zweryfikowane pola na stronie Tworzenie

  4. Możesz sprawdzić, czy taka sama sytuacja występuje na stronie Edycja . Zmień adres URL na /StoreManager/Edit/1 i sprawdź, czy nazwy wyświetlane są zgodne z nazwami 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

    Zweryfikowane pola na stronie Edytowanie

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

W tym ćwiczeniu dowiesz się, jak włączyć weryfikację jQuery jQuery bez stosowania wzorca MVC 4 po stronie klienta.

Uwaga

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

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

W tym zadaniu uruchomisz aplikację przed dołączeniem zapytania jQuery, aby porównać oba modele weryfikacji.

  1. 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 należy pobrać brakujące pakiety NuGet. W tym celu kliknij menu Project (Projekt ) i wybierz polecenie Manage NuGet Packages (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 należy wykonać te kroki.

  2. Naciśnij klawisz F5 , aby uruchomić aplikację.

  3. Projekt rozpoczyna się na stronie głównej. Przeglądaj /StoreManager/Utwórz i kliknij przycisk Utwórz bez wypełniania formularza, aby sprawdzić, czy otrzymujesz komunikaty sprawdzania poprawności:

    Sprawdzanie poprawności klienta wyłączone

    Walidacja klienta jest wyłączona

  4. 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 niestrudną walidację klienta 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 nietrudne sprawdzanie poprawności klienta jQuery działało.

  1. Otwórz plik Web.Config w katalogu głównym projektu i upewnij się, że wartości kluczy ClientValidationEnabled i UnobtrusiveJavaScriptEnabled mają ustawioną wartość 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 pliku Global.asax.cs, aby uzyskać te same wyniki:

    HtmlHelper.ClientValidationEnabled = true;

    Ponadto można przypisać atrybut ClientValidationEnabled do dowolnego kontrolera w celu zachowania niestandardowego.

  2. Otwórz plik Create.cshtml w pliku Views\StoreManager.

  3. 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 struktury 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 nietrudnej 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.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację.

  2. Projekt rozpoczyna się na stronie głównej. Przeglądaj /StoreManager/Utwórz i kliknij przycisk Utwórz bez wypełniania formularza, aby sprawdzić, czy otrzymujesz komunikaty sprawdzania poprawności:

    Walidacja klienta z włączoną weryfikacją klienta jQuery

    Walidacja klienta z włączoną funkcją jQuery

  3. 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 weryfikacji klienta funkcja jQuery niestrudzone dodaje atrybut data-val-rulename="message". Poniżej znajduje się lista tagów, które unobtrusive jQuery wstawia do pola danych wejściowych HTML w celu przeprowadzenia weryfikacji klienta:

    • Wartość danych
    • Liczba-val-data
    • 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 narzędzia Unobtrusive 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 czynności opisane w tym laboratorium Hands-On, wiesz już, 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
  • ASP.NET funkcji tworzenia szkieletów MVC na potrzeby wyświetlania właściwości w tabeli HTML
  • Niestandardowe pomocniki HTML w celu ulepszenia ś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 Visual Studio Express 2012 dla sieci Web

Możesz zainstalować program Microsoft Visual Studio Express 2012 dla sieci Web lub innej wersji "Express" przy użyciu Instalator platformy Microsoft Web. Poniższe instrukcje przeprowadzą Cię przez kroki wymagane do zainstalowania programu Visual Studio Express 2012 for Web przy użyciu Instalator platformy Microsoft Web.

  1. Przejdź do strony [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?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" (Visual Studio Express 2012 dla sieci Web przy użyciu zestawu Windows Azure SDK).

  2. Kliknij pozycję Zainstaluj teraz. Jeśli nie masz Instalatora platformy internetowej , nastąpi przekierowanie do pobrania i zainstalowania go najpierw.

  3. Po otwarciu Instalatora platformy internetowej kliknij przycisk Zainstaluj , aby rozpocząć instalację.

    Instalowanie Visual Studio Express

    Instalowanie Visual Studio Express

  4. Przeczytaj wszystkie licencje i postanowienia dotyczące produktów, a następnie kliknij przycisk Akceptuję , aby kontynuować.

    Akceptowanie postanowień licencyjnych

    Akceptowanie postanowień licencyjnych

  5. Poczekaj na zakończenie procesu pobierania i instalacji.

    Postęp instalacji

    Postęp instalacji

  6. Po zakończeniu instalacji kliknij przycisk Zakończ.

    Instalacja została ukończona

    Instalacja została ukończona

  7. Kliknij przycisk Zakończ , aby zamknąć Instalatora platformy sieci Web.

  8. Aby otworzyć 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

    Kafelek programu VS Express dla sieci Web

Dodatek B: Używanie fragmentów kodu

Dzięki fragmentom 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.

Używanie fragmentów kodu w programie Visual Studio Code do wstawiania kodu do projektu

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

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

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

Zacznij wpisywać nazwę fragmentu kodu Rozpocznij wpisywanie

Zacznij wpisywać nazwę fragmentu kodu

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

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

Ponownie naciśnij klawisz Tab, a fragment kodu ponownie rozwiń pozycję

Naciśnij ponownie klawisz Tab, a fragment kodu zostanie rozwinąć

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.

  1. Wybierz pozycję Wstaw fragment kodu , a następnie pozycję Moje fragmenty kodu.
  2. 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 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