ASP.NET MVC 4 — pomocnicy, formularze i walidacja

przez zespół Camp sieci Web

Pobierz zestaw szkoleniowy dla sieci Web Camp

W przypadku modeli ASP.NET MVC 4 i dostępu do danych w laboratorium załadowane i wyświetlane są dane z bazy danych. W tym ćwiczeniu należy dodać do aplikacji ze sklepu muzycznego możliwość edytowania tych danych.

W tym celu należy najpierw utworzyć kontroler, który będzie obsługiwał akcje tworzenia, odczytu, aktualizacji i usuwania (CRUD) albumów. Zostanie wygenerowany szablon widoku indeksu wykorzystujący funkcję tworzenia szkieletów ASP.NET MVC, aby wyświetlić właściwości albumów w tabeli HTML. Aby ulepszyć ten widok, należy dodać niestandardowego pomocnika HTML, który będzie obcinał długi opis.

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

Na koniec zezwolisz użytkownikom na usunięcie albumu, a ponadto uniemożliwimy im wprowadzanie nieprawidłowych danych, sprawdzając ich dane wejściowe.

W ramach tego ćwiczenia praktycznego założono, że masz podstawową wiedzę na temat ASP.NET MVC. Jeśli wcześniej nie korzystasz z ASP.NET MVC , zalecamy przejście do środowiska ASP.NET w oparciu o podstawowe informacje dotyczące MVC .

To laboratorium przeprowadzi Cię przez ulepszenia i nowe funkcje opisane wcześniej przez zastosowanie drobnych zmian do przykładowej aplikacji sieci Web, która znajduje się w folderze źródłowym.

Note

Wszystkie przykładowe kod i fragmenty kodu są zawarte w zestawie szkoleń w sieci Web Camp, które są dostępne w wersjach Microsoft-Web/WebCampTrainingKit. Projekt specyficzny dla tego laboratorium jest dostępny w ASP.NETach, formularzach i weryfikacji w MVC 4.

Cele

W tym ćwiczeniu dowiesz się, jak:

  • Tworzenie kontrolera do obsługi operacji CRUD
  • Generuj widok indeksu, aby wyświetlić właściwości jednostki w tabeli HTML
  • Dodawanie niestandardowego pomocnika HTML
  • Tworzenie i Dostosowywanie widoku edycji
  • Różnice między metodami akcji, które reagują na wywołania HTTP-GET lub HTTP-POST
  • Dodawanie i Dostosowywanie widoku tworzenia
  • Obsłuż Usuwanie 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óry będzie zarządzany w tym laboratorium, jest dostępna jako fragmenty kodu programu Visual Studio. Aby zainstalować plik fragmentów kodu, uruchom .\Source\Setup\CodeSnippets.VSI .

Jeśli nie znasz fragmentów kodu Visual Studio Code i chcesz dowiedzieć się, jak z nich korzystać, możesz odwołać się do dodatku z tego dokumentu "dodatku B: Using fragmenty kodu".


Symulacyjn

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

  1. Tworzenie kontrolera Menedżera sklepu i jego widoku indeksu
  2. Dodawanie pomocnika HTML
  3. Tworzenie widoku edycji
  4. Dodawanie widoku
  5. Obsługa usuwania
  6. Dodawanie weryfikacji
  7. Korzystanie z niezauważalnej technologii jQuery na stronie klienta

Note

Każdemu ćwiczeniu towarzyszy folder końcowy zawierający rozwiązanie, które należy uzyskać po zakończeniu ćwiczenia. Tego rozwiązania można użyć jako przewodnika, jeśli potrzebujesz dodatkowej pomocy w pracy przez ćwiczenia.

Szacowany czas wykonywania tego laboratorium: 60 minut

Ćwiczenie 1: Tworzenie kontrolera Menedżera sklepu i jego widoku indeksu

W tym ćwiczeniu dowiesz się, jak utworzyć nowy kontroler do obsługi operacji CRUD, dostosować jego metodę działania indeksu, aby zwracała listę albumów z bazy danych, a wreszcie wygenerować szablon widoku indeksu wykorzystujący tworzenie szkieletu ASP.NET MVC Funkcja umożliwiająca wyświetlanie właściwości albumów w tabeli HTML.

Zadanie 1 — Tworzenie 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 lokalizacji Source/Ex1-CreatingTheStoreManagerController/BEGIN/ folder.

    1. Przed kontynuowaniem musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu projekt i wybierz polecenie 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 | Kompiluj rozwiązanie.

      Note

      Jedną z zalet korzystania z NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Przy użyciu narzędzi NuGet PowerShell, określając wersje pakietu w pliku Packages. config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. To dlatego, że trzeba będzie wykonać te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

  2. Dodaj nowy kontroler. Aby to zrobić, kliknij prawym przyciskiem myszy folder controllers w obszarze Eksplorator rozwiązań wybierz pozycję Dodaj , a następnie polecenie kontroler . Zmień nazwę kontrolera na StoreManagerController i upewnij się, że jest zaznaczona opcja kontroler MVC z pustymi akcjami odczytu/zapisu . Kliknij pozycję Add (Dodaj).

    Okno dialogowe Dodawanie kontrolera

    Okno dialogowe Dodawanie kontrolera

    Jest generowana nowa klasa kontrolera. Ponieważ wskazane jest dodanie akcji do odczytu/zapisu, metody zastępcze dla tych, typowe akcje CRUD są tworzone z wypełnionymi komentarzami do wykonania, monitując o uwzględnienie logiki specyficznej dla aplikacji.

