ASP.NET MVC 4 — podstawy

przez zespół Camp sieci Web

Pobierz zestaw szkoleniowy dla sieci Web Camp

To praktyczne laboratorium jest oparte na sklepie MVC (Model View Controller) — aplikacji samouczka, która wprowadza i objaśnia krok po kroku, jak używać ASP.NET MVC i programu Visual Studio. W całym laboratorium uczysz się prostoty, a tym samym korzystać z tych technologii jednocześnie. Zaczniesz korzystać z prostej aplikacji i utworzymy ją do momentu, gdy będzie ona w pełni funkcjonalna ASP.NET aplikacji sieci Web MVC 4.

To laboratorium działa z ASP.NET MVC 4.

Jeśli chcesz poznać wersję ASP.NET MVC 3 aplikacji samouczka, możesz ją znaleźć w sklepie MVC-Music-Store.

W ramach tego praktycznego laboratorium przyjęto założenie, że deweloper ma doświadczenie w technologiach programistycznych dla sieci Web, takich jak HTML i JavaScript.

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 charakterystyczny dla tego laboratorium jest dostępny pod adresem ASP.NET MVC 4.

Aplikacja ze sklepu muzycznego

Aplikacja sieci Web do przechowywania utworów muzycznych, która będzie skompilowana w ramach tego laboratorium, obejmuje trzy główne części: zakupy, Wyewidencjonowywanie i administrowanie. Osoby odwiedzające będą mogły przeglądać albumy według gatunku, dodawać albumy do swojego koszyka, sprawdzać ich wybór, a następnie przejść do wyewidencjonowania, aby zalogować się i zakończyć zamówienie. Ponadto administratorzy sklepu będą mogli zarządzać dostępnymi albumami oraz ich głównymi właściwościami.

Ekrany sklepu muzycznego

Ekrany sklepu muzycznego

ASP.NET MVC 4 Essentials

Aplikacja ze sklepu muzycznego będzie skompilowana przy użyciu kontrolera widoku modelu (MVC) , wzorca architektury, który oddziela aplikację do trzech głównych składników:

  • Modele: obiekty modelu są częściami aplikacji, które implementują logikę domeny. Często obiekty modelu również pobierają i przechowują stan modelu w bazie danych.
  • Widoki: Widoki to składniki, które wyświetlają interfejs użytkownika aplikacji. Zazwyczaj interfejs ten jest tworzony na podstawie danych modelu. Przykładem może być widok do edycji albumów, który wyświetla pola tekstowe i listę rozwijaną na podstawie bieżącego stanu obiektu albumu.
  • Kontrolery: Kontrolery to składniki obsługujące interakcję z użytkownikiem, manipulowanie modelem i ostatecznie Wybieranie widoku do renderowania interfejsu użytkownika. W aplikacji MVC widok służy wyłącznie do wyświetlania informacji. Za obsługę danych wprowadzanych przez użytkownika i interakcję z użytkownikiem odpowiada kontroler.

Wzorzec MVC ułatwia tworzenie aplikacji, które oddzielają różne aspekty aplikacji (logiki wejściowej, logiki biznesowej i logiki interfejsu użytkownika), jednocześnie zapewniając swobodny sprzężenie między tymi elementami. Ta separacja ułatwia zarządzanie złożonością podczas kompilowania aplikacji, ponieważ umożliwia skoncentrowanie się na jednym z aspektów implementacji w danym momencie. Ponadto wzorzec MVC ułatwia testowanie aplikacji, ułatwiając korzystanie z programowania opartego na testach (TDD) do tworzenia aplikacji.

Struktura ASP.NET MVC stanowi alternatywę dla wzorca formularzy sieci Web ASP.NET do tworzenia ASP.NET aplikacji sieci Web opartych na MVC. ASP.NET MVC Framework jest lekkim i wysoce weryfikowalne strukturą prezentacji, która (podobnie jak w przypadku aplikacji opartych na formularzach internetowych) jest zintegrowana z istniejącymi funkcjami ASP.NET, takimi jak strony główne i uwierzytelnianie oparte na członkostwie, dzięki czemu można korzystać z zalet podstawowego programu .NET Framework. Jest to przydatne, jeśli znasz już ASP.NET formularze sieci Web, ponieważ wszystkie używane biblioteki są również dostępne w ASP.NET MVC 4.

Ponadto luźne sprzęganie między trzema głównymi składnikami aplikacji MVC również wspiera programowanie równoległe. Na przykład jeden deweloper może pracować w widoku, drugi deweloper może pracować na logice kontrolera, a trzeci deweloper może skupić się na logice biznesowej w modelu.

Cele

W tym ćwiczeniu dowiesz się, jak:

  • Tworzenie aplikacji ASP.NET MVC od podstaw w oparciu o samouczek aplikacji do sklepu muzycznego
  • Dodaj kontrolery, aby obsługiwać adresy URL na stronie głównej witryny i przeglądać jej główne funkcje
  • Dodaj widok, aby dostosować wyświetlaną zawartość wraz z jej stylem
  • Dodawanie klas modelu w celu uwzględnienia danych i logiki domeny oraz zarządzania nimi
  • Używanie wzorca widoku do przekazywania informacji z akcji kontrolera do szablonów widoków
  • Poznaj nowy szablon ASP.NET MVC 4 dla aplikacji internetowych

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 C: Using fragmenty kodu".

Symulacyjn

To laboratorium praktyczne obejmuje następujące ćwiczenia:

  1. Ćwiczenie 1: Tworzenie projektu aplikacji sieci Web MusicStore ASP.NET MVC
  2. Ćwiczenie 2: Tworzenie kontrolera
  3. Ćwiczenie 3: przekazywanie parametrów do kontrolera
  4. Ćwiczenie 4: Tworzenie widoku
  5. Ćwiczenie 5. Tworzenie modelu widoku
  6. Ćwiczenie 6: Używanie parametrów w widoku
  7. Ćwiczenie 7: kolano wokół ASP.NET MVC 4 nowy szablon

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 projektu aplikacji sieci Web MusicStore ASP.NET MVC

W tym ćwiczeniu dowiesz się, jak utworzyć aplikację ASP.NET MVC w programie Visual Studio 2012 Express for Web oraz jej organizacji głównego folderu. Ponadto dowiesz się, jak dodać nowy kontroler i wyświetlić prosty ciąg na stronie głównej aplikacji.

Zadanie 1 — Tworzenie projektu aplikacji sieci Web ASP.NET MVC

  1. W tym zadaniu utworzysz pusty projekt aplikacji ASP.NET MVC przy użyciu szablonu MVC Visual Studio. Rozpocznij vs Express for Web.

  2. W menu plik kliknij pozycję Nowy projekt.

  3. W oknie dialogowym Nowy projekt wybierz typ projektu aplikacja sieci Web MVC 4 ASP.NET , który znajduje się w obszarze Wizualizacja C#, Lista szablonów sieci Web .

  4. Zmień nazwę na MvcMusicStore.

  5. Ustaw lokalizację rozwiązania w nowym folderze BEGIN w folderze źródłowym tego ćwiczenia, na przykład [Twoje-hol-path] \Source\Ex01-CreatingMusicStoreProject\Begin. Kliknij przycisk OK.

    Okno dialogowe Tworzenie nowego projektu

    Okno dialogowe Tworzenie nowego projektu

  6. W oknie dialogowym Nowy projekt ASP.NET MVC 4 wybierz szablon podstawowy i upewnij się, że wybrany aparat widoku to Razor. Kliknij przycisk OK.

    Okno dialogowe Nowy projekt ASP.NET MVC 4

    Okno dialogowe Nowy projekt ASP.NET MVC 4

Zadanie 2 — Eksplorowanie struktury rozwiązania

Struktura ASP.NET MVC obejmuje szablon projektu programu Visual Studio, który ułatwia tworzenie aplikacji sieci Web obsługujących wzorzec MVC. Ten szablon służy do tworzenia nowej aplikacji sieci Web ASP.NET MVC z wymaganymi folderami, szablonami elementów i wpisami plików konfiguracji.

