ASP.NET MVC 4 — podstawy

Pobierz zestaw szkoleniowy obozów internetowych

To laboratorium praktyczne opiera się na sklepie muzycznym MVC (model View Controller), aplikacji samouczka, która wprowadza i wyjaśnia krok po kroku, jak używać ASP.NET MVC i Visual Studio. W całym laboratorium poznasz prostotę, ale możliwości korzystania z tych technologii razem. Zaczniesz od prostej aplikacji i skompilujesz ją, dopóki nie będziesz mieć w pełni funkcjonalnej ASP.NET aplikacji internetowej MVC 4.

To laboratorium współpracuje z ASP.NET MVC 4.

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

W tym praktycznym laboratorium założono, że deweloper ma doświadczenie w zakresie technologii tworzenia aplikacji internetowych, takich jak HTML i JavaScript.

Uwaga

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

Aplikacja sklepu Music Store

Aplikacja internetowa sklepu Music Store, która zostanie zbudowana w ramach tego laboratorium, obejmuje trzy główne części: zakupy, kasy i administrację. Odwiedzający będą mogli przeglądać albumy według gatunku, dodawać albumy do koszyka, przeglądać ich wybór, a na koniec przejść do wyewidencjonowania, aby zalogować się i zakończyć zamówienie. Ponadto administratorzy sklepów będą mogli zarządzać dostępnymi albumami, a także ich głównymi właściwościami.

Ekrany sklepu Muzycznego

Ekrany sklepu Muzycznego

ASP.NET podstawy MVC 4

Aplikacja ze sklepu Music Store zostanie skompilowana przy użyciu kontrolera widoku modelu (MVC) — wzorca architektury, który oddziela aplikację na trzy główne składniki:

Modele: obiekty modelu to części aplikacji, które implementują logikę domeny. Często obiekty modelu pobierają i przechowują stan modelu w bazie danych.
Widoki: widoki to składniki, które wyświetlają interfejs użytkownika aplikacji. Zazwyczaj ten interfejs użytkownika jest tworzony na podstawie danych modelu. Przykładem może być widok edycji albumów, który wyświetla pola tekstowe i listę rozwijaną na podstawie bieżącego stanu obiektu Album.
Kontrolery: kontrolery to składniki, które obsługują interakcję użytkownika, manipulują modelem, a ostatecznie wybierają widok do renderowania interfejsu użytkownika. W aplikacji MVC widok wyświetla tylko informacje; kontroler obsługuje dane wejściowe i interakcje użytkownika oraz reaguje na nie.

Wzorzec MVC ułatwia tworzenie aplikacji, które oddzielają różne aspekty aplikacji (logikę wejściową, logikę biznesową i logikę interfejsu użytkownika), zapewniając jednocześnie luźne sprzężenie między tymi elementami. Ta separacja ułatwia zarządzanie złożonością podczas tworzenia aplikacji, ponieważ pozwala skupić się na jednym aspekcie implementacji naraz. Ponadto wzorzec MVC ułatwia testowanie aplikacji, a także zachęcanie do korzystania z programowania opartego na testach (TDD) do tworzenia aplikacji.

Struktura ASP.NET MVC stanowi alternatywę dla wzorca ASP.NET Web Forms do tworzenia aplikacji internetowych opartych na ASP.NET MVC. Struktura ASP.NET MVC to uproszczona, wysoce testowalna struktura prezentacji, która (podobnie jak w przypadku aplikacji opartych na formularzach internetowych) jest zintegrowana z istniejącymi funkcjami ASP.NET, takimi jak strony wzorcowe i uwierzytelnianie oparte na członkostwie, dzięki czemu uzyskasz wszystkie możliwości podstawowego środowiska .NET Framework. Jest to przydatne, jeśli znasz już ASP.NET web forms, ponieważ wszystkie używane biblioteki są również dostępne w ASP.NET MVC 4.

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

Cele

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

Tworzenie aplikacji ASP.NET MVC od podstaw na podstawie samouczka dotyczącego aplikacji ze sklepu Music Store
Dodawanie kontrolerów do obsługi adresów URL na stronie głównej witryny i przeglądania jej głównych funkcji
Dodawanie widoku w celu dostosowania wyświetlanej zawartości wraz z jej stylem
Dodawanie klas modelu do przechowywania danych i logiki domeny oraz zarządzania nimi
Przekazywanie informacji z akcji kontrolera do szablonów widoków za pomocą wzorca wyświetleń modelu
Zapoznaj się z nowym szablonem ASP.NET MVC 4 dla aplikacji internetowych

Wymagania wstępne

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

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

Ustawienia

Instalowanie fragmentów kodu

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

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

Ćwiczenia

To praktyczne laboratorium składa się z następujących ćwiczeń:

Ćwiczenie 1. Tworzenie projektu aplikacji internetowej MVC ASP.NET MusicStore
Ćwiczenie 2. Tworzenie kontrolera
Ćwiczenie 3. Przekazywanie parametrów do kontrolera
Ćwiczenie 4. Tworzenie widoku
Ćwiczenie 5. Tworzenie modelu widoku
Ćwiczenie 6. Używanie parametrów w widoku
Ćwiczenie 7. Okrążenie wokół ASP.NET MVC 4 Nowy szablon

Uwaga

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

Szacowany czas ukończenia tego laboratorium: 60 minut.

Ćwiczenie 1. Tworzenie projektu aplikacji internetowej MVC ASP.NET MusicStore

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

Zadanie 1 — tworzenie projektu aplikacji internetowej ASP.NET MVC