Zadanie 2 — Dostosowywanie indeksu Magazynumanager

W tym zadaniu zostanie dostosowana Metoda działania indeksu Magazynumanager w celu zwrócenia widoku z listą albumów z bazy danych.

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

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularze i sprawdzanie poprawności — Ex1 przy użyciu MvcMusicStore)

    using System.Data;
    using System.Data.Entity;
    using MvcMusicStore.Models;
    
  2. Dodaj pole do StoreManagerController , aby pomieścić wystąpienie elementu MusicStoreEntities.

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularze i sprawdzanie poprawności — 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 kontrolera będzie bardzo podobna do akcji indeksu StoreController zapisaną wcześniej. Użyj LINQ do pobrania wszystkich albumów, w tym informacji o gatunku i wykonawcy do wyświetlenia.

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularze i sprawdzanie poprawności — Ex1 StoreManagerController index)

    //
    // 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 widoku indeksu, aby wyświetlić listę albumów zwracanych przez kontroler magazynu .

  1. Przed utworzeniem nowego szablonu widoku należy skompilować projekt, aby okno dialogowe Dodawanie widoku znało informacje o klasie albumu do użycia. Wybierz kompilację | Kompiluj MvcMusicStore w celu skompilowania projektu.

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

    Dodaj widok

    Dodawanie widoku z poziomu metody index

  3. W oknie dialogowym Dodawanie widoku Sprawdź, czy nazwa widoku jest indeksowana. Wybierz opcję Utwórz widok z silną typem i wybierz pozycję album (MvcMusicStore. models) z listy rozwijanej Klasa modelu . Wybierz pozycję Lista na liście rozwijanej szablon szkieletu . Pozostaw aparat widoku do Razor i inne pola z wartościami domyślnymi, a następnie kliknij przycisk Dodaj.

    Dodawanie widoku indeksu

    Dodawanie widoku indeksu

Zadanie 4 — Dostosowywanie szkieletu widoku indeksu

W tym zadaniu dostosowano prosty szablon widoku utworzony przy użyciu funkcji szkieletowej ASP.NET MVC, aby wyświetlała odpowiednie pola.

Note

Obsługa tworzenia szkieletów w ramach ASP.NET MVC generuje prosty szablon widoku, który zawiera listę wszystkich pól w modelu albumu. Tworzenie szkieletów umożliwia szybkie rozpoczęcie pracy w widoku o jednoznacznie określonym typie: zamiast konieczności ręcznego pisania szablonu widoku, tworzenie szkieletu 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, która jest używana 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 <tabelę> kodem następującym kodem, aby wyświetlić tylko pola gatunek, wykonawca, tytuł albumui Price . Spowoduje to usunięcie kolumn AlbumId i URL albumów . Ponadto zmienia kolumny GenreId i ArtistId, aby wyświetlić właściwości klasy połączonej Artist.Name i Genre.Name, a także usunąć łącze 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ń poniższe opisy.

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

Zadanie 5 — Uruchamianie aplikacji

W tym zadaniu zostanie przetestowana, że w szablonie widoku indeksu magazynumanager zostanie wyświetlona lista albumów zgodnie z projektem poprzednich kroków.

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

  2. Projekt zostanie uruchomiony na stronie głównej. Zmień adres URL na /StoreManager , aby sprawdzić, czy zostanie wyświetlona lista albumów pokazująca ich tytuł, wykonawcę i gatunek.

    Przeglądanie listy albumów

    Przeglądanie listy albumów

Ćwiczenie 2: Dodawanie pomocnika HTML

Na stronie indeksu Magazynumanager występuje jeden potencjalny problem: właściwości nazwy tytułu i wykonawcy mogą być wystarczająco długie, aby wyrzucać formatowanie tabeli. W tym ćwiczeniu dowiesz się, jak dodać niestandardowy pomocnik HTML do obcięcia tego tekstu.

Na poniższej ilustracji widać, jak format jest modyfikowany z powodu długości tekstu, gdy jest używany mały rozmiar przeglądarki.

Przeglądanie listy albumów z obciętym tekstem

Przeglądanie listy albumów z obciętym tekstem

Zadanie 1 — rozszerzanie pomocnika HTML

W tym zadaniu zostanie dodana nowa metoda obcinania do obiektu HTML uwidocznionego w widokach ASP.NET MVC. W tym celu należy zaimplementować metodę rozszerzenia do wbudowanej klasy System. Web. MVC. HtmlHelper dostarczonej przez ASP.NET MVC.