W tym zadaniu sprawdzisz strukturę rozwiązania, aby poznać elementy, które są objęte usługą, i ich relacje. Następujące foldery są dołączone do wszystkich aplikacji ASP.NET MVC, ponieważ struktura ASP.NET MVC domyślnie używa konwencji "w porównaniu z podejściem" konfiguracji i wprowadza pewne domyślne założenia na podstawie konwencji nazewnictwa folderów.

  1. Po utworzeniu projektu Przejrzyj strukturę folderów utworzoną w Eksplorator rozwiązań po prawej stronie:

    Struktura folderu ASP.NET MVC w Eksplorator rozwiązań

    Struktura folderu ASP.NET MVC w Eksplorator rozwiązań

    1. Kontrolery. Ten folder będzie zawierać klasy kontrolerów. W aplikacji opartej na platformie MVC kontrolery są odpowiedzialne za obsługę interakcji z użytkownikami końcowymi, manipulowanie modelem i ostatecznie Wybieranie widoku w celu renderowania interfejsu użytkownika.

      Note

      Struktura MVC wymaga, aby nazwy wszystkich kontrolerów były kończyć się "kontrolerem"— na przykład HomeController, LoginController lub ProductController.

    2. Modele. Ten folder jest udostępniany dla klas, które reprezentują model aplikacji dla aplikacji sieci Web MVC. Obejmuje to zazwyczaj kod definiujący obiekty i logikę do współpracy z magazynem danych. Zazwyczaj rzeczywiste obiekty modelu będą znajdować się w osobnych bibliotekach klas. Jednak podczas tworzenia nowej aplikacji można uwzględnić klasy, a następnie przenieść je do oddzielnych bibliotek klas w późniejszym czasie w cyklu projektowania.

    3. Widoki. Ten folder jest zalecaną lokalizacją widoków, składnikami odpowiedzialnymi za wyświetlanie interfejsu użytkownika aplikacji. Widoki używają plików. aspx,. ascx,. cshtml i. Master, oprócz innych plików, które są powiązane z widokami renderowania. Folder widoki zawiera folder dla każdego kontrolera; folder nosi nazwę z prefiksem nazwy kontrolera. Na przykład jeśli masz kontroler o nazwie HomeController, folder widoki będzie zawierać folder o nazwie Home. Domyślnie, gdy struktura ASP.NET MVC ładuje widok, szuka pliku. aspx z żądaną nazwą widoku w folderze Views\controllerName (widoki [ControllerName] [Action]. aspx) lub (widoki [ControllerName] [Action]. cshtml) dla widoków Razor.

      Note

      Oprócz folderów wymienionych wcześniej aplikacja sieci Web MVC używa pliku Global. asax do ustawiania ustawień globalnych routingu adresów URL i używa pliku Web. config w celu skonfigurowania aplikacji.

Zadanie 3 — Dodawanie elementu HomeController

W aplikacjach ASP.NET, które nie korzystają z platformy MVC, interakcja użytkownika jest zorganizowana wokół stron i wokół zdarzeń z tych stron. Z kolei Interakcje użytkownika z aplikacjami ASP.NET MVC są zorganizowane wokół kontrolerów i ich metod działania.

Z drugiej strony ASP.NET MVC Framework mapuje adresy URL na klasy, które są określane jako kontrolery. Kontrolery przetwarzają żądania przychodzące, obsługują dane wejściowe użytkownika i interakcje, wykonują odpowiednią logikę aplikacji i określają odpowiedź do wysłania do klienta (wyświetla kod HTML, pobiera plik, przekierowuje do innego adresu URL itp.). W przypadku wyświetlania kodu HTML Klasa kontrolera zazwyczaj wywołuje oddzielny składnik widoku w celu wygenerowania znacznika HTML dla żądania. W aplikacji MVC widok służy wyłącznie do wyświetlania informacji. Za obsługę danych wprowadzanych przez użytkownika i interakcję z użytkownikiem odpowiada kontroler.

W tym zadaniu zostanie dodana klasa kontrolera, która będzie obsługiwać adresy URL na stronie głównej witryny sklepu muzyczne.

  1. Kliknij prawym przyciskiem myszy folder controllers w obszarze Eksplorator rozwiązań wybierz pozycję Dodaj , a następnie polecenie Controller :

    Dodaj polecenie kontrolera

    Dodaj kontroler — polecenie

  2. Zostanie wyświetlone okno dialogowe Dodaj kontroler . Nazwij HomeController kontrolera i naciśnij przycisk Add (Dodaj).

    Okno dialogowe Dodawanie kontrolera

    Okno dialogowe Dodawanie kontrolera

  3. Plik HomeController.cs jest tworzony w folderze controllers . Aby HomeController zwracał ciąg w akcji indeksu, Zastąp metodę index następującym kodem:

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex1 HomeController index)

    public string Index()
    {
        return "Hello from Home";
    }
    

Zadanie 4 — Uruchamianie aplikacji

To zadanie spowoduje wypróbowanie aplikacji w przeglądarce sieci Web.

  1. Naciśnij klawisz F5 , aby uruchomić aplikację. Projekt jest kompilowany i uruchamiany jest lokalny serwer sieci Web usług IIS. Lokalny serwer sieci Web usług IIS automatycznie otworzy przeglądarkę internetową wskazującą adres URL serwera sieci Web.

    Aplikacja działająca w przeglądarce sieci Web

    Aplikacja działająca w przeglądarce sieci Web

    Note

    Lokalny serwer sieci Web usług IIS uruchomi witrynę internetową przy użyciu losowego numeru portu. Na powyższej ilustracji lokacja jest uruchomiona w http://localhost:50103/, więc używa portu 50103. Numer portu może się różnić.

  2. Zamknij okno przeglądarki.

Ćwiczenie 2: Tworzenie kontrolera

W tym ćwiczeniu dowiesz się, jak zaktualizować kontroler w celu zaimplementowania prostych funkcji aplikacji do sklepu muzycznego. Ten kontroler określi metody akcji do obsługi każdego z następujących konkretnych żądań:

  • Strona z listą gatunku muzyka w sklepie Music
  • Strona przeglądania zawierająca listę wszystkich albumów muzycznych dla określonego gatunku
  • Strona szczegółów, która zawiera informacje o konkretnym albumie muzycznym

Dla zakresu tego ćwiczenia te akcje będą po prostu zwracać ciąg przez teraz.

Zadanie 1 — Dodawanie nowej klasy StoreController

W tym zadaniu zostanie dodany nowy kontroler.

  1. Jeśli nie jest jeszcze otwarty, uruchom VS Express for Web 2012.

  2. W menu plik wybierz Otwórz projekt. W oknie dialogowym Otwórz projekt przejdź do Source\Ex02-CreatingAController\Begin, wybierz pozycję Rozpocznij. sln , a następnie kliknij pozycję Otwórz. Alternatywnie można nadal korzystać z rozwiązania uzyskanego po zakończeniu 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.

  3. 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 StoreController, a następnie kliknij przycisk Dodaj.

    Okno dialogowe Dodawanie kontrolera

    Okno dialogowe Dodawanie kontrolera

Zadanie 2 — Modyfikowanie akcji StoreController

W tym zadaniu zmodyfikujesz metody kontrolera, które są nazywane akcjami. Akcje są odpowiedzialne za obsługę żądań adresów URL i Określanie zawartości, która powinna zostać wysłana z powrotem do przeglądarki lub użytkownika, który wywołał adres URL.

  1. Klasa StoreController ma już metodę index . Zostanie ona użyta w dalszej części tego laboratorium do zaimplementowania strony, która wyświetla listę wszystkich gatunków sklepu muzycznego. Na razie po prostu Zastąp metodę index następującym kodem, który zwraca ciąg "Hello z elementu Store. index ()":

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex2 StoreController index)

    public string Index()
    {
      return "Hello from Store.Index()";
    }
    
  2. Dodawanie metod przeglądania i szczegółów . Aby to zrobić, Dodaj następujący kod do StoreController:

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex2 StoreController BrowseAndDetails)

    // GET: /Store/Browse
    public string Browse()
    {
      return "Hello from Store.Browse()";
    }
    
    // GET: /Store/Details  
    public string Details()
    {
      return "Hello from Store.Details()";
    }
    

Zadanie 3 — Uruchamianie aplikacji

To zadanie spowoduje wypróbowanie aplikacji w przeglądarce sieci Web.

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

  2. Projekt zostanie uruchomiony na stronie głównej . Zmień adres URL, aby zweryfikować implementację każdej akcji.

    1. /Store. Zobaczysz, "Hello z"Store. index () .

    2. /Store/Browse. Zostanie wyświetlona "Hello ze sklepu. Browse ()" .

    3. /Store/Details. Zobaczysz, "Hello ze sklepu. Details ()" .

      Przeglądanie StoreBrowse

      Przeglądanie/Store/Browse

  3. Zamknij okno przeglądarki.

Ćwiczenie 3: przekazywanie parametrów do kontrolera

Do tej pory zostały zwrócone ciągi stałe z kontrolerów. W tym ćwiczeniu dowiesz się, jak przekazać parametry do kontrolera przy użyciu adresu URL i ciągu QueryString, a następnie wykonać akcje metody reagują na tekst do przeglądarki.

Zadanie 1 — Dodawanie parametru gatunku do StoreController

W tym zadaniu zostanie użyta Kolekcja QueryString w celu wysłania parametrów do metody Browse Action w StoreController.

  1. Jeśli nie jest jeszcze otwarty, uruchom vs Express for Web.

  2. W menu plik wybierz Otwórz projekt. W oknie dialogowym Otwórz projekt przejdź do Source\Ex03-PassingParametersToAController\Begin, wybierz pozycję Rozpocznij. sln , a następnie kliknij pozycję Otwórz. Alternatywnie można nadal korzystać z rozwiązania uzyskanego po zakończeniu 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.

  3. Otwórz klasę StoreController . W tym celu w Eksplorator rozwiązańrozwiń folder Kontrolery i kliknij dwukrotnie pozycję StoreController.cs.

  4. Zmień metodę przeglądania , dodając parametr ciągu do żądania dla określonego gatunku. ASP.NET MVC automatycznie przekaże wszystkie Parametry w postaci ciągu lub formularza post do tej metody akcji po wywołaniu. Aby to zrobić, Zastąp metodę Browse następującym kodem:

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex3 StoreController BrowseMethod)

    // GET: /Store/Browse?genre=Disco   
    public string Browse(string genre)
    {
      string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);
    
      return message;
    }
    