W tym zadaniu utworzysz pusty projekt aplikacji MVC ASP.NET przy użyciu szablonu MVC programu Visual Studio. Uruchom program VS Express dla sieci Web.
W menu Plik kliknij pozycję Nowy projekt.
W oknie dialogowym Nowy projekt wybierz typ projektu aplikacji internetowej ASP.NET MVC 4 znajdujący się w obszarze Visual C#, lista szablonów sieci Web.
Zmień nazwę na MvcMusicStore.
Ustaw lokalizację rozwiązania w nowym folderze Begin w folderze Źródłowy tego ćwiczenia, na przykład [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin. Kliknij przycisk OK.

Okno dialogowe Tworzenie nowego projektu
W oknie dialogowym Nowy projekt MVC 4 ASP.NET wybierz szablon Podstawowy i upewnij się, że wybrany aparat Widok to Razor. Kliknij przycisk OK.

Okno dialogowe Nowy projekt MVC 4 ASP.NET

Zadanie 2 — Eksplorowanie struktury rozwiązania

Struktura ASP.NET MVC zawiera szablon projektu programu Visual Studio, który ułatwia tworzenie aplikacji internetowych obsługujących wzorzec MVC. Ten szablon tworzy nową aplikację internetową MVC ASP.NET z wymaganymi folderami, szablonami elementów i wpisami pliku konfiguracji.

W tym zadaniu przeanalizujesz strukturę rozwiązania, aby zrozumieć elementy, które są zaangażowane i ich relacje. Następujące foldery są uwzględniane we wszystkich ASP.NET aplikacji MVC, ponieważ domyślnie platforma ASP.NET MVC używa podejścia "konwencja za pośrednictwem konfiguracji" i wprowadza pewne domyślne założenia na podstawie konwencji nazewnictwa folderów.

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

ASP.NET struktura folderów MVC w Eksplorator rozwiązań
1. Kontrolery. Ten folder będzie zawierać klasy kontrolera. W aplikacji opartej na mvC kontrolery są odpowiedzialne za obsługę interakcji użytkownika końcowego, manipulowanie modelem i ostatecznie wybranie widoku do renderowania interfejsu użytkownika.
  
  Uwaga
  
  Struktura MVC wymaga, aby nazwy wszystkich kontrolerów zakończyły się ciągiem "Controller", na przykład HomeController, LoginController lub ProductController.
2. Modele. Ten folder jest udostępniany dla klas reprezentujących model aplikacji dla aplikacji internetowej MVC. Zwykle obejmuje to kod, który definiuje obiekty i logikę interakcji z magazynem danych. Zazwyczaj rzeczywiste obiekty modelu będą znajdować się w oddzielnych bibliotekach klas. Jednak podczas tworzenia nowej aplikacji można uwzględnić klasy, a następnie przenieść je do oddzielnych bibliotek klas w późniejszym momencie w cyklu programowania.
3. Wyświetlenia. 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, a także innych plików związanych z widokami renderowania. Folder Views zawiera folder dla każdego kontrolera; folder ma nazwę z prefiksem nazwy kontrolera. Jeśli na przykład masz kontroler o nazwie HomeController, folder Views będzie zawierać folder o nazwie Strona główna. Domyślnie, gdy platforma ASP.NET MVC ładuje widok, szuka pliku .aspx z żądaną nazwą widoku w folderze Views\controllerName (Views[ControllerName][Action].aspx) lub (Views[ControllerName][Action].cshtml) dla widoków Razor.
  
  Uwaga
  
  Oprócz folderów wymienionych wcześniej aplikacja internetowa MVC używa pliku Global.asax do ustawiania wartości domyślnych routingu globalnego adresu URL i używa pliku Web.config do skonfigurowania aplikacji.

Zadanie 3 — dodawanie elementu HomeController

W ASP.NET aplikacjach, które nie korzystają z platformy MVC, interakcja użytkownika jest zorganizowana wokół stron i wokół podnoszenia i obsługi zdarzeń z tych stron. Z kolei interakcja użytkownika z aplikacjami ASP.NET MVC jest zorganizowana wokół kontrolerów i ich metod akcji.

Z drugiej strony platforma ASP.NET MVC mapuje adresy URL na klasy, które są określane jako kontrolery. Kontrolery przetwarzają żądania przychodzące, obsługują dane wejściowe i interakcje użytkownika, wykonują odpowiednią logikę aplikacji i określają odpowiedź, aby wysłać z powrotem do klienta (wyświetlać kod HTML, pobierać plik, przekierowywać do innego adresu URL itp.). W przypadku wyświetlania kodu HTML klasa kontrolera zwykle wywołuje oddzielny składnik widoku w celu wygenerowania znaczników HTML dla żądania. W aplikacji MVC widok wyświetla tylko informacje; kontroler obsługuje dane wejściowe i interakcje użytkownika oraz reaguje na nie.

W tym zadaniu dodasz klasę Kontroler, która będzie obsługiwać adresy URL na stronie głównej witryny Sklepu Muzycznego.

Kliknij prawym przyciskiem myszy folder Controllers w Eksplorator rozwiązań, wybierz polecenie Dodaj, a następnie polecenie Kontroler:

Polecenie Dodaj kontroler
Zostanie wyświetlone okno dialogowe Dodawanie kontrolera . Nadaj kontrolerowi nazwę HomeController i naciśnij przycisk Dodaj.

Okno dialogowe Dodawanie kontrolera
Plik HomeController.cs jest tworzony w folderze Controllers . Aby funkcja HomeController zwróciła ciąg w akcji Indeks, zastąp metodę Index następującym kodem:

(Fragment kodu — ASP.NET podstawy MVC 4 — Indeks Ex1 HomeController)
```
public string Index()
{
    return "Hello from Home";
}
```

Zadanie 4 . Uruchamianie aplikacji

W tym zadaniu wypróbujesz aplikację w przeglądarce internetowej.

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

Aplikacja uruchomiona w przeglądarce internetowej

Uwaga

Lokalny serwer sieci Web usług IIS uruchomi witrynę internetową na losowym numerze bezpłatnego portu. Na powyższej ilustracji witryna działa pod adresem http://localhost:50103/, więc używa portu 50103. Numer portu może się różnić.
Zamknij okno przeglądarki.

Ćwiczenie 2. Tworzenie kontrolera

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

Strona listy gatunków muzycznych w Sklepie Muzycznym
Strona przeglądania zawierająca listę wszystkich albumów muzycznych dla określonego gatunku
Strona szczegółów przedstawiająca informacje o określonym albumie muzycznym

W przypadku zakresu tego ćwiczenia te akcje będą po prostu zwracać ciąg do tej pory.

Zadanie 1 — dodawanie nowej klasy StoreController

W tym zadaniu dodasz nowy kontroler.

Jeśli jeszcze nie jest otwarty, uruchom program VS Express dla sieci Web 2012.
W menu Plik wybierz pozycję Otwórz projekt. W oknie dialogowym Otwieranie projektu przejdź do pozycji Source\Ex02-CreatingAController\Begin, wybierz pozycję Begin.sln i kliknij przycisk Otwórz. Alternatywnie możesz kontynuować korzystanie z rozwiązania uzyskanego po ukończeniu poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Dodaj nowy kontroler. W tym celu kliknij prawym przyciskiem myszy folder Controllers w Eksplorator rozwiązań, wybierz polecenie Dodaj, a następnie polecenie Kontroler. Zmień nazwę kontrolera na StoreController, a następnie kliknij przycisk Dodaj.

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.

Klasa StoreController ma już metodę Index . Użyjesz go później w tym laboratorium, aby zaimplementować stronę zawierającą listę wszystkich gatunków sklepu muzycznego. Na razie zastąp metodę Index następującym kodem, który zwraca ciąg "Hello from Store.Index()":

(Fragment kodu — ASP.NET podstawy MVC 4 — Indeks Ex2 StoreController)
```
public string Index()
{
  return "Hello from Store.Index()";
}
```
Dodaj metody Przeglądaj i Szczegóły . W tym celu dodaj następujący kod do kontrolki StoreController:

(Fragment kodu — ASP.NET podstawy MVC 4 — 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

W tym zadaniu wypróbujesz aplikację w przeglądarce internetowej.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL, aby zweryfikować implementację każdej akcji.
1. /Store. Zostanie wyświetlony komunikat "Hello from Store.Index()".
2. /Store/Browse. Zostanie wyświetlony komunikat "Hello from Store.Browse()".
3. /Store/Details. Zostanie wyświetlony komunikat "Hello from Store.Details()".
  
  Przeglądanie /Store/Browse
Zamknij okno przeglądarki.

Ćwiczenie 3. Przekazywanie parametrów do kontrolera

Do tej pory zwracano stałe ciągi z kontrolerów. W tym ćwiczeniu dowiesz się, jak przekazać parametry do kontrolera przy użyciu adresu URL i ciągu zapytania, a następnie akcji metody odpowiadać tekstem w przeglądarce.

Zadanie 1 — dodawanie parametru gatunku do storeController

W tym zadaniu użyjesz ciągu zapytania, aby wysłać parametry do metody akcji Browse w StoreController.

Jeśli jeszcze nie jest otwarty, uruchom program VS Express dla sieci Web.
W menu Plik wybierz pozycję Otwórz projekt. W oknie dialogowym Otwieranie projektu przejdź do pozycji Source\Ex03-PassingParametersToAController\Begin, wybierz pozycję Begin.sln i kliknij przycisk Otwórz. Alternatywnie możesz kontynuować korzystanie z rozwiązania uzyskanego po ukończeniu poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Otwórz klasę StoreController . W tym celu w Eksplorator rozwiązań rozwiń folder Controllers i kliknij dwukrotnie StoreController.cs.
Zmień metodę Browse , dodając parametr ciągu, aby zażądać określonego gatunku. ASP.NET MVC automatycznie przekaże wszystkie parametry ciągu zapytania lub wpisu formularza o nazwie gatunek do tej metody akcji po wywołaniu. W tym celu zastąp metodę Browse następującym kodem:

(Fragment kodu — ASP.NET podstawy MVC 4 — Ex3 StoreController BrowseMethod)
```
// GET: /Store/Browse?genre=Disco   
public string Browse(string genre)
{
  string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);

  return message;
}
```

Uwaga

Używasz metody narzędzia HttpUtility.HtmlEncode , aby uniemożliwić użytkownikom wstrzykiwanie kodu JavaScript do widoku za pomocą linku takiego jak /Store/Browse? Gatunek=<okno skryptu.location>='http://hackersite.com'</script>.

Aby uzyskać więcej wyjaśnień, odwiedź ten artykuł msdn.

Zadanie 2 — uruchamianie aplikacji

W tym zadaniu wypróbujesz aplikację w przeglądarce internetowej i użyjesz parametru gatunku.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Czy zmienić adres URL na /Store/Browse? Gatunek =Disco , aby sprawdzić, czy akcja odbiera parametr gatunku.

Przeglądanie /Store/Browse? Gatunek = Dyskoteka
Zamknij okno przeglądarki.

Zadanie 3 — dodawanie parametru id osadzonego w adresie URL

W tym zadaniu użyjesz adresu URL, aby przekazać parametr Id do metody akcji Details storeController. ASP.NET domyślną konwencją routingu MVC jest 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 magazynie adresów URL/szczegóły/5 identyfikator zostanie zinterpretowany jako 5.

Zmień metodę Details storeController, dodając parametr int o nazwie id. W tym celu zastąp metodę Details następującym kodem:

(Fragment kodu — ASP.NET podstawy MVC 4 — Ex3 StoreController DetailsMethod)
```
// GET: /Store/Details/5    
public string Details(int id)
{
  string message = "Store.Details, ID = " + id;

  return message;
}
```

Zadanie 4 . Uruchamianie aplikacji

W tym zadaniu wypróbujesz aplikację w przeglądarce internetowej i użyjesz parametru Id .

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /Store/Details/5 , aby sprawdzić, czy akcja odbiera parametr id.

Przeglądanie /Store/Details/5

Ćwiczenie 4. Tworzenie widoku

Do tej pory zwracano ciągi z akcji kontrolera. Chociaż jest to przydatny sposób zrozumienia sposobu działania kontrolerów, nie jest to sposób tworzenia rzeczywistych aplikacji internetowych. 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 w celu skonfigurowania szablonu dla wspólnej zawartości HTML, arkusza StyleSheet w celu ulepszenia wyglądu i działania witryny, a na koniec szablonu Widok w celu umożliwienia funkcji HomeController zwracania kodu HTML.

Zadanie 1 . Modyfikowanie pliku _layout.cshtml

Plik ~/Views/Shared/_layout.cshtml umożliwia skonfigurowanie szablonu wspólnego kodu HTML do użycia w całej witrynie internetowej. W tym zadaniu dodasz stronę wzorcową układu ze wspólnym nagłówkiem z linkami do strony głównej i obszaru Sklep.

Jeśli jeszcze nie jest otwarty, uruchom program VS Express dla sieci Web.
W menu Plik wybierz pozycję Otwórz projekt. W oknie dialogowym Otwieranie projektu przejdź do pozycji Source\Ex04-CreatingAView\Begin, wybierz pozycję Begin.sln i kliknij przycisk Otwórz. Alternatywnie możesz kontynuować korzystanie z rozwiązania uzyskanego po ukończeniu poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.

Plik _layout.cshtml zawiera układ kontenera HTML dla wszystkich stron w witrynie. Zawiera on element HTML> odpowiedzi HTML, a także <elementy głowy> i< treści>.< @RenderBody() w treści HTML identyfikują regiony, w których będą dostępne szablony wyświetlania zawartości dynamicznej. (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>

Dodaj wspólny nagłówek z linkami do strony głównej i obszaru Sklep na wszystkich stronach w witrynie. Aby to zrobić, dodaj następujący kod poniżej <instrukcji body> . (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>

Dołącz element div do renderowania sekcji treści każdej strony. Zastąp @RenderBody() następującym wyróżnionym kodem: (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>

Uwaga

Czy wiesz, że? Program Visual Studio 2012 zawiera fragmenty kodu, które ułatwiają dodawanie często używanego kodu w kodzie HTML, plikach kodu i nie tylko! Wypróbuj tę akcję, wpisując <div> i naciskając TAB dwa razy, aby wstawić kompletny tag div .

Zadanie 2 . Dodawanie arkusza stylów CSS

Pusty szablon projektu zawiera bardzo usprawniony plik CSS, który zawiera tylko style używane do wyświetlania podstawowych formularzy i komunikatów walidacji. Użyjesz dodatkowych arkuszy CSS i obrazów (potencjalnie dostarczonych przez projektanta), aby ulepszyć wygląd i działanie witryny.

W tym zadaniu dodasz arkusz stylów CSS, aby zdefiniować style witryny.

Plik CSS i obrazy znajdują się w folderze Source\Assets\Content tego laboratorium. Aby dodać je do aplikacji, przeciągnij zawartość z okna Eksploratora Windows do Eksplorator rozwiązań w programie Visual Studio Express for Web, jak pokazano poniżej:

Przeciąganie zawartości stylu
Zostanie wyświetlone okno dialogowe ostrzeżenia 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 i kliknij przycisk Tak.

Zadanie 3 — dodawanie szablonu widoku

W tym zadaniu dodasz szablon Widok, aby wygenerować odpowiedź HTML, która będzie używać strony wzorcowej układu i arkuszy CSS dodanych w tym ćwiczeniu.

Aby użyć szablonu Widok podczas przeglądania strony głównej witryny, należy najpierw wskazać, że zamiast zwracać ciąg, metoda Indeks HomeController zwróci widok. Otwórz klasę HomeController i zmień jej metodę Index, aby zwrócić element ActionResult i zwrócić widok().

(Fragment kodu — ASP.NET podstawy MVC 4 — Indeks Ex4 HomeController)
```
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return this.View();
    }
}
```
Teraz musisz dodać odpowiedni szablon Widok. Aby to zrobić, kliknij prawym przyciskiem myszy wewnątrz metody akcji Indeks i wybierz polecenie Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku .

Dodawanie widoku z poziomu metody Index
Zostanie wyświetlone okno dialogowe Dodawanie widoku w celu wygenerowania pliku szablonu Widok. Domyślnie to okno dialogowe wstępnie wypełnia nazwę szablonu Widok, tak aby pasował do metody akcji, która będzie jej używać. Ponieważ użyto menu kontekstowego Dodaj widok w metodzie akcji Indeks w kontrolerze HomeController, okno dialogowe Dodawanie widoku ma indeks jako domyślną nazwę widoku. Kliknij przycisk Dodaj.

Okno dialogowe Dodawanie widoku
Program Visual Studio generuje szablon widoku Index.cshtml wewnątrz folderu Views\Home , a następnie otwiera go.

Utworzony widok indeksu głównego

Uwaga

nazwa i lokalizacja pliku Index.cshtml jest odpowiednia i jest zgodna z domyślną konwencją nazewnictwa MVC ASP.NET.

Folder \Views*Home* pasuje do nazwy kontrolera (Home Controller). Nazwa szablonu widoku (indeks) odpowiada metodzie akcji kontrolera, która będzie wyświetlać widok.

W ten sposób ASP.NET MVC nie trzeba jawnie określać nazwy lub lokalizacji szablonu widoku podczas używania tej konwencji nazewnictwa w celu zwrócenia widoku.
Wygenerowany szablon Widok jest oparty na wcześniej zdefiniowanym szablonie _layout.cshtml . Zaktualizuj właściwość ViewBag.Title na Strona główna i zmień zawartość główną na Ta strona główna, jak pokazano w poniższym kodzie:
```
@{
    ViewBag.Title = "Home";
}

<h2>This is the Home Page</h2>
```
Wybierz projekt MvcMusicStore w Eksplorator rozwiązań i naciśnij F5, aby uruchomić aplikację.

Zadanie 4. Weryfikacja

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

Po otwarciu aplikacji w przeglądarce należy pamiętać, że:

Metoda akcji Indeks elementu HomeController została znaleziona i wyświetlona szablon \Views\Home\Index.cshtml View, mimo że kod o nazwie return View(), ponieważ szablon Widok był zgodnie ze standardową konwencją nazewnictwa.
Strona główna wyświetla komunikat powitalny zdefiniowany w szablonie widoku \Views\Home\Index.cshtml .
Strona główna używa szablonu _layout.cshtml , dlatego komunikat powitalny jest zawarty w standardowym układzie HTML witryny.

Widok indeksu głównego przy użyciu zdefiniowanego elementu LayoutPage i stylu

Ćwiczenie 5. Tworzenie modelu widoku

Do tej pory widoki wyświetlały zakodowany na stałe kod HTML, ale w celu utworzenia dynamicznych aplikacji internetowych szablon Widok powinien otrzymywać informacje od kontrolera. Jedną z typowych technik używanych 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. Zaktualizujesz również element StoreController, aby używał utworzonego modelu ViewModel, a na koniec utworzysz nowy szablon Widok, 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 zaimplementuje scenariusz listy gatunku Sklep.

Jeśli jeszcze nie jest otwarty, uruchom program VS Express dla sieci Web.
W menu Plik wybierz pozycję Otwórz projekt. W oknie dialogowym Otwieranie projektu przejdź do pozycji Source\Ex05-CreatingAViewModel\Begin, wybierz pozycję Begin.sln i kliknij przycisk Otwórz. Alternatywnie możesz kontynuować korzystanie z rozwiązania uzyskanego po ukończeniu poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Utwórz folder ViewModels do przechowywania modelu 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
Nadaj folderowi nazwę ViewModels.

Folder ViewModels w Eksplorator rozwiązań
Utwórz klasę ViewModel . W tym celu kliknij prawym przyciskiem myszy niedawno utworzony folder ViewModels, wybierz polecenie Dodaj, a następnie pozycję Nowy element. W obszarze Kod wybierz element Klasa i nadaj plikowi nazwę StoreIndexViewModel.cs, a następnie kliknij przycisk Dodaj.

Dodawanie nowej klasy

Tworzenie klasy StoreIndexViewModel

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

Istnieją dwa parametry, które mają zostać przekazane z StoreController do szablonu View, 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 (liczba całkowita) i Gatunki (lista ciągów).

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

(Fragment kodu — ASP.NET podstawy MVC 4 — właściwości Ex5 StoreIndexViewModel)
```
public class StoreIndexViewModel
{
    public int NumberOfGenres { get; set; }

    public List<string> Genres { get; set; }
}
```

Uwaga

Notacja { get; set; } korzysta z funkcji właściwości zaimplementowanych automatycznie w języku C#. Zapewnia korzyści z nieruchomości bez konieczności deklarowania pola zapasowego.

Zadanie 3 . Aktualizowanie kontrolki StoreController w celu używania modelu StoreIndexViewModel

Klasa StoreIndexViewModel hermetyzuje informacje potrzebne do przekazania z metody Index StoreController do szablonu View w celu wygenerowania odpowiedzi.

W tym zadaniu zaktualizujesz kontrolkę StoreController , aby korzystała z modelu StoreIndexViewModel.

Otwórz klasę StoreController .

Otwieranie klasy StoreController
Aby użyć klasy StoreIndexViewModel z klasy StoreController, dodaj następującą przestrzeń nazw w górnej części kodu StoreController :

(Fragment kodu — ASP.NET podstawy MVC 4 — Ex5 StoreIndexViewModel przy użyciu modelu ViewModel)
```
using MvcMusicStore.ViewModels;
```
Zmień metodę akcji Indeks elementu StoreController, tak aby tworzyła i wypełniała obiekt StoreIndexViewModel, a następnie przekazuje go do szablonu Widok, aby wygenerować odpowiedź HTML.

Uwaga

W laboratorium "ASP.NET modele MVC i dostęp do danych" napiszesz kod, który pobiera listę gatunków sklepów z bazy danych. W poniższym kodzie utworzysz listę fikcyjnych gatunków danych, które wypełnią model StoreIndexViewModel.

Po utworzeniu i skonfigurowaniu obiektu StoreIndexViewModel zostanie on przekazany jako argument do metody View . Oznacza to, że szablon Widok użyje tego obiektu do wygenerowania odpowiedzi HTML.

Zastąp metodę Index następującym kodem:

(Fragment kodu — ASP.NET podstawy MVC 4 — metoda indeksu Ex5 StoreController)

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

Uwaga

Jeśli nie znasz języka C#, możesz założyć, że użycie zmiennej var oznacza, że zmienna viewModel jest ograniczona późno. To nie jest poprawne — kompilator języka C# używa wnioskowania typu w oparciu o to, co przypisujesz do zmiennej, aby określić, że model viewModel jest typu StoreIndexViewModel. Ponadto, kompilując lokalną zmienną viewModel jako typ StoreIndexViewModel, uzyskujesz kontrolę czasu kompilacji i obsługę edytora kodu programu Visual Studio.

Zadanie 4. Tworzenie szablonu widoku korzystającego z modelu StoreIndexViewModel

W tym zadaniu utworzysz szablon Widok, który będzie używał obiektu StoreIndexViewModel przekazanego z kontrolera w celu wyświetlenia listy gatunków.

Przed utworzeniem nowego szablonu Widok skompilujmy projekt, aby okno dialogowe Dodawanie widoku wiedziało o klasie StoreIndexViewModel . Skompiluj projekt, wybierając element menu Kompilacja , a następnie utwórz mvcMusicStore.

Kompilowanie projektu
Utwórz nowy szablon Widok. Aby to zrobić, kliknij prawym przyciskiem myszy wewnątrz metody Index i wybierz polecenie Dodaj widok.

Dodawanie widoku
Ponieważ okno dialogowe Dodawanie widoku zostało wywołane z kontrolki StoreController, domyślnie doda szablon Widok w pliku \Views\Store\Index.cshtml. Zaznacz pole wyboru Utwórz silnie typizowany widok, a następnie wybierz pozycję StoreIndexViewModel jako klasę Model. Upewnij się również, że wybrany aparat Widok to Razor. Kliknij przycisk Dodaj.

Okno dialogowe Dodawanie widoku

Plik szablonu \Views\Store\Index.cshtml View jest tworzony i otwierany. Na podstawie informacji podanych w oknie dialogowym Dodawanie widoku w ostatnim kroku szablon Widok będzie oczekiwać wystąpienia StoreIndexViewModel jako danych używanych do generowania odpowiedzi HTML. Zauważysz, że szablon dziedziczy ViewPage<musicstore.viewmodels.storeindexviewmodel> element w języku C#.

Zadanie 5 . Aktualizowanie szablonu widoku

W tym zadaniu zaktualizujesz szablon Widok utworzony w ostatnim zadaniu, aby pobrać liczbę gatunków i ich nazw na stronie.

Uwaga

Użyjesz składni @ (często określanej jako "nuggets kodu"), aby wykonać kod w szablonie Widok.

W pliku Index.cshtml w folderze Store zastąp jego kod następującym kodem:

@model MvcMusicStore.ViewModels.StoreIndexViewModel

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

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

Utwórz pętlę na liście gatunków w modelu StoreIndexViewModel i utwórz listę html <ul> 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>

Naciśnij F5 , aby uruchomić aplikację i przejrzeć /Store. Zostanie wyświetlona lista gatunków przekazanych w obiekcie StoreIndexViewModel z kontrolki StoreController do szablonu Widok.

Wyświetlanie listy gatunków

Wyświetlanie listy gatunków

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 Widok. W tym celu wprowadzisz najpierw klasy modelu, które pomogą Ci zarządzać danymi i logiką domeny. Ponadto dowiesz się, jak tworzyć linki do stron w aplikacji ASP.NET MVC bez obaw o kodowanie ścieżek URL.

Zadanie 1 — dodawanie klas modeli

W przeciwieństwie do modelu ViewModel, które są tworzone tylko w celu przekazania informacji z kontrolera do widoku, klasy modelu są tworzone tak, aby zawierały dane i logikę domeny oraz zarządzać nimi. W tym zadaniu dodasz dwie klasy modeli, aby reprezentować te pojęcia: Gatunek i Album.

Jeśli jeszcze nie jest otwarty, uruchom program VS Express dla sieci Web
W menu Plik wybierz pozycję Otwórz projekt. W oknie dialogowym Otwieranie projektu przejdź do pozycji Source\Ex06-UsingParametersInView\Begin, wybierz pozycję Begin.sln i kliknij przycisk Otwórz. Alternatywnie możesz kontynuować korzystanie z rozwiązania uzyskanego po ukończeniu poprzedniego ćwiczenia.
1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć, aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.
Dodaj klasę modelu gatunku. W tym celu kliknij prawym przyciskiem myszy folder Models w Eksplorator rozwiązań, wybierz pozycję Dodaj, a następnie opcję Nowy element. W obszarze Kod wybierz element Klasa i nadaj plikowi nazwę Genre.cs, a następnie kliknij przycisk Dodaj.

Dodawanie nowego elementu

Dodaj klasę modelu gatunku

Dodaj właściwość Name do klasy Gatunek. W tym celu dodaj następujący kod:

(Fragment kodu — podstawy ASP.NET MVC 4 — gatunek ex6)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Genre
    {
        public string Name { get; set; }
    }
}

Wykonując tę samą procedurę co poprzednio, dodaj klasę Album . W tym celu kliknij prawym przyciskiem myszy folder Models w Eksplorator rozwiązań, wybierz pozycję Dodaj, a następnie opcję Nowy element. W obszarze Kod wybierz element Klasa i nadaj plikowi nazwę Album.cs, a następnie kliknij przycisk Dodaj.

Dodaj dwie właściwości do klasy Album: Gatunek i Tytuł. W tym celu dodaj następujący kod:

(Fragment kodu - ASP.NET MVC 4 Fundamentals - 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 modelu StoreBrowseViewModel

Model StoreBrowseViewModel będzie używany w tym zadaniu do wyświetlania albumów pasujących do wybranego gatunku. W tym zadaniu utworzysz tę klasę, a następnie dodasz dwie właściwości do obsługi gatunku i listy albumów.

Dodaj klasę StoreBrowseViewModel . W tym celu kliknij prawym przyciskiem myszy folder ViewModels w Eksplorator rozwiązań, wybierz pozycję Dodaj, a następnie opcję Nowy element. W obszarze Kod wybierz element Klasa i nadaj plikowi nazwę StoreBrowseViewModel.cs, a następnie kliknij przycisk Dodaj.

Dodaj odwołanie do klasy Models w klasie StoreBrowseViewModel . W tym celu dodaj następujące przestrzeń nazw:

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcMusicStore.Models;

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
    }
}

Dodaj dwie właściwości do klasy StoreBrowseViewModel : Gatunek i Albumy. W tym celu dodaj następujący kod:

(Fragment kodu — podstawy ASP.NET MVC 4 — 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; }
    }
}

Uwaga

Co to jest album> listy<?: Ta definicja używa typu List<T>, gdzie T ogranicza typ, do którego elementów tej listy należy, w tym przypadku Album (lub dowolny z jego elementów potomnych).

Ta możliwość projektowania klas i metod, które odroczają specyfikację co najmniej jednego typu, dopóki klasa lub metoda nie zostanie zadeklarowana i utworzone przez kod klienta jest funkcją języka C# o nazwie Generics.

Lista<T> jest ogólnym odpowiednikiem typu ArrayList i jest dostępna w przestrzeni nazw System.Collections.Generic . Jedną z zalet używania typów ogólnych jest to, że ponieważ typ jest określony, nie trzeba zajmować się operacjami sprawdzania typów, takimi jak rzutowanie elementów do albumu, jak w przypadku tablicyList.

Zadanie 3 . Korzystanie z modelu New ViewModel w storeController

W tym zadaniu zmodyfikujesz metody akcji Przeglądaj i Szczegóły StoreController, aby użyć nowego modelu StoreBrowseViewModel.

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 — podstawy ASP.NET MVC 4 — Ex6 UsingModelInController)
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.ViewModels;
using MvcMusicStore.Models;
```

Zastąp metodę akcji Browse , aby użyć klasy StoreViewBrowseController . Utworzysz gatunek i dwa nowe obiekty Albumy z fikcyjnymi danymi (w następnym laboratorium praktycznym będziesz korzystać z rzeczywistych danych z bazy danych). W tym celu zastąp metodę Browse następującym kodem:

(Fragment kodu — ASP.NET podstawy MVC 4 — 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);
}

Zastąp metodę akcji Details , aby użyć klasy StoreViewBrowseController . Utworzysz nowy obiekt Album , który ma zostać zwrócony do widoku. W tym celu zastąp metodę Details następującym kodem:

(Fragment kodu — ASP.NET podstawy MVC 4 — 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 dodasz widok przeglądania , aby wyświetlić albumy znalezione dla określonego gatunku.

Przed utworzeniem nowego szablonu Widok należy skompilować projekt, aby okno dialogowe Dodawanie widoku wiedziało o klasie ViewModel do użycia. Skompiluj projekt, wybierając element menu Kompilacja , a następnie utwórz mvcMusicStore.
Dodaj widok przeglądania. Aby to zrobić, kliknij prawym przyciskiem myszy metodę akcji Przeglądaj kontrolki StoreController i kliknij polecenie Dodaj widok.
W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku to Przeglądaj. Zaznacz pole wyboru Utwórz silnie wpisany widok i wybierz pozycję StoreBrowseViewModel z listy rozwijanej Klasa modelu. Pozostaw inne pola z wartością domyślną. Następnie kliknij pozycję Dodaj.

Dodawanie widoku przeglądania

Zmodyfikuj plik Browse.cshtml , aby wyświetlić informacje o gatunku, aby uzyskać dostęp do obiektu StoreBrowseViewModel przekazanego do szablonu widoku. W tym celu zastąp zawartość następującym kodem: (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 przetestujesz, że metoda Browse pobiera albumy z akcji Przeglądaj metody .

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Czy zmienić adres URL na /Store/Browse? Gatunek=Disco , aby sprawdzić, czy akcja zwraca dwa albumy.

Przeglądanie Sklepu Disco Albumy

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

W tym zadaniu zaimplementujesz widok Sklep/Szczegóły , aby wyświetlić informacje o określonym albumie. W tym praktycznym laboratorium wszystko, co będzie wyświetlane na temat albumu, jest już zawarte w szablonie Wyświetl . Dlatego zamiast tworzyć klasę StoreDetailsViewModel, użyjesz bieżącego szablonu StoreBrowseViewModel przekazującego do niego album.

W razie potrzeby zamknij przeglądarkę, aby wrócić do okna programu Visual Studio. Dodaj nowy widok Szczegółów dla metody akcji Szczegóły StoreControllera. W tym celu kliknij prawym przyciskiem myszy metodę Details w klasie StoreController , a następnie kliknij polecenie Dodaj widok.
W oknie dialogowym Dodawanie widoku sprawdź, czy nazwa widoku to Szczegóły. Zaznacz pole wyboru Utwórz silnie wpisany widok i wybierz pozycję Album z listy rozwijanej Klasa modelu. Pozostaw inne pola z wartością domyślną. Następnie kliknij pozycję Dodaj. Spowoduje to utworzenie i otwarcie pliku \Views\Store\Details.cshtml .

Dodawanie widoku szczegółów
Zmodyfikuj plik Details.cshtml , aby wyświetlić informacje albumu, aby uzyskać dostęp do obiektu Album przekazanego do szablonu widoku. W tym celu zastąp zawartość następującym kodem: (C#)
```
@model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