Note

Aby dowiedzieć się więcej na temat metod rozszerzających, zobacz ten artykuł w witrynie MSDN. https://msdn.microsoft.com/library/bb383977.aspx.

  1. Otwórz rozwiązanie BEGIN znajdujące się w lokalizacji Source/Ex2-AddingAnHTMLHelper/BEGIN/ folder. W przeciwnym razie można nadal korzystać z rozwiązania końcowego uzyskanego przez zakończenie poprzedniego ćwiczenia.

    1. Jeśli otwarto udostępnione rozwiązanie , należy pobrać brakujące pakiety NuGet przed kontynuowaniem. W tym celu kliknij menu projekt i wybierz polecenie 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 | Kompiluj rozwiązanie.

      Note

      Jedną z zalet korzystania z NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Przy użyciu narzędzi NuGet PowerShell, określając wersje pakietu w pliku Packages. config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. To dlatego, że trzeba będzie wykonać te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

  2. Otwórz widok indeksu elementu Storemanager. W tym celu w Eksplorator rozwiązań rozwiń folder widoki , a następnie pozycję storemanager i Otwórz plik index. cshtml .

  3. Dodaj następujący kod poniżej dyrektywy @model , aby zdefiniować metodę pomocnika obcinania .

    @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 zostanie użyta metoda Truncate do obcięcia tekstu w szablonie widoku.

  1. Otwórz widok indeksu elementu Storemanager. W tym celu w Eksplorator rozwiązań rozwiń folder widoki , a następnie pozycję storemanager i Otwórz plik index. cshtml .

  2. Zastąp wiersze pokazujące nazwę wykonawcy i tytułalbumu. Aby to zrobić, Zastąp poniższe 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 zostanie przetestowany, że szablon widoku indeksu Magazynumanager obcina tytuł albumu i nazwę wykonawcy.

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

  2. Projekt zostanie uruchomiony na stronie głównej. Zmień adres URL na /StoreManager , aby sprawdzić, czy długie teksty w tytule i kolumnie wykonawcy zostały obcięte.

    Nazwy tytułów i artystów

    Tytuły i nazwy wykonawców

Ćwiczenie 3: Tworzenie widoku edycji

W tym ćwiczeniu dowiesz się, jak utworzyć formularz umożliwiający menedżerom magazynu edytowanie albumu. Przeszukamy adres URL /StoreManager/Edit/ID (Identyfikator jest unikatowym identyfikatorem albumu do edycji), co spowoduje wywołanie http-get do serwera.

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

Gdy użytkownik zaktualizuje wartości formularza albumu i kliknie przycisk Zapisz , zmiany są przesyłane za pośrednictwem wywołania http-post z powrotem do /StoreManager/Edit/ID. Mimo że adres URL pozostaje taki sam jak w przypadku ostatniego wywołania, ASP.NET MVC określa, że jest to czas POST protokołu HTTP i w związku z tym wykonuje inną metodę edycji akcji (z jedną dekoracyjną z [HTTPPOST] ).

Zadanie 1 — implementacja metody akcji edycji HTTP-GET

W tym zadaniu zostanie zaimplementowana wersja protokołu HTTP-GET akcji Edytuj akcję w celu pobrania odpowiedniego albumu z bazy danych, a także listy wszystkich gatunków i artystów. Spowoduje to spakowanie tych danych do obiektu StoreManagerViewModel zdefiniowanego w ostatnim kroku, który następnie zostanie przesłany do szablonu widoku w celu renderowania odpowiedzi.

  1. Otwórz rozwiązanie BEGIN znajdujące się w lokalizacji Source/Ex3-CreatingTheEditView/BEGIN/ folder. W przeciwnym razie można nadal korzystać z rozwiązania końcowego uzyskanego przez zakończenie poprzedniego ćwiczenia.

    1. Jeśli otwarto udostępnione rozwiązanie , należy pobrać brakujące pakiety NuGet przed kontynuowaniem. W tym celu kliknij menu projekt i wybierz polecenie 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 | Kompiluj rozwiązanie.

      Note

      Jedną z zalet korzystania z NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Przy użyciu narzędzi NuGet PowerShell, określając wersje pakietu w pliku Packages. config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. To dlatego, że trzeba będzie wykonać te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

  2. Otwórz klasę StoreManagerController . Aby to zrobić, rozwiń folder controllers , a następnie kliknij dwukrotnie pozycję StoreManagerController.cs.

  3. Zastąp metodę http-Get Edit Action następującym kodem, aby pobrać odpowiedni album , a także listę gatunku i artystów .

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularze i sprawdzanie poprawności — Ex3 STOREMANAGERCONTROLLER HTTP-GET Edycja akcji)

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

    Note

    Używasz programu System. Web. MVC SelectList dla artystów i gatunek zamiast listy System. Collections. Generic .

    SelectList jest przejrzystym sposobem 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 będzie to bardziej przejrzysty scenariusz edycji.

Zadanie 2 — Tworzenie widoku edycji