Note

Używasz metody narzędziowej HttpUtility. HtmlEncode , aby uniemożliwiać użytkownikom wprowadzanie kodu JavaScript do widoku za pomocą linku, takiego jak /Store/Browse? Gatunek =<>Window. Location = "http://hackersite.com"</Script> .

Aby uzyskać więcej informacji, zobacz ten artykuł w witrynie MSDN.

Zadanie 2 — Uruchamianie aplikacji

To zadanie spowoduje wypróbowanie aplikacji w przeglądarce sieci Web i użycie parametru gatunek .

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

  2. Projekt zostanie uruchomiony na stronie głównej . Czy zmienić adres URL na /Store/Browse? Gatunek = Disco , aby sprawdzić, czy akcja odbiera parametr gatunku.

    Przeglądanie StoreBrowseGenre = Disco

    Przeglądasz/Store/Browse? Gatunek = Disco

  3. Zamknij okno przeglądarki.

Zadanie 3 — Dodawanie parametru identyfikatora osadzonego w adresie URL

W tym zadaniu zostanie użyty adres URL do przekazania parametru ID do metody akcji Details elementu StoreController. Domyślna konwencja routingu ASP.NET MVC to traktowanie segmentu adresu URL po nazwie metody akcji jako parametru o nazwie ID. Jeśli metoda akcji ma parametr o nazwie ID, ASP.NET MVC automatycznie przekaże segment adresu URL jako parametr. W polu Magazyn adresów URL /szczegóły/5 Identyfikator będzie interpretowany jako 5.

  1. Zmień metodę Details elementu StoreController, dodając parametr int o nazwie ID. Aby to zrobić, Zastąp metodę Details następującym kodem:

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex3 StoreController DetailsMethod)

    // GET: /Store/Details/5    
    public string Details(int id)
    {
      string message = "Store.Details, ID = " + id;
    
      return message;
    }
    

Zadanie 4 — Uruchamianie aplikacji

To zadanie spowoduje wypróbowanie aplikacji w przeglądarce sieci Web i użycie parametru ID .

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

  2. Projekt zostanie uruchomiony na stronie głównej . Zmień adres URL na /Store/Details/5 , aby sprawdzić, czy akcja odbiera parametr ID.

    Przeglądanie StoreDetails5

    Przeglądanie/Store/Details/5

Ćwiczenie 4: Tworzenie widoku

Do tej pory zostały zwrócone ciągi z akcji kontrolera. Chociaż jest to przydatny sposób na zrozumienie sposobu działania kontrolerów, nie jest to sposób, w jaki są kompilowane prawdziwe aplikacje sieci Web. Widoki to składniki, które zapewniają lepsze podejście do generowania kodu HTML z powrotem do przeglądarki przy użyciu plików szablonów.

W tym ćwiczeniu dowiesz się, jak dodać stronę wzorcową układu, aby skonfigurować szablon dla typowej zawartości HTML, arkusz stylów, aby wzbogacić wygląd i działanie witryny, a wreszcie szablon widoku, aby umożliwić HomeController zwracanie kodu HTML.

Zadanie 1 — Modyfikowanie pliku _Layout. cshtml