<h2>Album: @Model.Title</h2>
```

Zadanie 7 . Uruchamianie aplikacji

W tym zadaniu sprawdzisz, czy widok szczegółów pobiera informacje albumu z metody akcji Szczegóły.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /Store/Details/5 , aby zweryfikować informacje o albumie.

Szczegóły albumu przeglądania

Zadanie 8 . Dodawanie łączy między stronami

W tym zadaniu dodasz link w widoku sklepu, aby mieć link w każdej nazwie gatunku do odpowiedniego adresu URL /Store/Browse . W ten sposób po kliknięciu gatunku, na przykład Disco, nastąpi przejście do /Store/Browse?genre=Disco URL.

W razie potrzeby zamknij przeglądarkę, aby wrócić do okna programu Visual Studio. Zaktualizuj stronę Indeks, aby dodać link do strony Przeglądaj. W tym celu w Eksplorator rozwiązań rozwiń folder Views, a następnie folder Store i kliknij dwukrotnie stronę Index.cshtml.
Dodaj link do widoku Przeglądania wskazujący wybrany gatunek. W tym celu zastąp następujący wyróżniony kod w tagach <li> : (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>
```
Uwaga

innym podejściem byłoby połączenie bezpośrednio ze stroną, przy użyciu kodu podobnego do następującego:

<a href="/Store/Browse?genre=@genreName">@genreName</a>

Mimo że to podejście działa, zależy to od zakodowanego na stałe ciągu. Jeśli później zmienisz nazwę kontrolera, musisz 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 linków HTML><, upewniając się, że ścieżki adresów URL są prawidłowo zakodowane.

Plik Html.ActionLink ma kilka przeciążeń. W tym ćwiczeniu użyjesz jednego, który przyjmuje trzy parametry:
1. Tekst linku, w którym będzie wyświetlana nazwa gatunku
2. Nazwa akcji kontrolera (Przeglądaj)
3. Wartości parametrów trasy, określając zarówno nazwę (gatunek), jak i wartość (nazwa gatunku)

Zadanie 9 — uruchamianie aplikacji

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

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /Store , aby sprawdzić, czy każdy gatunek łączy się z odpowiednim /Store/Browse URL.

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

Zadanie 10 — przekazywanie wartości przy użyciu kolekcji Dynamic ViewModel

W tym zadaniu poznasz prostą i zaawansowaną metodę przekazywania wartości między kontrolerem i widokiem bez wprowadzania żadnych zmian w modelu. ASP.NET MVC 4 udostępnia kolekcję "ViewModel", którą można przypisać do dowolnej wartości dynamicznej i uzyskiwać do niej dostęp w kontrolerach i widokach.