W tym zadaniu utworzysz szablon widoku edycji, który będzie później wyświetlał 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 jest edytowana. Zaznacz pole wyboru Utwórz widok o jednoznacznie określonym typie i wybierz opcję album (MvcMusicStore. models) z listy rozwijanej Wyświetl klasę danych . Wybierz pozycję Edytuj z listy rozwijanej szablon szkieletu . Pozostaw pozostałe pola wartościami domyślnymi, a następnie kliknij przycisk Dodaj.

    Dodawanie widoku edycji

    Dodawanie widoku edycji

Zadanie 3 — Uruchamianie aplikacji

W tym zadaniu przetestujesz, że na stronie widok programu storemanager są wyświetlane wartości właściwości dla albumu przesłanego jako parametr.

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

  2. Projekt zostanie uruchomiony na stronie głównej. Zmień adres URL na /StoreManager/Edit/1 , aby sprawdzić, czy są wyświetlane wartości właściwości dla przesłanego albumu.

    Przeglądanie widoku edycji albumu

    Przeglądanie widoku edycji albumu

Zadanie 4 — implementowanie list rozwijanych w szablonie edytora albumu

W tym zadaniu dodasz listę rozwijaną do szablonu widoku utworzonego w ostatnim zadaniu, dzięki czemu użytkownik może wybrać spośród listy artystów i gatunku.

  1. Zastąp cały kod zestawu pól albumu następującym:

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

    Note

    Dodano pomocnika HTML. DropDownList do listy rozwijanej renderowania do wybierania artystów i gatunków. Parametry przesłane do języka HTML. DropDownList są następujące:

    1. Nazwa pola formularza ( "ArtistId" ).
    2. SelectList wartości dla listy rozwijanej.

Zadanie 5 — Uruchamianie aplikacji

W tym zadaniu zostanie przetestowany, że na stronie widok widoku sklepumanager są wyświetlane listy rozwijane zamiast pól tekstowych Nazwa wykonawca i gatunek.

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

  2. Projekt zostanie uruchomiony na stronie głównej. Zmień adres URL na /StoreManager/Edit/1 , aby upewnić się, że wyświetla listę rozwijaną zamiast pól tekstowych Nazwa wykonawca i gatunek.

    Przeglądanie widoku edycji albumu z listami rozwijanymi

    Przeglądanie widoku edycji albumu, ten czas z listami rozwijanymi

Zadanie 6 — implementacja metody akcji edycji HTTP-POST

Teraz, gdy widok edycji jest wyświetlany zgodnie z oczekiwaniami, należy zaimplementować metodę akcji edycji HTTP-POST w celu zapisania zmian wprowadzonych w albumie.

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

  2. Zamień kod metody akcji edycji http-post na następujący (należy zauważyć, że metoda, która musi zostać zastąpiona, ma przeciążoną wersję, która odbiera dwa parametry):

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularze i sprawdzanie poprawności — Ex3 STOREMANAGERCONTROLLER http-post Edycja)

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

    Note

    Ta metoda zostanie wykonana po kliknięciu przez użytkownika przycisku Zapisz i przeniesieniu http-post wartości formularza z powrotem na serwer w celu utrwalenia ich w bazie danych. Dekoratora [HTTPPOST] wskazuje, że metoda powinna być stosowana dla tych scenariuszy http-post. Metoda przyjmuje obiekt albumu . ASP.NET MVC automatycznie utworzy obiekt albumu na podstawie <formularza> wartości.

    Ta metoda wykona następujące czynności:

    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 ViewBag z GenreId i ArtistId, a następnie zwróci widok z odebranym obiektem albumu, aby zezwolić użytkownikowi na wykonanie dowolnej wymaganej aktualizacji.

Zadanie 7 — Uruchamianie aplikacji

W tym zadaniu zostanie przetestowana, że na stronie widok magazynumanager , w rzeczywistości zapisywane są zaktualizowane dane albumu w bazie danych.

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

  2. Projekt zostanie uruchomiony 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 albumu

Ćwiczenie 4: Dodawanie widoku tworzenia

Teraz, gdy StoreManagerController obsługuje możliwość edycji , w tym ćwiczeniu dowiesz się, jak dodać szablon tworzenia widoku, aby umożliwić menedżerom sklepu Dodawanie nowych albumów do aplikacji.

Podobnie jak w przypadku korzystania z funkcji edycji, należy zaimplementować scenariusz tworzenia przy użyciu dwóch oddzielnych metod w klasie StoreManagerController :

  1. Jedna z metod akcji będzie wyświetlała pusty formularz, gdy menedżerowie sklepu najpierw odwiedzają adres URL /StoreManager/Create .
  2. Druga metoda działania 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 — implementacja metody działania HTTP-GET Create