Plik ~/Views/Shared/_Layout. cshtml umożliwia skonfigurowanie szablonu do użycia w całej witrynie sieci Web. W tym zadaniu zostanie dodana Strona wzorcowa układu ze wspólnym nagłówkiem z linkami do strony głównej i obszaru magazynu.

  1. Jeśli nie jest jeszcze otwarty, uruchom vs Express for Web.

  2. W menu plik wybierz Otwórz projekt. W oknie dialogowym Otwórz projekt przejdź do Source\Ex04-CreatingAView\Begin, wybierz pozycję Rozpocznij. sln , a następnie kliknij pozycję Otwórz. Alternatywnie można nadal korzystać z rozwiązania uzyskanego po zakończeniu 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.

  3. Plik _Layout. cshtml zawiera układ kontenera HTML dla wszystkich stron w witrynie. Zawiera element <html> dla odpowiedzi HTML, a także <> i <treść>. @RenderBody() w treści HTML Zidentyfikuj regiony, w których szablony będą mogły być wypełniane zawartością dynamiczną. (C#)

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
         <title>@ViewBag.Title</title>
         @Styles.Render("~/Content/css")
         @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
         @RenderBody()
    
         @Scripts.Render("~/bundles/jquery")
         @RenderSection("scripts", required: false)
    </body>
    </html>
    
  4. Dodaj wspólny nagłówek z linkami do strony głównej i obszaru przechowywania na wszystkich stronach w witrynie. Aby to zrobić, Dodaj następujący kod poniżej <treści> instrukcji. (C#)

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
         <title>@ViewBag.Title</title>
         @Styles.Render("~/Content/css")
         @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
         <header>
              <div class="content-wrapper">
                    <div class="float-left">
                         <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                         <nav>
                              <ul id="menu">
                                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                    <li>@Html.ActionLink("Store", "Index", "Store")</li>
                              </ul>
                         </nav>
                    </div>
              </div>
         </header>
         @RenderBody()
    
         @Scripts.Render("~/bundles/jquery")
         @RenderSection("scripts", required: false)
    </body>
    </html>
    
  5. Dołącz element DIV, aby renderować sekcję treści każdej strony. Zamień @RenderBody() na następujący wyróżniony kod: (C#)

    ...
    <body>
         <header>
              <div class="content-wrapper">
                    <div class="float-left">
                         <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                         <nav>
                              <ul id="menu">
                                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                    <li>@Html.ActionLink("Store", "Index", "Store")</li>
                              </ul>
                         </nav>
                    </div>
              </div>
         </header>
         <div id="body">
              @RenderSection("featured", required: false)
              <section class="content-wrapper main-content clear-fix">
                    @RenderBody()
              </section>
         </div>
         ...
    </body>
    </html>
    

    Note

    Czy wiesz? Program Visual Studio 2012 zawiera fragmenty, które ułatwiają dodawanie często używanego kodu w języku HTML, pliki kodu i inne elementy. Wypróbuj go, wpisując <div> i naciskając klawisz Tab dwa razy, aby wstawić kompletny tag DIV .

Zadanie 2 — Dodawanie arkusza stylów CSS

Szablon pustego projektu zawiera bardzo uproszczony plik CSS, który zawiera tylko style używane do wyświetlania podstawowych formularzy i komunikatów weryfikacyjnych. Będziesz używać dodatkowych arkuszy CSS i obrazów (potencjalnie oferowanych przez projektanta) w celu zwiększenia wyglądu i działania witryny.

W tym zadaniu dodasz arkusz stylów CSS do definiowania stylów witryny.

  1. Plik CSS i obrazy są zawarte w folderze Source\Assets\Content w tym laboratorium. Aby dodać je do aplikacji, przeciągnij jej zawartość z okna Eksploratora Windows do Eksplorator rozwiązań w Visual Studio Express dla sieci Web, jak pokazano poniżej:

    Przeciąganie zawartości stylu

    Przeciąganie zawartości stylu

  2. Zostanie wyświetlone okno dialogowe z ostrzeżeniem z prośbą o potwierdzenie zastąpienia pliku site. css i niektórych istniejących obrazów. Zaznacz pole wyboru Zastosuj do wszystkich elementów , a następnie kliknij przycisk tak.

Zadanie 3 — Dodawanie szablonu widoku

W tym zadaniu dodasz szablon widoku w celu wygenerowania odpowiedzi HTML, która będzie używać strony wzorcowej układu i CSS dodanej w tym ćwiczeniu.

  1. Aby użyć szablonu widoku podczas przeglądania strony głównej witryny, najpierw należy wskazać, że zamiast zwracać ciąg, Metoda indeksu HomeController zwróci Widok. Otwórz klasę HomeController i zmień jej metodę index w taki sposób, aby zwracała ActionResulti zwracała Widok () .

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-EX4 HomeController index)

    public class HomeController : Controller
    {
        //
        // GET: /Home/
    
        public ActionResult Index()
        {
            return this.View();
        }
    }
    
  2. Teraz musisz dodać odpowiedni szablon widoku. Aby to zrobić, kliknij prawym przyciskiem myszy wewnątrz metody akcji indeksu i wybierz polecenie Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku .

    Dodawanie widoku z poziomu metody index

    Dodawanie widoku z poziomu metody index

  3. Zostanie wyświetlone okno dialogowe Dodaj widok , aby wygenerować plik szablonu widoku. Domyślnie to okno dialogowe wstępnie wypełnia nazwę szablonu widoku, aby była zgodna z metodą akcji, która będzie z niego korzystać. Ze względu na to, że w ramach metody akcji index w HomeController użyto menu kontekstowego Dodaj widok, w oknie dialogowym Dodawanie widoku znajduje się indeks jako domyślna nazwa widoku. Kliknij pozycję Add (Dodaj).

    Okno dialogowe Dodawanie widoku

    Okno dialogowe Dodawanie widoku

  4. Program Visual Studio generuje szablon widoku index. cshtml w folderze Views\Home , a następnie go otwiera.

    Utworzono widok indeksu macierzystego

    Utworzono widok indeksu macierzystego

    Note

    Nazwa i lokalizacja pliku index. cshtml są odpowiednie i są zgodne z domyślnymi konwencjami nazewnictwa MVC ASP.NET.

    Folder \Views*Home* jest zgodny z nazwą kontrolera (kontroleremgłównym ). Nazwa szablonu widoku (indeks) jest zgodna z metodą akcji kontrolera, która będzie wyświetlać widok.

    W ten sposób ASP.NET MVC unika konieczności jawnego określenia nazwy lub lokalizacji szablonu widoku w przypadku używania tej konwencji nazewnictwa do zwrócenia widoku.

  5. Wygenerowany szablon widoku jest oparty na wcześniej zdefiniowanym szablonie _Layout. cshtml . Zaktualizuj Właściwość ViewBag. title do strony główneji zmień jej główną zawartość na stronę główną, jak pokazano w poniższym kodzie:

    @{
        ViewBag.Title = "Home";
    }
    
    <h2>This is the Home Page</h2>
    
  6. Wybierz projekt MvcMusicStore w Eksplorator rozwiązań a następnie naciśnij klawisz F5 , aby uruchomić aplikację.

Zadanie 4. Weryfikacja

Aby sprawdzić, czy wszystkie kroki w poprzednim ćwiczeniu zostały wykonane prawidłowo, wykonaj następujące czynności:

W przypadku aplikacji otwartej w przeglądarce należy zauważyć, że:

  1. Metoda akcji indeksu HomeController znaleziona i wyświetlana w szablonie widoku \Views\Home\Index.cshtml , nawet jeśli kod nosi nazwę Return () , ponieważ szablon widoku przestrzega standardowej konwencji nazewnictwa.

  2. Na stronie głównej zostanie wyświetlony komunikat powitalny zdefiniowany w szablonie widoku \Views\Home\Index.cshtml .

  3. Na stronie głównej jest używany szablon _Layout. cshtml , dlatego Komunikat powitalny jest zawarty w układzie HTML witryny standardowej.

    Widok indeksu macierzystego przy użyciu zdefiniowanego LayoutPage i stylu

    Widok indeksu macierzystego przy użyciu zdefiniowanego LayoutPage i stylu

Ćwiczenie 5. Tworzenie modelu widoku

Do tej pory Twoje widoki wyświetlają kod HTML stałe, ale w celu utworzenia dynamicznych aplikacji sieci Web szablon widoku powinien otrzymywać informacje z kontrolera. Jedną z typowych technik do użycia w tym celu jest wzorzec ViewModel , który umożliwia kontrolerowi spakowanie wszystkich informacji potrzebnych do wygenerowania odpowiedniej odpowiedzi html.

W tym ćwiczeniu dowiesz się, jak utworzyć klasę ViewModel i dodać wymagane właściwości: liczbę gatunków w sklepie i listę tych gatunków. Można również zaktualizować StoreController, aby korzystał z utworzonych ViewModel, a wreszcie utworzyć nowy szablon widoku, który będzie wyświetlał wymienione właściwości na stronie.

Zadanie 1 — Tworzenie klasy ViewModel

W tym zadaniu utworzysz klasę ViewModel, która będzie implementować scenariusz tworzenia gatunku dla danego sklepu.

  1. Jeśli nie jest jeszcze otwarty, uruchom vs Express for Web.

  2. W menu plik wybierz Otwórz projekt. W oknie dialogowym Otwórz projekt przejdź do Source\Ex05-CreatingAViewModel\Begin, wybierz pozycję Rozpocznij. sln , a następnie kliknij pozycję Otwórz. Alternatywnie można nadal korzystać z rozwiązania uzyskanego po zakończeniu 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.

  3. Utwórz folder modele widoków , aby pomieścić ViewModel. W tym celu kliknij prawym przyciskiem myszy projekt MvcMusicStore najwyższego poziomu, wybierz polecenie Dodaj , a następnie pozycję Nowy folder.

    Dodawanie nowego folderu

    Dodawanie nowego folderu

  4. Nazwij folder modele widoków.

    Folder modele widoków w Eksplorator rozwiązań

    Folder modele widoków w Eksplorator rozwiązań

  5. Utwórz klasę ViewModel . Aby to zrobić, kliknij prawym przyciskiem myszy folder modele widoków , a następnie wybierz pozycję Dodaj , a następnie pozycję nowy element. W obszarze kodwybierz element klasy i Nazwij plik StoreIndexViewModel.cs, a następnie kliknij przycisk Dodaj.

    Dodawanie nowej klasy

    Dodawanie nowej klasy

    Tworzenie klasy StoreIndexViewModel

    Tworzenie klasy StoreIndexViewModel

Zadanie 2 — Dodawanie właściwości do klasy ViewModel

Istnieją dwa parametry, które mają zostać przesłane z StoreController do szablonu widoku, aby wygenerować oczekiwaną odpowiedź HTML: liczbę gatunków w sklepie i listę tych gatunków.

W tym zadaniu dodasz te 2 właściwości do klasy StoreIndexViewModel : NumberOfGenres (Integer) i gatunek (lista ciągów).

  1. Dodaj właściwości NumberOfGenres i gatuneks do klasy StoreIndexViewModel . Aby to zrobić, Dodaj następujące 2 wiersze do definicji klasy:

    (Fragment kodu- ASP.NET MVC 4 podstawowe-Ex5 StoreIndexViewModel Properties)

    public class StoreIndexViewModel
    {
        public int NumberOfGenres { get; set; }
    
        public List<string> Genres { get; set; }
    }
    

Note

W notacji {get; set;} jest używana C#funkcja właściwości, która została zaimplementowana. Zapewnia korzyści wynikające z właściwości bez konieczności deklarowania pola zapasowego.

Zadanie 3 — Aktualizowanie StoreController do korzystania z StoreIndexViewModel

Klasa StoreIndexViewModel hermetyzuje informacje, które są konieczne do przekazania z metody indeksu StoreControllerdo szablonu widoku w celu wygenerowania odpowiedzi.

W tym zadaniu zaktualizujesz StoreController , aby użyć StoreIndexViewModel.

  1. Otwórz klasę StoreController .

    Otwieranie klasy StoreController

    Otwieranie klasy StoreController

  2. Aby można było użyć klasy StoreIndexViewModel z StoreController, Dodaj następującą przestrzeń nazw u góry kodu StoreController :

    (Fragment kodu- ASP.NET MVC 4 — podstawowe-Ex5 StoreIndexViewModel za pomocą modele widoków)

    using MvcMusicStore.ViewModels;
    
  3. Zmień metodę akcji index StoreControllertak, aby tworzyła i wypełnia obiekt StoreIndexViewModel , a następnie przekazuje go do szablonu widoku w celu wygenerowania odpowiedzi html.

    Note

    W programie Lab "ASP.NET modele MVC i dostęp do danych" napiszesz kod, który pobiera listę gatunków sklepu z bazy danych. W poniższym kodzie zostanie utworzona Lista fikcyjnych gatunków danych, które zapełnią StoreIndexViewModel.

    Po utworzeniu i skonfigurowaniu obiektu StoreIndexViewModel zostanie on przesłany jako argument do metody widoku . Oznacza to, że szablon widoku będzie używać tego obiektu do generowania odpowiedzi HTML.

  4. Zastąp metodę index następującym kodem:

    (Fragment kodu- ASP.NET MVC 4 podstawowe-Ex5 StoreController index)

    public ActionResult Index()
    {
        // Create a list of genres
        var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};
    
        // Create our view model
        var viewModel = new StoreIndexViewModel { 
            NumberOfGenres = genres.Count(),
            Genres = genres
        };
    
        return this.View(viewModel);
    }
    

Note

Jeśli nie znasz programu C#, możesz założyć, że użycie funkcji var oznacza, że zmienna viewModel jest opóźniona. To nie jest poprawne — C# kompilator używa wnioskowania typu w oparciu o przypisane elementy do zmiennej, aby określić, że ViewModel jest typu StoreIndexViewModel. Ponadto przez skompilowanie lokalnej zmiennej viewModel jako typu StoreIndexViewModel uzyskasz sprawdzanie czasu kompilowania i obsługę edytora kodu programu Visual Studio.

Zadanie 4 — Tworzenie szablonu widoku korzystającego z StoreIndexViewModel

W tym zadaniu utworzysz szablon widoku, który będzie używać obiektu StoreIndexViewModel przekazaną przez kontroler do wyświetlania listy gatunków.

  1. Przed utworzeniem nowego szablonu widoku skompilujemy projekt, aby okno dialogowe Dodawanie widoku wie o klasie StoreIndexViewModel . Skompiluj projekt, wybierając element menu kompilacja , a następnie Skompiluj MvcMusicStore.

    Kompilowanie projektu

    Kompilowanie projektu

  2. Utwórz nowy szablon widoku. Aby to zrobić, kliknij prawym przyciskiem myszy wewnątrz metody index i wybierz polecenie Dodaj widok.

    Dodawanie widoku

    Dodawanie widoku

  3. Ponieważ okno dialogowe Dodawanie widoku zostało wywołane z StoreController, spowoduje to dodanie domyślnego szablonu widoku w pliku \Views\Store\Index.cshtml . Zaznacz pole wyboru Utwórz silnie wpisaną-View , a następnie wybierz StoreIndexViewModel jako klasę modelu. Upewnij się również, że wybrany aparat widoku to Razor. Kliknij pozycję Add (Dodaj).

    Okno dialogowe Dodawanie widoku

    Okno dialogowe Dodawanie widoku

    Plik szablonu widoku \Views\Store\Index.cshtml zostanie utworzony i otwarty. W oparciu o informacje podane do okna dialogowego Dodawanie widoku w ostatnim kroku, szablon widoku będzie oczekiwać wystąpienia StoreIndexViewModel jako danych do użycia w celu wygenerowania odpowiedzi html. Zobaczysz, że szablon dziedziczy ViewPage<musicstore.viewmodels.storeindexviewmodel> w C#elemencie.

Zadanie 5 — Aktualizowanie szablonu widoku

W tym zadaniu zostanie zaktualizowany szablon widoku utworzony w ostatnim zadaniu w celu pobrania liczby gatunków i ich nazw na stronie.

Note

Użyjesz @ Syntax (często nazywanej "kodem Nuggets"), aby wykonać kod w szablonie widoku.

  1. W pliku index. cshtml w folderze Store Zamień swój kod na następujący:
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>
> [!NOTE]
> As soon as you finish typing the period after the word **Model**, Visual Studio's Intellisense will show a list of possible properties and methods to choose from.
> 
> ![](aspnet-mvc-4-fundamentals/_static/image25.png)
> 
> *Getting Model properties and methods with Visual Studio's IntelliSense*
> 
> The **Model** property references the **StoreIndexViewModel** object that the Controller passed to the View template. This means that you can access all of the data passed from the Controller to the View template via the **Model** property, and format it into an appropriate HTML response within the View template.
> 
> You can just select the **NumberOfGenres** property from the Intellisense list rather than typing it in and then it will auto-complete it by pressing the **tab key**.
  1. Pętla nad listą gatunek w StoreIndexViewModel i Utwórz kod HTML <ul> list przy użyciu pętli foreach . (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
        ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p>Select from @Model.NumberOfGenres genres</p>
    
    <ul>
    @foreach (string genreName in Model.Genres)
    {
        <li>
            @genreName
        </li>
    }
    </ul>
    
  2. Naciśnij klawisz F5 , aby uruchomić aplikację i przeglądać /Store. Zostanie wyświetlona lista gatunków przeniesiona w obiekcie StoreIndexViewModel z StoreController do szablonu widoku.

    Widok wyświetlania listy gatunków

    Widok wyświetlania listy gatunków

  3. Zamknij okno przeglądarki.

Ćwiczenie 6: Używanie parametrów w widoku

W ćwiczeniu 3 przedstawiono sposób przekazywania parametrów do kontrolera. W tym ćwiczeniu dowiesz się, jak używać tych parametrów w szablonie widoku. W tym celu należy najpierw wprowadzić klasy modelu, które ułatwią zarządzanie danymi i logiką domeny. Ponadto dowiesz się, jak tworzyć linki do stron w aplikacji ASP.NET MVC, bez obaw, takich jak kodowanie ścieżek adresów URL.

Zadanie 1 — Dodawanie klas modelu

W przeciwieństwie do modele widoków, które są tworzone tylko w celu przekazywania informacji z kontrolera do widoku, klasy modelu są kompilowane tak, aby zawierały dane i logikę domen i zarządzać nimi. W tym zadaniu zostaną dodane dwie klasy modelu do reprezentowania tych koncepcji: gatunek i album.

  1. Jeśli nie jest jeszcze otwarty, uruchom vs Express for Web

  2. W menu plik wybierz Otwórz projekt. W oknie dialogowym Otwórz projekt przejdź do Source\Ex06-UsingParametersInView\Begin, wybierz pozycję Rozpocznij. sln , a następnie kliknij pozycję Otwórz. Alternatywnie można nadal korzystać z rozwiązania uzyskanego po zakończeniu 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.

  3. Dodaj klasę modelu gatunek . W tym celu kliknij prawym przyciskiem myszy folder modele w Eksplorator rozwiązań, wybierz polecenie Dodaj , a następnie opcję nowy element . W obszarze kodwybierz element klasy i Nazwij plik Genre.cs, a następnie kliknij przycisk Dodaj.

    Dodawanie klasy

    Dodawanie nowego elementu

    Dodaj klasę modelu gatunku

    Dodaj klasę modelu gatunku

  4. Dodaj właściwość name do klasy gatunek. Aby to zrobić, Dodaj następujący kod:

    (Fragment kodu- ASP.NET MVC 4 podstawy-Ex6 gatunek)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcMusicStore.Models
    {
        public class Genre
        {
            public string Name { get; set; }
        }
    }
    
  5. Postępując zgodnie z tą samą procedurą jak wcześniej, Dodaj klasę albumu . W tym celu kliknij prawym przyciskiem myszy folder modele w Eksplorator rozwiązań, wybierz polecenie Dodaj , a następnie opcję nowy element . W obszarze kodwybierz element klasy i Nazwij plik album.cs, a następnie kliknij przycisk Dodaj.

  6. Dodaj dwie właściwości do klasy albumu: gatunek i tytuł. Aby to zrobić, Dodaj następujący kod:

    (Fragment kodu — ASP.NET MVC 4 — podstawy — Ex6 album)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcMusicStore.Models
    {
        public class Album
        {
            public string Title { get; set; }
    
            public Genre Genre { get; set; }
        }
    }
    

Zadanie 2 — Dodawanie elementu StoreBrowseViewModel

W tym zadaniu zostanie użyta StoreBrowseViewModel , aby wyświetlić albumy pasujące do wybranego gatunku. W tym zadaniu utworzysz tę klasę, a następnie dodasz dwie właściwości, aby obsłużyć gatunek i jego listę albumów.

  1. Dodaj klasę StoreBrowseViewModel . W tym celu kliknij prawym przyciskiem myszy folder modele widoków w Eksplorator rozwiązań, wybierz pozycję Dodaj , a następnie opcję nowy element . W obszarze kodwybierz element klasy i Nazwij plik StoreBrowseViewModel.cs, a następnie kliknij przycisk Dodaj.

  2. Dodaj odwołanie do modeli w klasie StoreBrowseViewModel . Aby to zrobić, Dodaj następujące polecenie przy użyciu przestrzeni nazw:

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex6 UsingModel)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
        }
    }
    
  3. Dodaj dwie właściwości do klasy StoreBrowseViewModel : gatunek i albumy. Aby to zrobić, Dodaj następujący kod:

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex6 ModelProperties)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
            public Genre Genre { get; set; }
    
            public List<Album> Albums { get; set; }
        }
    }
    