Teraz użyjesz kolekcji dynamicznej ViewBag, aby przekazać listę "Gwiezdnych gatunków" z kontrolera do widoku. Widok Indeks sklepu będzie mieć dostęp do modelu ViewModel i wyświetli informacje.

W razie potrzeby zamknij przeglądarkę, aby wrócić do okna programu Visual Studio. Otwórz StoreController.cs i zmodyfikuj metodę Index , aby utworzyć listę gatunków gwiazdek 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);
}

Uwaga

Możesz również użyć składni ViewBag["Starred"], aby uzyskać dostęp do właściwości.

Ikona gwiazdki "starred.png" znajduje się w folderze Source\Assets\Images tego laboratorium. Aby dodać ją do aplikacji, przeciągnij 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

Otwórz widok Store/Index.cshtml i zmodyfikuj zawartość. Odczytasz właściwość "starred" w kolekcji ViewBag i zapytasz, czy bieżąca nazwa gatunku znajduje się na liście. W takim przypadku zostanie wyświetlona ikona gwiazdki bezpośrednio do linku 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, czy gwiazdy wyświetlają ikonę gwiazdki.

Naciśnij F5 , aby uruchomić aplikację.
Projekt rozpoczyna się na stronie głównej. Zmień adres URL na /Store , aby sprawdzić, czy każdy proponowany gatunek ma szanowaną etykietę:

Przeglądanie gatunków z elementami z gwiazdami

Ćwiczenie 7. Okrążenie wokół nowego szablonu ASP.NET MVC 4

W tym ćwiczeniu zapoznasz się z ulepszeniami szablonów projektów ASP.NET MVC 4, zapoznając się z najbardziej istotnymi funkcjami nowego szablonu.

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

Jeśli jeszcze nie jest otwarty, uruchom program VS Express dla sieci Web
Wybierz plik | Nowy | Polecenie menu Project . W oknie dialogowym Nowy projekt wybierz visual C#|Szablon sieci Web w drzewie okienka po lewej stronie i wybierz ASP.NET aplikację internetową MVC 4. Nadaj projektowi nazwę MusicStore i zaktualizuj nazwę rozwiązania na Początek, a następnie wybierz lokalizację (lub pozostaw wartość domyślną) i kliknij przycisk OK.

Tworzenie nowego projektu MVC 4 ASP.NET
W oknie dialogowym Nowy projekt MVC 4 ASP.NET wybierz szablon projektu Aplikacja internetowa i kliknij przycisk OK. Zwróć uwagę, że jako aparat widoków możesz wybrać środowisko Razor lub ASPX.

Tworzenie nowej aplikacji internetowej ASP.NET MVC 4

Uwaga