W tym zadaniu zostanie zaimplementowana wersja protokołu HTTP-GET metody Create Action w celu pobrania listy wszystkich gatunków i artystów, spakowanie tych danych w obiekt StoreManagerViewModel , który zostanie następnie przesłany do szablonu widoku.

  1. Otwórz rozwiązanie BEGIN znajdujące się w lokalizacji Source/EX4-AddingACreateView/BEGIN/ folder. W przeciwnym razie można nadal korzystać z rozwiązania końcowego uzyskanego przez zakończenie poprzedniego ćwiczenia.

    1. Jeśli otwarto udostępnione rozwiązanie , należy pobrać brakujące pakiety NuGet przed kontynuowaniem. W tym celu kliknij menu projekt i wybierz polecenie 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 | Kompiluj rozwiązanie.

      Note

      Jedną z zalet korzystania z NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Przy użyciu narzędzi NuGet PowerShell, określając wersje pakietu w pliku Packages. config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. To dlatego, że trzeba będzie wykonać te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

  2. Otwórz klasę StoreManagerController . Aby to zrobić, rozwiń folder controllers , a następnie kliknij dwukrotnie pozycję StoreManagerController.cs.

  3. Zamień kod metody tworzenia akcji na następujący:

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularze i sprawdzanie poprawności — 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

W tym zadaniu dodasz szablon Utwórz widok, który będzie wyświetlał nowy (pusty) formularz albumu.

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

  2. W oknie dialogowym Dodawanie widoku Sprawdź, czy nazwa widoku jest utworzona. Wybierz opcję Utwórz widok z silną typem i wybierz pozycję album (MvcMusicStore. models) z listy rozwijanej Klasa modelu i Utwórz z listy rozwijanej szablon szkieletu . Pozostaw pozostałe pola wartościami domyślnymi, a następnie kliknij przycisk Dodaj.

    Dodawanie widoku

    Dodawanie widoku

  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 sprawdzisz, że na stronie Tworzenie widoku magazynumanager zostanie wyświetlony pusty formularz albumu.

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

  2. Projekt zostanie uruchomiony na stronie głównej. Zmień adres URL na /StoreManager/Create. Sprawdź, czy jest wyświetlany pusty formularz służący do wypełniania właściwości nowego albumu.

    Utwórz widok z pustym formularzem

    Utwórz widok z pustym formularzem

Zadanie 4 — implementacja metody działania HTTP-POST Create

W tym zadaniu zostanie zaimplementowana wersja HTTP-POST metody Create Action, która będzie wywoływana, 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 . Aby to zrobić, rozwiń folder controllers , a następnie kliknij dwukrotnie pozycję StoreManagerController.cs.

  2. Zamień kod metody akcji Create http-post na następujący:

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularze i sprawdzanie poprawności — 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);
    }
    

    Note

    Akcja tworzenia jest całkiem podobna do poprzedniej metody edycji akcji, ale zamiast ustawiania obiektu jako zmodyfikowany, jest dodawany do kontekstu.

Zadanie 5 — Uruchamianie aplikacji

W tym zadaniu zostanie przetestowana, że strona Tworzenie widoku magazynumanager umożliwia utworzenie nowego albumu, a następnie przekierowanie do widoku indeksu magazynumanager.

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

  2. Projekt zostanie uruchomiony 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

    Tworzenie albumu

  3. Upewnij się, że nastąpi przekierowanie do widoku indeksu Magazynumanager zawierającego nowy album właśnie utworzony.

    Utworzono nowy album

    Utworzono nowy album

Ćwiczenie 5: obsługa usuwania

Możliwość usuwania albumów nie została jeszcze zaimplementowana. W tym ćwiczeniu będzie to możliwe. Podobnie jak przed, zaimplementowano scenariusz usuwania przy użyciu dwóch oddzielnych metod w klasie StoreManagerController :

  1. Jedna metoda akcji będzie wyświetlać formularz potwierdzenia
  2. Druga metoda działania będzie obsługiwać przesyłanie formularza

Zadanie 1 — implementacja metody akcji usuwania HTTP-GET

W tym zadaniu zostanie zaimplementowana wersja protokołu HTTP-GET metody usuwania akcji w celu pobrania informacji o albumie.

  1. Otwórz rozwiązanie BEGIN znajdujące się w lokalizacji Source/Ex5-HandlingDeletion/BEGIN/ folder. W przeciwnym razie można nadal korzystać z rozwiązania końcowego uzyskanego przez zakończenie poprzedniego ćwiczenia.

    1. Jeśli otwarto udostępnione rozwiązanie , należy pobrać brakujące pakiety NuGet przed kontynuowaniem. W tym celu kliknij menu projekt i wybierz polecenie 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 | Kompiluj rozwiązanie.

      Note

      Jedną z zalet korzystania z NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Przy użyciu narzędzi NuGet PowerShell, określając wersje pakietu w pliku Packages. config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. To dlatego, że trzeba będzie wykonać te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

  2. Otwórz klasę StoreManagerController . Aby to zrobić, rozwiń folder controllers , a następnie kliknij dwukrotnie pozycję StoreManagerController.cs.

  3. Akcja Usuń kontroler jest dokładnie taka sama jak akcja kontrolera poprzedniego sklepu szczegóły magazynu: wysyła zapytanie do obiektu albumu z bazy danych przy użyciu identyfikatora POdanego w adresie URL i zwraca odpowiedni Widok. Aby to zrobić, Zastąp kod metody akcji HTTP-GET delete następującym:

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularzy i walidacji — usuwanie Ex5 obsługa operacji HTTP-GET Delete)

    //
    // 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 wewnątrz metody usuwania akcji i wybierz polecenie Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku.

  5. W oknie dialogowym Dodawanie widoku Sprawdź, czy nazwa widoku jest usuwana. Wybierz opcję Utwórz widok z silną typem i wybierz pozycję album (MvcMusicStore. models) z listy rozwijanej Klasa modelu . Wybierz pozycję Usuń z listy rozwijanej szablon szkieletu . Pozostaw pozostałe pola wartościami domyślnymi, 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. Aby to zrobić, 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 usuwanie widoku magazynumanager zostanie wyświetlony formularz usuwania potwierdzenia.

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

  2. Projekt zostanie uruchomiony na stronie głównej. Zmień adres URL na /StoreManager. Wybierz jeden z albumów do usunięcia, klikając przycisk Usuń i sprawdź, czy nowy widok został przekazany.

    Usuwanie albumu

    Usuwanie albumu