Note

Co to jest lista<>albumu ?: w tej definicji jest używana lista<t> typ, gdzie t ogranicza typ, do którego należą elementy tej listy , w tym przypadku album (lub dowolne z jego obiektów podrzędnych).

Możliwość projektowania klas i metod, które opóźniają specyfikację jednego lub więcej typów do momentu zadeklarowania klasy lub metody i wystąpienia przez kod klienta jest funkcją C# języka o nazwie Generics.

Lista<t> jest ogólnym odpowiednikiem typu ArrayList i jest dostępna w przestrzeni nazw System. Collections. Generic . Jedną z korzyści wynikających z używania typów ogólnych jest to, że od momentu określenia typu, nie trzeba zadbać o wykonywanie operacji sprawdzania typu, takich jak Rzutowanie elementów do albumu , tak jak w przypadku ArrayList.

Zadanie 3 — Używanie nowego ViewModel w StoreController

W tym zadaniu zmodyfikujemy metody akcji przeglądania i szczegółów StoreController, aby użyć nowej StoreBrowseViewModel.

  1. Dodaj odwołanie do folderu models w klasie StoreController . W tym celu rozwiń folder controllers w Eksplorator rozwiązań i Otwórz klasę StoreController . Następnie Dodaj następujący kod:

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex6 UsingModelInController)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using MvcMusicStore.ViewModels;
    using MvcMusicStore.Models;
    
  2. Zastąp metodę przeglądania akcją, aby użyć klasy StoreViewBrowseController . Utworzysz gatunek i dwa nowe obiekty albumów z fikcyjnymi danymi (w następnym ćwiczeniu laboratorium będziesz używać rzeczywistych danych z bazy danych). Aby to zrobić, Zastąp metodę Browse następującym kodem:

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex6 BrowseMethod)

    //
    // GET: /Store/Browse?genre=Disco
    
    public ActionResult Browse(string genre)
    {
        var genreModel = new Genre()
        {
            Name = genre
        };
    
        var albums = new List<Album>()
        {
            new Album() { Title = genre + " Album 1" },
            new Album() { Title = genre + " Album 2" }
        };
    
        var viewModel = new StoreBrowseViewModel()
        {
            Genre = genreModel,
            Albums = albums
        };
    
        return this.View(viewModel);
    }
    
  3. Zastąp metodę akcji Details , aby użyć klasy StoreViewBrowseController . Utworzysz nowy obiekt albumu do zwrócenia do widoku. Aby to zrobić, Zastąp metodę Details następującym kodem:

    (Fragment kodu — ASP.NET MVC 4 — podstawowe-Ex6 DetailsMethod)

    //
    // GET: /Store/Details/5
    
    public ActionResult Details(int id)
    {
      var album = new Album { Title = "Sample Album" };
    
      return this.View(album);
    }
    