Składnia Razor została wprowadzona w ASP.NET MVC 3. Jego celem jest zminimalizowanie liczby znaków i naciśnięć wymaganych w pliku, umożliwiając szybki i płynny przepływ pracy kodowania. Platforma Razor korzysta z istniejących umiejętności języka C#/VB (lub innych) i dostarcza składnię znaczników szablonu, która umożliwia niesamowity przepływ pracy tworzenia kodu HTML.
Naciśnij F5 , aby uruchomić rozwiązanie i zobaczyć odnowiony szablon. Możesz zapoznać się z następującymi funkcjami:
1. Nowoczesne szablony stylu
  
  Szablony zostały odnowione, zapewniając bardziej nowoczesne style.
  
  szablony restyled ASP.NET MVC 4
2. Renderowanie adaptacyjne
  
  Sprawdź zmianę rozmiaru okna przeglądarki i zwróć uwagę, jak układ strony dynamicznie dostosowuje się do nowego rozmiaru okna. Te szablony używają techniki renderowania adaptacyjnego do poprawnego renderowania zarówno na platformach klasycznych, jak i mobilnych bez żadnego dostosowania.
  
  szablon projektu ASP.NET MVC 4 w różnych rozmiarach przeglądarki
Zamknij przeglądarkę, aby zatrzymać debuger i wrócić do programu Visual Studio.
Teraz możesz zapoznać się z rozwiązaniem i zapoznać się z niektórymi nowymi funkcjami wprowadzonymi przez ASP.NET MVC 4 w szablonie projektu.

Szablon projektu aplikacji internetowej ASP.NET MVC 4
1. Adiustacja HTML5
  
  Przeglądaj widoki szablonów, aby dowiedzieć się, jak znaleźć nowy znacznik motywu, na przykład otwórz widok About.cshtml w folderze Strona główna .
  
  Nowy szablon przy użyciu znaczników Razor i HTML5