Zadanie 3 — Implementacja metody akcji HTTP-POST Delete

W tym zadaniu zostanie zaimplementowana wersja HTTP-POST metody usuwania akcji, która będzie wywoływana, 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 . Aby to zrobić, rozwiń folder controllers , a następnie kliknij dwukrotnie pozycję StoreManagerController.cs.

  2. Zastąp kod metody akcji usuwania http-post następującym:

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularzy i weryfikacji — Ex5 obsługa usuwania operacji 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 zostanie przetestowana Strona widok usuwania widoku magazynumanager umożliwia usunięcie albumu, a następnie przekierowanie do widoku indeksu magazynumanager.

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

  2. Projekt zostanie uruchomiony na stronie głównej. Zmień adres URL na /StoreManager. Wybierz jeden album do usunięcia, klikając przycisk Usuń. Potwierdź usunięcie, klikając przycisk Usuń .

    Usuwanie albumu

    Usuwanie albumu

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

Ćwiczenie 6: Dodawanie walidacji

Obecnie w miejscu tworzenia i edytowania formularzy nie ma żadnego rodzaju walidacji. Jeśli użytkownik pozostawi pole wymagane puste lub wpisz litery w polu Cena, pierwszy z nich zostanie pobrany z bazy danych.

Możesz dodać weryfikację do aplikacji, dodając adnotacje danych do klasy modelu. Adnotacje danych umożliwiają opisywanie reguł, które mają być stosowane do właściwości modelu, a ASP.NET MVC zajmie się wymuszeniem i wyświetleniem odpowiedniego komunikatu dla użytkowników.

Zadanie 1 — Dodawanie adnotacji do danych

W tym zadaniu zostaną dodane adnotacje danych do modelu albumu, który spowoduje, że w razie potrzeby będzie wyświetlała się Strona tworzenie i edytowanie.

W przypadku prostej klasy modelu Dodawanie adnotacji do danych jest obsługiwane tylko przez dodanie instrukcji using dla elementu System. ComponentModel. DataAnnotation, a następnie umieszczenie atrybutu [Required] w odpowiednich właściwościach. W poniższym przykładzie właściwość name jest wymagana 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 skomplikowany sposób, jak w przypadku tej aplikacji, w której jest generowana Entity Data Model. Jeśli dodano adnotacje do danych bezpośrednio do klas modelu, zostaną one nadpisywane, jeśli zaktualizujesz model z bazy danych. Zamiast tego można użyć klas częściowych metadanych, które będą istniały do przechowywania adnotacji i są skojarzone z klasami modelu przy użyciu atrybutu [metadatatype] .

  1. Otwórz rozwiązanie BEGIN znajdujące się w lokalizacji Source/Ex6-AddingValidation/BEGIN/ folder. W przeciwnym razie można nadal korzystać z rozwiązania końcowego uzyskanego przez zakończenie poprzedniego ćwiczenia.

    1. Jeśli otwarto udostępnione rozwiązanie , należy pobrać brakujące pakiety NuGet przed kontynuowaniem. W tym celu kliknij menu projekt i wybierz polecenie 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 | Kompiluj rozwiązanie.

      Note

      Jedną z zalet korzystania z NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Przy użyciu narzędzi NuGet PowerShell, określając wersje pakietu w pliku Packages. config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. To dlatego, że trzeba będzie wykonać te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

  2. Otwórz album.cs z folderu modele .

  3. Zamień zawartość album.cs na wyróżniony kod, tak aby wyglądał wyglądać następująco:

    Note

    Wiersz [DisplayFormat (ConvertEmptyStringToNull = false)] wskazuje, że puste ciągi z modelu nie będą konwertowane na wartość null, gdy pole danych zostanie zaktualizowane w źródle danych. To ustawienie pozwala uniknąć wyjątku, gdy Entity Framework przypisuje wartości null do modelu, zanim adnotacja danych potwierdzi pola.

    (Fragment kodu- ASP.NET pomocników MVC 4 i formularzy i weryfikacji — Ex6 — Klasa częściowa metadanych albumu)

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

    Note

    Ta klasa częściowego albumu ma atrybut datadatatype , który wskazuje klasę AlbumMetaData dla adnotacji danych. Oto niektóre z atrybutów adnotacji danych, które są używane do dodawania adnotacji do modelu albumu:

    • Wymagane — wskazuje, że właściwość jest polem wymaganym
    • DisplayName — definiuje tekst, który ma być używany dla pól formularza i komunikatów 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
    • ScaffoldColumn — umożliwia ukrywanie pól z formularzy edytora