Zadanie 4 — Dodawanie szablonu widoku przeglądania

W tym zadaniu zostanie dodany widok przeglądania w celu wyświetlenia albumów znalezionych dla określonego gatunku.

  1. Przed utworzeniem nowego szablonu widoku należy skompilować projekt, aby wyświetlić okno dialogowe Dodawanie widoku o klasie ViewModel do użycia. Skompiluj projekt, wybierając element menu kompilacja , a następnie Skompiluj MvcMusicStore.

  2. Dodaj widok przeglądania . Aby to zrobić, kliknij prawym przyciskiem myszy metodę przeglądania akcji StoreController i kliknij polecenie Dodaj widok.

  3. W oknie dialogowym Dodawanie widoku Sprawdź, czy nazwa widoku jest przeszukiwana. Zaznacz pole wyboru Utwórz widok o jednoznacznie określonym typie i wybierz pozycję StoreBrowseViewModel z listy rozwijanej klasy modeli . Pozostaw pozostałe pola wartością domyślną. Następnie kliknij pozycję Dodaj.

    Dodawanie widoku przeglądania

    Dodawanie widoku przeglądania

  4. Zmodyfikuj polecenie Browse. cshtml , aby wyświetlić informacje o gatunku, uzyskując dostęp do obiektu StoreBrowseViewModel , który jest przesyłany do szablonu widoku. Aby to zrobić, Zastąp zawartość następującym: (C#)

    @model MvcMusicStore.ViewModels.StoreBrowseViewModel
    
    @{
        ViewBag.Title = "Browse Albums";
    }
    
    <h2>Browsing Genre: @Model.Genre.Name</h2>
    
    <ul>
        @foreach (var album in Model.Albums)
        {
            <li>@album.Title</li>
        }
    </ul>
    

Zadanie 5 — Uruchamianie aplikacji

W tym zadaniu zostanie przetestowane, że metoda Browse pobiera albumy z akcji Przeglądaj .

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

  2. Projekt zostanie uruchomiony na stronie głównej. Czy zmienić adres URL na /Store/Browse? Gatunek = Disco , aby sprawdzić, czy akcja zwraca dwa albumy.

    Przeglądanie albumów Disco w sklepie

    Przeglądanie albumów Disco w sklepie

Zadanie 6 — Wyświetlanie informacji o określonym albumie

W tym zadaniu zostanie wdrożony widok Magazyn/szczegóły w celu wyświetlenia informacji o określonym albumie. W tym ćwiczeniu w tym ćwiczeniu wszystko, co będzie wyświetlane na albumie, jest już zawarte w szablonie widoku . Dlatego zamiast tworzenia klasy StoreDetailsViewModel będzie używany bieżący szablon StoreBrowseViewModel , który przekazuje do niego album.

  1. W razie potrzeby Zamknij przeglądarkę, aby powrócić do okna programu Visual Studio. Dodaj nowy widok szczegółów dla metody akcji Details StoreController. W tym celu kliknij prawym przyciskiem myszy metodę Details w klasie StoreController , a następnie kliknij polecenie Dodaj widok.

  2. W oknie dialogowym Dodawanie widoku Sprawdź, czy Nazwa widoku to szczegóły. Zaznacz pole wyboru Utwórz widok o jednoznacznie określonym typie i wybierz opcję album z listy rozwijanej Klasa modelu . Pozostaw pozostałe pola wartością domyślną. Następnie kliknij pozycję Dodaj. Spowoduje to utworzenie i otwarcie pliku \Views\Store\Details.cshtml .

    Dodawanie widoku szczegółów

    Dodawanie widoku szczegółów

  3. Zmodyfikuj plik details. cshtml , aby wyświetlić informacje o albumie, uzyskując dostęp do obiektu albumu , który jest przesyłany do szablonu widoku. Aby to zrobić, Zastąp zawartość następującym: (C#)

    @model MvcMusicStore.Models.Album
    
    @{
        ViewBag.Title = "Details";
    }
    
    <h2>Album: @Model.Title</h2>
    

Zadanie 7 — Uruchamianie aplikacji

W tym zadaniu zostanie przetestowany, że widok szczegóły pobiera informacje o albumie z metody akcji szczegóły .

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

  2. Projekt zostanie uruchomiony na stronie głównej . Zmień adres URL na /Store/Details/5 , aby zweryfikować informacje o albumie.

    Szczegóły przeglądania albumów

    Przeglądanie szczegółów albumu

W tym zadaniu dodasz w widoku sklepu link do odpowiedniego adresu URL /Store/Browse w polu Nazwa każdego gatunku. W ten sposób po kliknięciu gatunku dla wystąpienia Discozostanie przeszukany /Store/Browse? gatunek = Disco URL.

  1. W razie potrzeby Zamknij przeglądarkę, aby powrócić do okna programu Visual Studio. Zaktualizuj stronę indeksu , aby dodać łącze do strony przeglądania . W tym celu w Eksplorator rozwiązań rozwiń folder widoki , a następnie folder Store i kliknij dwukrotnie stronę index. cshtml .

  2. Dodaj link do widoku przeglądania wskazującego wybrany gatunek. Aby to zrobić, Zastąp następujący wyróżniony kod w <li> tagów: (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
        ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p> Select from @Model.NumberOfGenres genres</p>
    
    <ul>
        @foreach (string genreName in Model.Genres) {
            <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
            </li>
            }
    </ul>
    

    Note

    innym podejściem będzie łączenie bezpośrednio ze stroną, z kodem podobnym do poniższego:

    <a href ="/Store/Browse? gatunek =@genreName">@genreName&lt;/a&gt;

    Chociaż to podejście działa, zależy to od ciągu stałe. W przypadku późniejszej zmiany nazwy kontrolera należy ręcznie zmienić tę instrukcję. Lepszym rozwiązaniem jest użycie metody pomocnika HTML . ASP.NET MVC zawiera metodę pomocnika HTML, która jest dostępna dla takich zadań. Metoda pomocnika HTML. ActionLink () ułatwia tworzenie kodu HTML<linków > , co sprawia, że ścieżki URL są poprawnie zakodowane w adresie URL.

    Plik HTML. ActionLink ma kilka przeciążeń. W tym ćwiczeniu będziesz używać jednego z trzech parametrów:

    1. Tekst łącza, który będzie wyświetlał nazwę gatunku
    2. Nazwa akcji kontrolera (Przeglądaj)
    3. Wartości parametrów trasy, określające zarówno nazwę (gatunek), jak i wartość (nazwę gatunku)

Zadanie 9 — Uruchamianie aplikacji

W tym zadaniu sprawdzisz, że każdy gatunek jest wyświetlany z linkiem do odpowiedniego adresu URL /Store/Browse .

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

  2. Projekt zostanie uruchomiony na stronie głównej. Zmień adres URL na /Store , aby sprawdzić, czy każdy gatunek łączy się z odpowiednim adresem URL /Store/Browse .

    Przeglądanie gatunków z linkami do strony przeglądania

    Przeglądanie gatunków z linkami do strony przeglądania

Zadanie 10 — Używanie dynamicznej kolekcji ViewModel do przekazywania wartości

W tym zadaniu przedstawiono prostą i zaawansowaną metodę przekazywania wartości między kontrolerem a widokiem bez wprowadzania żadnych zmian w modelu. ASP.NET MVC 4 udostępnia kolekcje "ViewModel", które można przypisać do dowolnej wartości dynamicznej i uzyskać do nich dostęp tylko w kontrolerach i widokach.

Teraz użyjesz dynamicznej kolekcji ViewBag, aby przekazać listę "ych" gatunku z kontrolera do widoku. Widok indeksu magazynu będzie miał dostęp do ViewModel i wyświetlania informacji.

  1. W razie potrzeby Zamknij przeglądarkę, aby powrócić do okna programu Visual Studio. Otwórz StoreController.cs i zmodyfikuj metodę index , aby utworzyć listę gatunków oznaczona gwiazdkami w kolekcji ViewModel:

    public ActionResult Index()
    {
        // Create list of genres
        var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };
    
        // Create your view model
        var viewModel = new StoreIndexViewModel
        {
            NumberOfGenres = genres.Count,
            Genres = genres
        };
    
        ViewBag.Starred = new List<string> { "Rock", "Jazz" };
    
        return this.View(viewModel);
    }
    

    Note

    Aby uzyskać dostęp do właściwości, można również użyć składni ViewBag ["oznaczona gwiazdkami"] .

  2. Ikona gwiazdki "oznaczona gwiazdkami. png" jest zawarta w folderze Source\Assets\Images w tym laboratorium. Aby dodać ją do aplikacji, przeciągnij jej zawartość z okna Eksploratora Windows do Eksplorator rozwiązań w programie Visual Web Developer Express, jak pokazano poniżej:

    Dodawanie obrazu gwiazdy do rozwiązania

    Dodawanie obrazu gwiazdy do rozwiązania

  3. Otwórz widok Store/index. cshtml i zmodyfikuj zawartość. Właściwość "oznaczona gwiazdkami" zostanie odczytana w kolekcji ViewBag i zażądać, jeśli nazwa bieżącego gatunku znajduje się na liście. W takim przypadku zostanie wyświetlona ikona gwiazdki z prawej strony linku do gatunku. (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
         ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p>Select from @Model.NumberOfGenres genres</p>
    
    <ul>
         @foreach (string genreName in Model.Genres)
         {
              <li>
                    @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
    
                    @if (ViewBag.Starred.Contains(genreName))
                    { 
                         <img src="../../Content/Images/starred.png" alt="Starred element" />
                    }
              </li>
         }
    </ul>
    <br />
    <h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>
    

Zadanie 11 — uruchamianie aplikacji

W tym zadaniu sprawdzisz, że w gatunku oznaczona gwiazdkami zostanie wyświetlona ikona gwiazdki.

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

  2. Projekt zostanie uruchomiony na stronie głównej . Zmień adres URL na /Store , aby upewnić się, że każdy proponowany gatunek ma etykietę respektują:

    Przeglądanie gatunków przy użyciu elementów oznaczona gwiazdkami

    Przeglądanie gatunków przy użyciu elementów oznaczona gwiazdkami

Ćwiczenie 7: kolano wokół ASP.NET MVC 4 nowy szablon

W tym ćwiczeniu zapoznajesz ulepszenia w szablonach projektów ASP.NET MVC 4, biorąc pod uwagę najbardziej odpowiednie funkcje nowego szablonu.

Zadanie 1. Eksplorowanie szablonu aplikacji internetowej ASP.NET MVC 4

  1. Jeśli nie jest jeszcze otwarty, uruchom vs Express for Web

  2. Wybierz plik | Nowy | Polecenie menu projektu. W oknie dialogowym Nowy projekt wybierz wizualizację C#| Szablon sieci Web w okienku po lewej stronie, a następnie wybierz aplikację sieci Web ASP.NET MVC 4. Nazwij projekt MusicStore i zaktualizuj nazwę rozwiązania , aby rozpocząć, a następnie wybierz lokalizację (lub pozostaw wartość domyślną), a następnie kliknij przycisk OK.

    Tworzenie nowego projektu ASP.NET MVC 4

    Tworzenie nowego projektu ASP.NET MVC 4

  3. W oknie dialogowym Nowy projekt ASP.NET MVC 4 wybierz szablon projektu aplikacji internetowej i kliknij przycisk OK. Zwróć uwagę, że można wybrać opcję Razor lub ASPX jako aparat widoku.

    Tworzenie nowej aplikacji internetowej ASP.NET MVC 4

    Tworzenie nowej aplikacji internetowej ASP.NET MVC 4

    Note

    Składnia Razor wprowadzono w ASP.NET MVC 3. Celem jest Minimalizacja liczby znaków i naciśnięć klawiszy wymaganych w pliku, co pozwala na szybkie i płynne przepływność kodowania. Razor wykorzystuje istniejące C#umiejętności języka/vb (lub inne) i dostarcza składnię znaczników szablonów, która umożliwia tworzenie doskonałych przepływów pracy konstrukcyjnych html.

  4. Naciśnij klawisz F5 , aby uruchomić rozwiązanie i zapoznać się z odnowionym szablonem. Można wyewidencjonować następujące funkcje:

    1. Szablony w stylu Modern

      Szablony zostały odnowione, co zapewnia bardziej nowoczesny wygląd stylów.

      Szablony z ASP.NET MVC 4

      Szablony z ASP.NET MVC 4

    2. Renderowanie adaptacyjne

      Sprawdź zmianę rozmiaru okna przeglądarki i zwróć uwagę na to, jak układ strony dynamicznie dostosowuje się do nowego rozmiaru okna. Te szablony wykorzystują technikę renderowania adaptacyjnego do prawidłowego renderowania na platformach stacjonarnych i mobilnych bez żadnego dostosowania.

      Szablon projektu ASP.NET MVC 4 w różnych rozmiarach przeglądarki

      Szablon projektu ASP.NET MVC 4 w różnych rozmiarach przeglądarki

  5. Zamknij przeglądarkę, aby zatrzymać debuger i wrócić do programu Visual Studio.

  6. Teraz możesz eksplorować rozwiązanie i zapoznać się z kilkoma nowymi funkcjami wprowadzonymi przez ASP.NET MVC 4 w szablonie projektu.

    ASP.NET MVC4 — Internet-aplikacja-projekt-szablon

    Szablon projektu aplikacji internetowej ASP.NET MVC 4

    1. Znaczniki HTML5

      Przeglądaj widoki szablonów, aby dowiedzieć się więcej o nowym znaczniku motywu, np. Otwórz widok about. cshtml w folderze głównym .

      Nowy szablon, używanie języka Razor i znaczników HTML5

      Nowy szablon, używanie języka Razor i znaczników HTML5

    2. Uwzględnione biblioteki JavaScript

      1. jQuery: jQuery upraszcza przechodzenie do dokumentów HTML, obsługę zdarzeń, animowanie i interakcje AJAX.

      2. interfejs użytkownika jQuery: Ta biblioteka zawiera abstrakcje dla interakcji i animacji niskiego poziomu, zaawansowanych efektów i elementów widget z motywem, utworzonych na podstawie biblioteki jQuery JavaScript.

        Note

        Informacje na temat interfejsu użytkownika jQuery i jQuery można znaleźć w [http://docs.jquery.com/](http://docs.jquery.com/).

      3. KnockoutJS: szablon domyślny ASP.NET MVC 4 zawiera teraz KNOCKOUTJS, środowisko MVVM języka JavaScript, które umożliwia tworzenie rozbudowanych i wysoce reagujących aplikacji sieci Web przy użyciu języków JavaScript i HTML. Podobnie jak w przypadku bibliotek interfejsu użytkownika ASP.NET MVC 3, jQuery i jQuery są również dołączone do ASP.NET MVC 4.

        Note

        Więcej informacji na temat biblioteki KnockOutJS można znaleźć w tym łączu: http://learn.knockoutjs.com/.

      4. Modernizacja: Ta biblioteka działa automatycznie, dzięki czemu witryna jest zgodna ze starszymi przeglądarkami w przypadku korzystania z technologii HTML5 i CSS3.

        Note

        W tym łączu można uzyskać więcej informacji na temat biblioteki programu modernizacji: http://www.modernizr.com/.

    3. SimpleMembership dołączone do rozwiązania

      SimpleMembership został zaprojektowany jako zamiennik dla poprzedniej roli ASP.NET i systemu dostawcy członkostwa. Ma wiele nowych funkcji, które ułatwiają deweloperom Zabezpieczanie stron sieci Web w bardziej elastyczny sposób.

      Szablon internetowy już skonfigurował kilka rzeczy do integracji SimpleMembership, na przykład elementu AccountController jest przygotowana do korzystania z OAuthWebSecurity (w przypadku rejestracji, logowania, zarządzania itp.) i zabezpieczeń sieci Web.

      SimpleMembership dołączone do rozwiązania

      SimpleMembership dołączone do rozwiązania

      Note

      Więcej informacji na temat OAuthWebSecurity w witrynie MSDN.

Note

Ponadto tę aplikację można wdrożyć w witrynach sieci Web systemu Windows Azure, które zostały opisane w dodatku B: publikowanie aplikacji ASP.NET MVC 4 przy użyciu Web Deploy.


Podsumowanie

Wypełniając to praktyczne laboratorium, uczysz się podstaw ASP.NET MVC:

  • Podstawowe elementy aplikacji MVC oraz sposób ich działania
  • Jak utworzyć aplikację ASP.NET MVC
  • Jak dodać i skonfigurować kontrolery do obsługi parametrów przesyłanych za pomocą adresu URL i ciągu QueryString
  • Jak dodać stronę wzorcową układu, aby skonfigurować szablon dla typowej zawartości HTML, arkusz stylów, aby wzbogacić wygląd i działanie oraz szablon widoku w celu wyświetlenia zawartości HTML
  • Jak użyć wzorca ViewModel do przekazywania właściwości do szablonu widoku, aby wyświetlić informacje dynamiczne
  • Jak używać parametrów przesyłanych do kontrolerów w szablonie widoku
  • Jak dodać linki do stron wewnątrz aplikacji ASP.NET MVC
  • Jak dodać właściwości dynamiczne i używać ich w widoku
  • Ulepszenia w szablonach projektów ASP.NET MVC 4

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: publikowanie aplikacji ASP.NET MVC 4 przy użyciu Web Deploy

W tym dodatku pokazano, jak utworzyć nową witrynę sieci Web na podstawie portal zarządzania systemu Windows Azure i opublikować aplikację uzyskaną w wyniku działania laboratorium, korzystając z funkcji publikowania Web Deploy dostępnej w systemie Windows Azure.

Zadanie 1 — Tworzenie nowej witryny sieci Web z poziomu portalu systemu Windows Azure

  1. Przejdź do Portal zarządzania systemu Windows Azure i zaloguj się przy użyciu poświadczeń firmy Microsoft skojarzonych z Twoją subskrypcją.

    Note

    System Windows Azure umożliwia bezpłatne hostowanie witryn sieci Web 10 ASP.NET, a następnie skalowanie ich w miarę wzrostu ruchu. Możesz utworzyć konto w tym miejscu.

    Zaloguj się do systemu Windows Azure Portal

    Zaloguj się do usługi Windows Azure portal zarządzania

  2. Na pasku poleceń kliknij pozycję Nowy .

    Tworzenie nowej witryny sieci Web

    Tworzenie nowej witryny sieci Web

  3. Kliknij pozycję obliczeniowe | witrynie sieci Web. Następnie wybierz opcję szybkie tworzenie . Podaj dostępny adres URL dla nowej witryny sieci Web i kliknij pozycję Utwórz witrynę sieci Web.

    Note

    Witryna sieci Web systemu Windows Azure jest hostem aplikacji sieci Web działającej w chmurze, którą można kontrolować i zarządzać nią. Opcja szybkie tworzenie umożliwia wdrożenie ukończonej aplikacji sieci Web w witrynie sieci Web systemu Windows Azure spoza portalu. Nie obejmuje to kroków związanych z konfigurowaniem bazy danych.

    Tworzenie nowej witryny sieci Web przy użyciu funkcji szybkiego tworzenia

    Tworzenie nowej witryny sieci Web przy użyciu funkcji szybkiego tworzenia

  4. Poczekaj na utworzenie nowej witryny sieci Web .

  5. Po utworzeniu witryny sieci Web kliknij link pod kolumną adres URL . Sprawdź, czy nowa witryna sieci Web działa.

    Przeglądanie w nowej witrynie sieci Web

    Przeglądanie w nowej witrynie sieci Web

    Uruchomiona witryna sieci Web

    Uruchomiona witryna sieci Web

  6. Wróć do portalu i kliknij nazwę witryny sieci Web pod kolumną Nazwa , aby wyświetlić strony zarządzania.

    Otwieranie stron zarządzania witryną sieci Web

    Otwieranie stron zarządzania witryną sieci Web

  7. Na stronie pulpit nawigacyjny w sekcji szybki przegląd kliknij link Pobierz profil publikowania .

    Note

    Profil publikowania zawiera wszystkie informacje wymagane do opublikowania aplikacji sieci Web w witrynie sieci Web systemu Windows Azure dla każdej z włączonych metod publikacji. Profil publikowania zawiera adresy URL, poświadczenia użytkownika i ciągi bazy danych wymagane do nawiązania połączenia i uwierzytelniania dla każdego punktu końcowego, dla którego jest włączona metoda publikacji. Program Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web i Microsoft Visual Studio 2012 obsługują odczytywanie profilów publikowania w celu zautomatyzowania konfiguracji tych programów do publikowania aplikacji sieci Web w usłudze Microsoft Azure Websites.

    Pobieranie profilu publikowania witryny sieci Web

    Pobieranie profilu publikowania witryny sieci Web

  8. Pobierz plik profilu publikowania do znanej lokalizacji. W tym ćwiczeniu zobaczysz, jak używać tego pliku do publikowania aplikacji sieci Web w witrynach sieci Web systemu Windows Azure z programu Visual Studio.

    Zapisywanie pliku profilu publikowania

    Zapisywanie pliku profilu publikowania

Zadanie 2 — Konfigurowanie serwera bazy danych

Jeśli aplikacja korzysta z baz danych SQL Server, należy utworzyć SQL Database serwer. Jeśli chcesz wdrożyć prostą aplikację, która nie używa SQL Server można pominąć to zadanie.

  1. Do przechowywania bazy danych aplikacji potrzebny jest serwer SQL Database. Serwery SQL Database z subskrypcji można wyświetlić w portalu zarządzania systemu Windows Azure w obszarze bazy danych SQL | serwery | pulpitu nawigacyjnego serwera. Jeśli nie masz utworzonego serwera, możesz go utworzyć przy użyciu przycisku Dodaj na pasku poleceń. Zanotuj nazwę serwera i adres URL, nazwę logowania administratora i hasło, ponieważ zostaną one użyte w następnych zadaniach. Nie Twórz jeszcze bazy danych, ponieważ zostanie ona utworzona na późniejszym etapie.

    Pulpit nawigacyjny serwera SQL Database

    Pulpit nawigacyjny serwera SQL Database

  2. W następnym zadaniu zostanie przetestowane połączenie z bazą danych z programu Visual Studio. z tego powodu należy uwzględnić lokalny adres IP na liście dozwolonych adresów IPserwera. W tym celu kliknij pozycję Konfiguruj, wybierz adres IP z bieżącego adresu IP klienta i wklej go w polach tekstowych początkowy adres IP i końcowy adres IP , a następnie kliknij przycisk Dodaj-Client-IP-Address-OK-Button.

    Dodawanie adresu IP klienta

    Dodawanie adresu IP klienta

  3. Po dodaniu adresu IP klienta do listy dozwolone adresy IP kliknij pozycję Zapisz , aby potwierdzić zmiany.

    Potwierdź zmiany

    Potwierdź zmiany

Zadanie 3 — publikowanie aplikacji ASP.NET MVC 4 przy użyciu Web Deploy

  1. Wróć do rozwiązania ASP.NET MVC 4. W Eksplorator rozwiązańkliknij prawym przyciskiem myszy projekt witryny sieci Web i wybierz polecenie Publikuj.

    Publikowanie aplikacji

    Publikowanie witryny sieci Web

  2. Zaimportuj profil publikowania zapisany w pierwszym zadaniu.

    Importowanie profilu publikowania

    Importowanie profilu publikowania

  3. Kliknij pozycję Weryfikuj połączenie. Po zakończeniu walidacji kliknij przycisk dalej.

    Note

    Walidacja jest ukończona po wyświetleniu zielonego znacznika wyboru obok przycisku Weryfikuj połączenie.

    Weryfikowanie połączenia

    Weryfikowanie połączenia

  4. Na stronie Ustawienia w sekcji bazy danych kliknij przycisk obok pola tekstowego połączenie z bazą danych (np. DefaultConnection).

    Konfiguracja narzędzia Web Deploy

    Konfiguracja narzędzia Web Deploy

  5. Skonfiguruj połączenie z bazą danych w następujący sposób:

    • W polu Nazwa serwera wpisz adres URL serwera SQL Database przy użyciu prefiksu TCP: .

    • W polu Nazwa użytkownika wpisz nazwę logowania administratora serwera.

    • W polu hasło wpisz hasło logowania administratora serwera.

    • Wpisz nową nazwę bazy danych, na przykład: MVC4SampleDB.

      Konfigurowanie parametrów połączenia docelowego

      Konfigurowanie parametrów połączenia docelowego

  6. Następnie kliknij przycisk OK. Po wyświetleniu monitu o utworzenie bazy danych kliknij przycisk tak.

    Tworzenie bazy danych

    Tworzenie bazy danych

  7. Parametry połączenia, które będą używane do nawiązywania połączenia z SQL Database w systemie Windows Azure, są wyświetlane w domyślnym polu tekstowym połączenie. Następnie kliknij przycisk Next (Dalej).

    Parametry połączenia wskazujące SQL Database

    Parametry połączenia wskazujące SQL Database

  8. Na stronie Podgląd kliknij przycisk Publikuj.

    Publikowanie aplikacji sieci Web

    Publikowanie aplikacji sieci Web

  9. Po zakończeniu procesu publikowania w domyślnej przeglądarce zostanie otwarta opublikowana witryna sieci Web.

    Aplikacja opublikowana w systemie Windows Azure

    Aplikacja opublikowana w systemie Windows Azure

Dodatek C: 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