2. Uwzględnione biblioteki Języka JavaScript
  1. jQuery: jQuery upraszcza przechodzenie dokumentów HTML, obsługę zdarzeń, animowanie i interakcje Ajax.
  2. Interfejs użytkownika jQuery: ta biblioteka udostępnia abstrakcje dla interakcji i animacji niskiego poziomu, zaawansowanych efektów i widżetów motywowych opartych na bibliotece JavaScript jQuery.
    
    Uwaga
    
    Możesz dowiedzieć się więcej o interfejsie użytkownika jQuery i jQuery w [http://docs.jquery.com/](http://docs.jquery.com/).
  3. KnockoutJS: domyślny szablon platformy ASP.NET MVC 4 zawiera teraz platformę KnockoutJS, platformę MVVM języka JavaScript, która umożliwia tworzenie zaawansowanych i wysoce dynamicznych aplikacji internetowych przy użyciu języka JavaScript i HTML. Podobnie jak w ASP.NET MVC 3 biblioteki jQuery i jQuery UI są również dostępne w ASP.NET MVC 4.
    
    Uwaga
    
    Więcej informacji na temat biblioteki KnockOutJS można znaleźć w tym linku: http://learn.knockoutjs.com/.
  4. Modernizator: ta biblioteka jest uruchamiana automatycznie, dzięki czemu witryna jest zgodna ze starszymi przeglądarkami w przypadku korzystania z technologii HTML5 i CSS3.
    
    Uwaga
    
    Więcej informacji na temat biblioteki modernizatora można znaleźć w tym linku: http://www.modernizr.com/.
3. SimpleMembership uwzględnione w rozwiązaniu
  
  SimpleMembership został zaprojektowany jako zamiennik poprzedniego systemu dostawcy ról i członkostwa ASP.NET. Ma wiele nowych funkcji, które ułatwiają deweloperowi zabezpieczanie stron internetowych w bardziej elastyczny sposób.
  
  Szablon internetowy skonfigurował już kilka rzeczy do integracji simpleMembership, na przykład accountController jest przygotowany do korzystania z protokołu OAuthWebSecurity (na potrzeby rejestracji konta OAuth, logowania, zarządzania itp.) i zabezpieczeń sieci Web.
  
  SimpleMembership uwzględnione w rozwiązaniu
  
  Uwaga
  
  Więcej informacji na temat protokołu OAuthWebSecurity można znaleźć w witrynie MSDN.

Uwaga

Ponadto tę aplikację można wdrożyć w witrynach sieci Web platformy Windows Azure zgodnie z dodatkiem B: Publikowanie aplikacji ASP.NET MVC 4 przy użyciu narzędzia Web Deploy.

Podsumowanie

Wykonując to praktyczne laboratorium, poznaliśmy podstawy ASP.NET MVC:

Podstawowe elementy aplikacji MVC i sposób ich interakcji
Jak utworzyć aplikację MVC ASP.NET
Jak dodać i skonfigurować kontrolery do obsługi parametrów przekazywanych za pośrednictwem adresu URL i ciągu zapytania
Jak dodać stronę wzorcową układu w celu skonfigurowania szablonu dla wspólnej zawartości HTML, arkusza StyleSheet w celu ulepszenia wyglądu i działania oraz szablonu Wyświetl w celu wyświetlania zawartości HTML
Jak używać wzorca ViewModel do przekazywania właściwości do szablonu Widok w celu wyświetlania informacji dynamicznych
Jak używać parametrów przekazywanych do kontrolerów w szablonie Widok
Jak dodać linki do stron w aplikacji ASP.NET MVC
Jak dodawać i używać właściwości dynamicznych w widoku
Ulepszenia szablonów projektów ASP.NET MVC 4

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

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

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

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

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

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

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

Kafelek programu VS Express dla sieci Web

Dodatek B: publikowanie aplikacji MVC 4 ASP.NET przy użyciu narzędzia Web Deploy

W tym dodatku pokazano, jak utworzyć nową witrynę internetową z portalu zarządzania platformy Windows Azure i opublikować aplikację uzyskaną przez wykonanie laboratorium, korzystając z funkcji publikowania Web Deploy udostępnionej przez platformę Windows Azure.

Zadanie 1 . Tworzenie nowej witryny sieci Web w witrynie Windows Azure Portal

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

Uwaga

Platforma Windows Azure umożliwia hostowanie 10 ASP.NET witryn internetowych bezpłatnie, a następnie skalowanie w miarę wzrostu ruchu. Możesz zarejestrować się tutaj.

Zaloguj się do portalu zarządzania platformy Windows Azure
Kliknij pozycję Nowy na pasku poleceń.

Tworzenie nowej witryny sieci Web
Kliknij pozycję Compute Web Site (Obliczanie | witryny sieci Web). Następnie wybierz opcję Szybkie tworzenie . Podaj dostępny adres URL nowej witryny sieci Web i kliknij pozycję Utwórz witrynę sieci Web.

Uwaga

Witryna sieci Web platformy Windows Azure jest hostem aplikacji internetowej działającej w chmurze, którą można kontrolować i zarządzać. Opcja Szybkie tworzenie umożliwia wdrożenie ukończonej aplikacji internetowej w witrynie sieci Web platformy Windows Azure spoza portalu. Nie obejmuje on kroków konfigurowania bazy danych.

Tworzenie nowej witryny sieci Web przy użyciu szybkiego tworzenia
Poczekaj na utworzenie nowej witryny sieci Web.
Po utworzeniu witryny sieci Web kliknij link w kolumnie ADRES URL . Sprawdź, czy nowa witryna sieci Web działa.

Przechodzenie do nowej witryny sieci Web

Uruchomiona witryna sieci Web
Wróć do portalu i kliknij nazwę witryny sieci Web w kolumnie Nazwa , aby wyświetlić strony zarządzania.

Otwieranie stron zarządzania witrynami sieci Web
Na stronie Pulpit nawigacyjny w sekcji Szybki przegląd kliknij link Pobierz profil publikowania.

Uwaga

Profil publikowania zawiera wszystkie informacje wymagane do opublikowania aplikacji internetowej w witrynie internetowej platformy 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 uwierzytelnienia względem każdego z punktów końcowych, dla których włączono metodę publikacji. 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 internetowych w witrynach internetowych platformy Windows Azure.

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

Zapisywanie pliku profilu publikowania

Zadanie 2 — Konfigurowanie serwera bazy danych

Jeśli aplikacja korzysta z baz danych programu SQL Server, musisz utworzyć serwer usługi SQL Database. Jeśli chcesz wdrożyć prostą aplikację, która nie korzysta z programu SQL Server, możesz pominąć to zadanie.

Do przechowywania bazy danych aplikacji potrzebny będzie serwer usługi SQL Database. Serwery usługi SQL Database można wyświetlić z subskrypcji w portalu zarządzania Platformy Windows Azure na pulpicie nawigacyjnym serwera sql databases | | . 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ż będą one używane w następnych zadaniach. Nie twórz jeszcze bazy danych, ponieważ zostanie ona utworzona w późniejszym etapie.

Pulpit nawigacyjny serwera usługi SQL Database
W następnym zadaniu przetestujesz połączenie z bazą danych z programu Visual Studio, dlatego musisz uwzględnić lokalny adres IP na liście dozwolonych adresów IP serwera. W tym celu kliknij przycisk 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.

Dodawanie adresu IP klienta
Po dodaniu adresu IP klienta do listy dozwolonych adresów IP kliknij pozycję Zapisz, aby potwierdzić zmiany.

Potwierdzanie zmian

Zadanie 3 . Publikowanie aplikacji MVC 4 ASP.NET przy użyciu narzędzia Web Deploy

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

Publikowanie witryny sieci Web
Zaimportuj profil publikowania zapisany w pierwszym zadaniu.

Importowanie profilu publikowania
Kliknij pozycję Zweryfikuj połączenie. Po zakończeniu walidacji kliknij przycisk Dalej.

Uwaga

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

Weryfikowanie połączenia
Na stronie Ustawienia w sekcji Bazy danych kliknij przycisk obok pola tekstowego połączenia bazy danych (tj. DefaultConnection).

Konfiguracja narzędzia Web Deploy
Skonfiguruj połączenie z bazą danych w następujący sposób:
- W polu Nazwa serwera wpisz adres URL serwera usługi 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 parametry połączenia docelowej
Następnie kliknij przycisk OK. Po wyświetleniu monitu o utworzenie bazy danych kliknij przycisk Tak.

Tworzenie bazy danych
Parametry połączenia używany do nawiązywania połączenia z usługą SQL Database na platformie Windows Azure jest wyświetlany w polu tekstowym Domyślne połączenie. Następnie kliknij Dalej.

Parametry połączenia wskazujące usługę SQL Database
Na stronie Wersja zapoznawcza kliknij pozycję Publikuj.

Publikowanie aplikacji internetowej
Po zakończeniu procesu publikowania domyślna przeglądarka otworzy opublikowaną witrynę internetową.

Aplikacja opublikowana na platformie Windows Azure

Dodatek C: Używanie fragmentów kodu

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

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

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

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

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

Zacznij wpisywać nazwę fragmentu kodu

Zacznij wpisywać nazwę fragmentu kodu

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

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

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

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

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

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

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

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

Wybierz odpowiedni fragment kodu z listy, klikając go

Wybierz odpowiedni fragment kodu z listy, klikając go

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2024-07-16

Udostępnij za pomocą

ASP.NET MVC 4 — podstawy

Aplikacja sklepu Music Store

ASP.NET podstawy MVC 4

Cele

Wymagania wstępne

Ustawienia

Ćwiczenia

Ćwiczenie 1. Tworzenie projektu aplikacji internetowej MVC ASP.NET MusicStore

Zadanie 1 — tworzenie projektu aplikacji internetowej ASP.NET MVC

Zadanie 2 — Eksplorowanie struktury rozwiązania

Zadanie 3 — dodawanie elementu HomeController

Zadanie 4 . Uruchamianie aplikacji

Ćwiczenie 2. Tworzenie kontrolera

Zadanie 1 — dodawanie nowej klasy StoreController

Zadanie 2 . Modyfikowanie akcji StoreController

Zadanie 3 — uruchamianie aplikacji

Ćwiczenie 3. Przekazywanie parametrów do kontrolera

Zadanie 1 — dodawanie parametru gatunku do storeController

Zadanie 2 — uruchamianie aplikacji

Zadanie 3 — dodawanie parametru id osadzonego w adresie URL

Zadanie 4 . Uruchamianie aplikacji

Ćwiczenie 4. Tworzenie widoku

Zadanie 1 . Modyfikowanie pliku _layout.cshtml

Zadanie 2 . Dodawanie arkusza stylów CSS

Zadanie 3 — dodawanie szablonu widoku

Zadanie 4. Weryfikacja

Ćwiczenie 5. Tworzenie modelu widoku

Zadanie 1 . Tworzenie klasy ViewModel

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

Zadanie 3 . Aktualizowanie kontrolki StoreController w celu używania modelu StoreIndexViewModel

Zadanie 4. Tworzenie szablonu widoku korzystającego z modelu StoreIndexViewModel

Zadanie 5 . Aktualizowanie szablonu widoku

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

Zadanie 1 — dodawanie klas modeli

Zadanie 2 — dodawanie modelu StoreBrowseViewModel

Zadanie 3 . Korzystanie z modelu New ViewModel w storeController

Zadanie 4 . Dodawanie szablonu widoku przeglądania

Zadanie 5 . Uruchamianie aplikacji

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

Zadanie 7 . Uruchamianie aplikacji

Zadanie 8 . Dodawanie łączy między stronami

Zadanie 9 — uruchamianie aplikacji

Zadanie 10 — przekazywanie wartości przy użyciu kolekcji Dynamic ViewModel

Zadanie 11 — uruchamianie aplikacji

Ćwiczenie 7. Okrążenie wokół nowego szablonu ASP.NET MVC 4

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

Podsumowanie

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

Dodatek B: publikowanie aplikacji MVC 4 ASP.NET przy użyciu narzędzia Web Deploy

Zadanie 1 . Tworzenie nowej witryny sieci Web w witrynie Windows Azure Portal

Zadanie 2 — Konfigurowanie serwera bazy danych

Zadanie 3 . Publikowanie aplikacji MVC 4 ASP.NET przy użyciu narzędzia Web Deploy

Dodatek C: Używanie fragmentów kodu

Sprzężenie zwrotne

Dodatkowe zasoby