Zadanie 2 — Uruchamianie aplikacji

W tym zadaniu sprawdzisz, czy pola Utwórz i edytuj weryfikują strony przy użyciu nazw wyświetlanych wybranych w ostatnim zadaniu.

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

  2. Projekt zostanie uruchomiony na stronie głównej. Zmień adres URL na /StoreManager/Create. Sprawdź, czy nazwy wyświetlane są zgodne z tymi w klasie częściowej (na przykład adres URL grafiki albumu zamiast AlbumArtUrl)

  3. Kliknij przycisk Utwórz, bez wypełniania formularza. Sprawdź, czy są wyświetlone odpowiednie komunikaty weryfikacyjne.

    Zweryfikowane pola na stronie tworzenia

    Zweryfikowane pola na stronie tworzenia

  4. Możesz sprawdzić, czy na stronie edytowania jest to samo. Zmień adres URL na /StoreManager/Edit/1 i upewnij się, że nazwy wyświetlane są zgodne z tymi w klasie częściowej (na przykład adres URL grafiki albumu zamiast AlbumArtUrl). Opróżnij pola tytuł i Cena , a następnie kliknij przycisk Zapisz. Sprawdź, czy są wyświetlone odpowiednie komunikaty weryfikacyjne.

    Zweryfikowane pola na stronie edytowania

    Zweryfikowane pola na stronie edytowania

Ćwiczenie 7: korzystanie z niezauważalnej jQuery na stronie klienta

W tym ćwiczeniu dowiesz się, jak włączyć sprawdzanie poprawności jQuery na platformie MVC 4 po stronie klienta.

Note

Niewygodna jQuery używa prefiksu danych-AJAX języka JavaScript do wywoływania metod akcji na serwerze, a nie w sposób niezauważalny emituje wbudowane skrypty klienta.

Zadanie 1 — Uruchamianie aplikacji przed włączeniem dyskretnej jQuery

W tym zadaniu zostanie uruchomiona aplikacja przed dołączeniem jQuery w celu porównania obu modeli walidacji.

  1. Otwórz rozwiązanie BEGIN znajdujące się w lokalizacji Source/Ex7-UnobtrusivejQueryValidation/BEGIN/ folder. W przeciwnym razie można nadal korzystać z rozwiązania końcowego uzyskanego przez zakończenie poprzedniego ćwiczenia.

    1. Jeśli otwarto udostępnione rozwiązanie , należy pobrać brakujące pakiety NuGet przed kontynuowaniem. W tym celu kliknij menu projekt i wybierz polecenie 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 | Kompiluj rozwiązanie.

      Note

      Jedną z zalet korzystania z NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Przy użyciu narzędzi NuGet PowerShell, określając wersje pakietu w pliku Packages. config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. To dlatego, że trzeba będzie wykonać te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.

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

  3. Projekt zostanie uruchomiony na stronie głównej. Przeglądaj /StoreManager/Create i kliknij przycisk Utwórz bez wypełniania formularza, aby sprawdzić, czy są odbierane komunikaty weryfikacji:

    Weryfikacja klienta wyłączona

    Weryfikacja klienta 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 niezauważalnej weryfikacji klienta

W tym zadaniu zostanie włączone niezauważalne sprawdzanie poprawności klienta w usłudze jQuery z pliku Web. config , który domyślnie ma wartość false we wszystkich nowych projektach ASP.NET MVC 4. Ponadto dodasz niezbędne odwołania do skryptów, aby umożliwić niewygodną weryfikację klienta w technologii jQuery.

  1. Otwórz plik Web. config w katalogu głównym projektu i upewnij się, że wartości kluczy ClientValidationEnabled i UnobtrusiveJavaScriptEnabled są ustawione na 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>
    ...
    

    Note

    Możesz również włączyć sprawdzanie poprawności klienta przez kod w Global.asax.cs, aby uzyskać te same wyniki:

    HtmlHelper. ClientValidationEnabled = true;

    Ponadto można przypisać atrybut ClientValidationEnabled do dowolnego kontrolera, aby mieć niestandardowe zachowanie.

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

  3. Upewnij się, że następujące pliki skryptów, jQuery. Validate i jQuery. Validate, są przywoływane w widoku za pomocą pakietu " ~/bundles/jqueryval".

    ...
    @section Scripts {
         @Scripts.Render("~/bundles/jqueryval")
    }
    

    Note

    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 go dodawać w tym konkretnym widoku.

Zadanie 3 — Uruchamianie aplikacji przy użyciu niezauważalnej weryfikacji jQuery

W tym zadaniu zostanie przetestowana, że szablon Tworzenie widoku programu storemanager wykonuje weryfikację po stronie klienta przy użyciu bibliotek jQuery, gdy użytkownik tworzy nowy album.

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

  2. Projekt zostanie uruchomiony na stronie głównej. Przeglądaj /StoreManager/Create i kliknij przycisk Utwórz bez wypełniania formularza, aby sprawdzić, czy są odbierane komunikaty weryfikacji:

    Sprawdzanie poprawności klienta przy włączonej platformie jQuery

    Sprawdzanie poprawności klienta przy włączonej platformie jQuery

  3. W przeglądarce Otwórz kod źródłowy dla tworzenia widoku:

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

    Note

    Dla każdej reguły walidacji klienta niezauważalne jQuery dodaje atrybut z danymi-Val-rulename="komunikatów". Poniżej znajduje się lista tagów niezauważalnych przez jQuery wstawianych do pola wejściowego HTML w celu przeprowadzenia weryfikacji klienta:

    • Dane — Val
    • Data-Val-Number
    • Data-Val-Range
    • Data-Val-Range-min/Data-Val-Range-Max
    • Data-Val — wymagane
    • Data-Val — Długość
    • Data-Val-Length-Max/Data-Val-Length — min

    Wszystkie wartości danych są wypełnione adnotacjami danychmodelu. Następnie Cała logika, która działa po stronie serwera, może być uruchamiana 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 dyskretnej technologii jQuery wygenerowany kod jest:

    <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

Dzięki zakończeniu tego praktycznego laboratorium 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
  • Funkcja szkieletu ASP.NET MVC do wyświetlania właściwości w tabeli HTML
  • Niestandardowi pomocnicy HTML do ulepszania środowiska użytkownika
  • Metody akcji, które reagują na wywołania HTTP-GET lub HTTP-POST
  • Szablon edytora udostępnionego dla podobnych szablonów widoku, takich jak tworzenie i edytowanie
  • Elementy formularza, takie jak listy rozwijane
  • Adnotacje danych na potrzeby walidacji modelu
  • Sprawdzanie poprawności po stronie klienta przy użyciu niedyskretnej biblioteki jQuery

Dodatek A: Instalowanie Visual Studio Express 2012 dla sieci Web

Można zainstalować Microsoft Visual Studio Express 2012 dla sieci Web lub innej "Express" wersji za pomocą 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 [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternatywnie, jeśli zainstalowano już Instalatora platformy sieci Web, można go otworzyć i wyszukać produkt "Visual Studio Express 2012 for Web przy użyciu zestawu Windows Azure SDK".

  2. Kliknij pozycję Zainstaluj teraz. Jeśli nie masz Instalatora platformy sieci Web , nastąpi przekierowanie do pobrania i zainstalowania go w pierwszej kolejności.

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

    Zainstaluj Visual Studio Express

    Zainstaluj Visual Studio Express

  4. Przeczytaj wszystkie licencje i postanowienia 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 zakończona

    Instalacja zakoń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 VS Express for Web

    Kafelek VS Express for Web

Dodatek B: używanie fragmentów kodu

Za pomocą fragmentów kodu masz cały kod, którego potrzebujesz na wyręką. Dokument laboratoryjny powiedzie się dokładnie wtedy, gdy można z nich korzystać, jak pokazano na poniższej ilustracji.

Wstawianie kodu do projektu za pomocą fragmentów kodu programu Visual Studio

Wstawianie kodu do projektu za pomocą fragmentów kodu programu Visual Studio

Aby dodać fragment kodu przy użyciu klawiatury (C# tylko)

  1. Umieść kursor, w którym chcesz wstawić kod.
  2. Zacznij wpisywać nazwę fragmentu kodu (bez spacji lub łączników).
  3. Obejrzyj jako IntelliSense wyświetla pasujące nazwy fragmentów kodu.
  4. Wybierz poprawny fragment kodu (lub Kontynuuj wpisywanie, dopóki nie zostanie zaznaczona cała nazwa fragmentu kodu).
  5. Naciśnij dwukrotnie klawisz Tab, aby wstawić fragment kodu w lokalizacji kursora.

Zacznij wpisywać nazwę fragmentu kodu

Zacznij wpisywać nazwę fragmentu kodu

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

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

Naciskaj klawisz Tab ponownie i wstawka zostanie rozwinięta

Naciskaj klawisz Tab ponownie i wstawka zostanie rozwinięta

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

  1. Wybierz Wstaw fragment kodu, po którym następuje Moje fragmenty kodów.
  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 Wstaw fragment

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

Wybierz odpowiedni fragment kodu z listy, klikając go

Wybierz odpowiedni fragment kodu z listy, klikając go