Udostępnij za pośrednictwem

Co nowego we wzorcu ASP.NET MVC 4

Autor: Web Camps Team

Pobierz zestaw szkoleniowy obozów internetowych

ASP.NET MVC 4 to struktura umożliwiająca tworzenie skalowalnych, opartych na standardach aplikacji internetowych przy użyciu dobrze ustalonych wzorców projektowych oraz możliwości ASP.NET i platformy .NET. Ta nowa, czwarta wersja platformy koncentruje się na ułatwianiu tworzenia aplikacji mobilnych internetowych.

Na początek podczas tworzenia nowego projektu ASP.NET MVC 4 jest teraz szablon projektu aplikacji mobilnej, którego można użyć do utworzenia autonomicznej aplikacji przeznaczonej specjalnie dla urządzeń przenośnych. Ponadto ASP.NET MVC 4 integruje się z aplikacją jQuery Mobile za pośrednictwem pakietu NuGet jQuery.Mobile.MVC. jQuery Mobile to oparta na języku HTML5 struktura służąca do tworzenia aplikacji internetowych zgodnych ze wszystkimi popularnymi platformami urządzeń przenośnych, w tym Windows Phone, iPhone, Android itd. Jeśli jednak potrzebujesz specjalizacji, ASP.NET MVC 4 umożliwia również obsługę różnych widoków dla różnych urządzeń i zapewnienie optymalizacji specyficznych dla urządzenia.

W tym praktycznym laboratorium zaczniesz od szablonu projektu ASP.NET MVC 4 "Aplikacja internetowa", aby utworzyć aplikację z galerii zdjęć. Będziesz stopniowo ulepszać aplikację przy użyciu aplikacji jQuery Mobile i ASP.NET nowych funkcji MVC 4, aby była zgodna z różnymi urządzeniami przenośnymi i przeglądarkami internetowymi dla komputerów stacjonarnych. Poznasz również nowe przepisy kodu na potrzeby generowania kodu i dowiesz się, jak ASP.NET MVC 4 ułatwia pisanie metod akcji asynchronicznych przez obsługę typów zwracanych ActionResult> zadania<.

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 artykule What's New in Web Forms in ASP.NET 4.5 (Co nowego w formularzach internetowych w programie ASP.NET 4.5).

Cele

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

  • Skorzystaj z ulepszeń szablonów projektów ASP.NET MVC, w tym nowego szablonu projektu aplikacji mobilnej
  • Użyj atrybutu viewport HTML5 i zapytań multimedialnych CSS, aby ulepszyć wyświetlanie na urządzeniach przenośnych
  • Używanie aplikacji jQuery Mobile do stopniowego ulepszania i tworzenia zoptymalizowanego pod kątem dotyku internetowego interfejsu użytkownika
  • Tworzenie widoków specyficznych dla urządzeń przenośnych
  • Przełączenie między widokami i widokami pulpitu w aplikacji za pomocą składnika przełącznika widoku
  • Tworzenie kontrolerów asynchronicznych przy użyciu obsługi zadań

Wymagania wstępne

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

Ustawienia

W całym dokumencie laboratoryjnym zostanie wyświetlona instrukcja wstawiania bloków kodu. Dla wygody większość tego kodu jest dostarczana jako fragmenty kodu programu Visual Studio Code, których można używać z poziomu programu Visual Studio, aby uniknąć konieczności ręcznego dodawania go.

Aby zainstalować fragmenty kodu:

  1. Otwórz okno Eksploratora Windows i przejdź do folderu Source\Setup laboratorium.
  2. Kliknij dwukrotnie plik Setup.cmd w tym folderze, aby zainstalować fragmenty kodu programu Visual Studio Code.

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

Ćwiczenia

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

  1. Nowe szablony projektów ASP.NET MVC 4
  2. Tworzenie aplikacji internetowej galerii zdjęć
  3. Dodawanie obsługi urządzeń przenośnych
  4. Używanie kontrolerów asynchronicznych

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. Nowe szablony projektów MVC 4 ASP.NET

W tym ćwiczeniu zapoznasz się z ulepszeniami w szablonach projektów ASP.NET MVC 4. Oprócz szablonu aplikacji internetowej, już obecnej w MVC 3, ta wersja zawiera teraz oddzielny szablon dla aplikacji mobilnych. Najpierw przyjrzymy się niektórym istotnym funkcjom każdego z szablonów. Następnie będziesz pracować nad prawidłowym renderowaniem strony na różnych platformach przy użyciu odpowiedniego podejścia.

Zadanie 1 . Eksplorowanie szablonu aplikacji internetowej

  1. Otwórz program Visual Studio.

  2. 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 pozycję ASP.NET aplikacja internetowa MVC 4. Nadaj projektowi nazwę PhotoGallery, wybierz lokalizację (lub pozostaw wartość domyślną) i kliknij przycisk OK.

    Uwaga

    Później dostosujesz rozwiązanie PhotoGallery ASP.NET MVC 4, które tworzysz.

    Tworzenie nowego projektu

    Tworzenie nowego projektu

  3. W oknie dialogowym Nowy projekt MVC 4 ASP.NET wybierz szablon projektu Aplikacja internetowa i kliknij przycisk OK. Upewnij się, że wybrano razor jako aparat widoków.

    Tworzenie nowej aplikacji internetowej ASP.NET MVC 4

    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.

  4. Naciśnij F5 , aby uruchomić rozwiązanie i wyświetlić odnowione szablony. Możesz zapoznać się z następującymi funkcjami:

    Nowoczesne szablony stylu

    Szablony zostały odnowione, zapewniając bardziej nowoczesne style.

    szablony restyled ASP.NET MVC 4

    szablony restyled ASP.NET MVC 4

    Nowa strona kontaktu

    Nowa strona kontaktu

    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

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

    Bogatszy interfejs użytkownika za pomocą języka JavaScript

    Innym ulepszeniem domyślnych szablonów projektów jest użycie języka JavaScript w celu zapewnienia bardziej interaktywnego kodu JavaScript. Linki Login and Register używane w szablonie są przykładem sposobu użycia weryfikacji jQuery w celu zweryfikowania pól wejściowych po stronie klienta.

    Walidacja zapytania jQuery

    Walidacja zapytania jQuery

    Uwaga

    Zwróć uwagę na dwie sekcje logowania, w pierwszej sekcji możesz zalogować się przy użyciu zarejestrowanego konta z witryny, a w drugiej sekcji możesz też zalogować się przy użyciu innej usługi uwierzytelniania, takiej jak google (domyślnie wyłączona).

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

  6. Otwórz plik AuthConfig.cs znajdujący się w folderze App_Start .

  7. Usuń komentarz z ostatniego wiersza, aby zarejestrować klienta Google na potrzeby uwierzytelniania OAuth .

    public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

    Uwaga

    Zauważ, że możesz łatwo włączyć uwierzytelnianie przy użyciu dowolnej usługi OpenID lub OAuth, takiej jak Facebook, Twitter, Microsoft itp.

  8. Naciśnij F5 , aby uruchomić rozwiązanie i przejść do strony logowania.

  9. Wybierz usługę Google , aby się zalogować.

    Wybieranie usługi logowania

    Wybieranie usługi logowania

  10. Zaloguj się przy użyciu konta Google.

  11. Zezwól witrynie (localhost) na pobieranie informacji z konta Google.

  12. Na koniec musisz zarejestrować się w witrynie, aby skojarzyć konto Google.

Kojarzenie konta Google

Kojarzenie konta Google 13. Zamknij przeglądarkę, aby zatrzymać debuger i wrócić do programu Visual Studio. 14. Teraz zapoznaj się z rozwiązaniem, aby zapoznać się z innymi nowymi funkcjami wprowadzonymi przez ASP.NET MVC 4 w szablonie projektu.

Szablon projektu aplikacji internetowej ASP.NET MVC 4

Szablon projektu aplikacji internetowej ASP.NET MVC 4

  • Adiustacja HTML 5

    Przeglądaj widoki szablonów, aby dowiedzieć się, jak znaleźć nowy znacznik motywu.

    Nowy szablon przy użyciu języka Razor i HTML5 markup About.cshtml.

    Nowy szablon przy użyciu znaczników Razor i HTML5 (About.cshtml).

  • Zaktualizowano biblioteki Języka JavaScript

    Domyślny szablon ASP.NET MVC 4 zawiera teraz knockoutJS, platformę JavaScript MVVM, która umożliwia tworzenie rozbudowanych i wysoce dynamicznych aplikacji internetowych przy użyciu języków JavaScript i HTML. Podobnie jak w wzorcach MVC3 biblioteki interfejsu użytkownika jQuery i jQuery 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/](http://learn.knockoutjs.com/). Ponadto możesz dowiedzieć się więcej o interfejsie użytkownika jQuery i jQuery w środowisku [http://docs.jquery.com/](http://docs.jquery.com/).

Zadanie 2 . Eksplorowanie szablonu aplikacji mobilnej

ASP.NET MVC 4 ułatwia opracowywanie witryn internetowych dla przeglądarek mobilnych i tabletów. Ten szablon ma taką samą strukturę aplikacji jak szablon aplikacji internetowej (zwróć uwagę, że kod kontrolera jest praktycznie identyczny), ale jego styl został zmodyfikowany w celu poprawnego renderowania na urządzeniach przenośnych opartych na dotyku.

  1. 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ę PhotoGallery.Mobile, wybierz lokalizację (lub pozostaw wartość domyślną), wybierz pozycję "Dodaj do rozwiązania" i kliknij przycisk OK.

  2. W oknie dialogowym Nowy projekt MVC 4 ASP.NET wybierz szablon projektu Aplikacja mobilna i kliknij przycisk OK. Upewnij się, że wybrano razor jako aparat widoków.

    Tworzenie nowej aplikacji mobilnej MVC 4 ASP.NET

    Tworzenie nowej aplikacji mobilnej MVC 4 ASP.NET

  3. Teraz możesz zapoznać się z rozwiązaniem i zapoznać się z niektórymi nowymi funkcjami wprowadzonymi przez szablon rozwiązania ASP.NET MVC 4 dla urządzeń przenośnych:

    • Biblioteka mobilna jQuery

      Szablon projektu Aplikacja mobilna zawiera bibliotekę jQuery Mobile, która jest biblioteką typu open source na potrzeby zgodności przeglądarki mobilnej. Aplikacja jQuery Mobile stosuje progresywne ulepszenia przeglądarek mobilnych, które obsługują arkusze CSS i JavaScript. Progresywne ulepszenia umożliwiają wszystkim przeglądarkom wyświetlanie podstawowej zawartości strony internetowej, a jednocześnie umożliwia wyświetlanie zawartości wzbogaconej zawartości tylko przez najbardziej zaawansowane przeglądarki. Pliki JavaScript i CSS zawarte w stylu jQuery Mobile ułatwiają przeglądarkom mobilnym dopasowanie zawartości na ekranie bez wprowadzania żadnych zmian w znacznikach strony.

      jQuery-mobile-library-included-in-the-template

      Biblioteka mobilna jQuery zawarta w szablonie

    • Adiustacja oparta na kodzie HTML5

      Mobile-application-template-using-HTML5-markup

      Szablon aplikacji mobilnej przy użyciu znaczników HTML5 (Login.cshtml i index.cshtml)

  4. Naciśnij F5 , aby uruchomić rozwiązanie.

  5. Otwórz emulator systemu Windows Phone 7.

  6. Na ekranie startowym telefonu otwórz program Internet Explorer. Sprawdź adres URL, pod którym uruchomiono aplikację klasyczną, i przejdź do tego adresu URL z telefonu (np. http://localhost:[PortNumber]/).

  7. Teraz możesz wprowadzić stronę logowania lub wyewidencjonować stronę z informacjami. Zwróć uwagę, że styl witryny internetowej opiera się na nowej aplikacji Metro dla urządzeń przenośnych. Szablon projektu MVC 4 ASP.NET jest poprawnie wyświetlany na urządzeniach przenośnych, upewniając się, że wszystkie elementy strony są widoczne i włączone. Zwróć uwagę, że linki w nagłówku są wystarczająco duże, aby można je było kliknąć lub nacisnąć.

    Strony szablonu projektu na urządzeniu przenośnym

    Strony szablonu projektu na urządzeniu przenośnym

  8. Nowy szablon używa również tagu meta Viewport. Większość przeglądarek mobilnych definiuje szerokość okna przeglądarki wirtualnej lub "viewport", który jest większy niż rzeczywista szerokość urządzenia przenośnego. Dzięki temu przeglądarki mobilne mogą wyświetlać całą stronę internetową wewnątrz wyświetlacza wirtualnego. Tag meta Viewport umożliwia deweloperom internetowym ustawianie szerokości, wysokości i skali obszaru przeglądarki na urządzeniach przenośnych. Szablon ASP.NET MVC 4 dla aplikacji mobilnych ustawia widok na szerokość urządzenia ("width=device-width") w szablonie układu (Views\Shared_Layout.cshtml), aby wszystkie strony miały ustawioną szerokość ekranu urządzenia. Zwróć uwagę, że tag meta Viewport nie zmieni domyślnego widoku przeglądarki.

  9. Otwórz plik _Layout.cshtml znajdujący się w pliku Views | Folder udostępniony i oznacz jako komentarz tag meta Viewport. Uruchom aplikację, jeśli nie została jeszcze otwarta, i sprawdź różnice.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

Witryna po oznaczeniu komentarza do tagu metaportu viewport

Witryna po oznaczeniu jako komentarza tagu metaportu widoku 10. W programie Visual Studio naciśnij SHIFT + F5, aby zatrzymać debugowanie aplikacji. 11. Usuń komentarz z tagu metaportu widoku.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

Zadanie 3 . Korzystanie z renderowania adaptacyjnego

W tym zadaniu dowiesz się, jak poprawnie renderować stronę internetową na urządzeniach przenośnych i przeglądarkach sieci Web bez konieczności dostosowywania. Użyto już tagu meta Viewport z podobnym celem. Teraz poznasz kolejną zaawansowaną metodę: renderowanie adaptacyjne.

Renderowanie adaptacyjne to technika, która używa zapytań multimedialnych CSS3 w celu dostosowania stylu zastosowanego do strony. Zapytania multimedialne definiują warunki w arkuszu stylów, grupując style CSS w określonym warunku. Tylko wtedy, gdy warunek ma wartość true, styl jest stosowany do zadeklarowanych obiektów.

Elastyczność zapewniana przez technikę renderowania adaptacyjnego umożliwia dowolne dostosowanie do wyświetlania witryny na różnych urządzeniach. Można zdefiniować dowolną liczbę stylów w jednym arkuszu stylów bez konieczności pisania kodu logiki w celu wybrania stylu. W związku z tym jest to bardzo schludny sposób dostosowywania stylów stron, ponieważ zmniejsza ilość zduplikowanego kodu i logiki do celów renderowania. Z drugiej strony zużycie przepustowości zwiększyłoby się, ponieważ rozmiar plików CSS może nieznacznie wzrosnąć.

Korzystając z techniki renderowania adaptacyjnego, witryna będzie wyświetlana prawidłowo, niezależnie od przeglądarki. Należy jednak rozważyć, czy dodatkowe obciążenie przepustowości jest problemem.

Uwaga

Podstawowy format zapytania multimedialnego to: @media [Zakres: wszystkie | handheld | print | projekcja | ekran] ([property:value] i ... [property:value])

Przykłady zapytań multimedialnych: >@media wszystkich i (maksymalna szerokość: 1000 pikseli) i (minimalna szerokość: 700 pikseli) {}: dla wszystkich rozdzielczości z zakresu od 700 pikseli do 1000 pikseli.

@media ekran i (minimalna szerokość: 400 pikseli) i (maksymalna szerokość: 700 pikseli) { ... }: Tylko dla ekranów. Rozdzielczość musi należeć do zakresu od 400 do 700 pikseli.

@media ręczne i (minimalna szerokość: 20em), ekran i (minimalna szerokość: 20em) { ... }: Dla urządzeń przenośnych (urządzeń przenośnych i urządzeń) i ekranów. Minimalna szerokość musi być większa niż 20em.

Więcej informacji na ten temat można znaleźć w witrynie W3C.

Teraz dowiesz się, jak działa renderowanie adaptacyjne, zwiększając czytelność domyślnego szablonu witryny internetowej ASP.NET MVC 4.

  1. Otwórz rozwiązanie PhotoGallery.sln utworzone w zadaniu 1 i wybierz projekt PhotoGallery. Naciśnij F5 , aby uruchomić rozwiązanie.

  2. Zmień szerokość przeglądarki, ustawiając okna na połowę lub mniej niż jedną czwartą oryginalnego rozmiaru. Zwróć uwagę, co dzieje się z elementami w nagłówku: niektóre elementy nie będą wyświetlane w widocznym obszarze nagłówka.

  3. Otwórz plik Site.css z Eksploratora rozwiązań programu Visual Studio znajdujący się w folderze Projekt zawartości . Naciśnij CTRL + F , aby otworzyć zintegrowane wyszukiwanie programu Visual Studio i zapisać @media w celu zlokalizowania zapytania multimediów CSS.

    Warunek zapytania multimediów zdefiniowany w tym szablonie działa w ten sposób: gdy rozmiar okna przeglądarki jest mniejszy niż 850 pikseli, zastosowane reguły CSS są tymi zdefiniowanymi w tym bloku multimediów.

    Lokalizowanie zapytania multimediów

    Lokalizowanie zapytania multimediów

  4. Zastąp wartość atrybutu max-width ustawioną na 850 pikseli na 10 pikseli, aby wyłączyć renderowanie adaptacyjne, a następnie naciśnij CTRL + S , aby zapisać zmiany. Wróć do przeglądarki i naciśnij CTRL + F5 , aby odświeżyć stronę z wprowadzonych zmian. Zwróć uwagę na różnice na obu stronach podczas dostosowywania szerokości okna.

    Strona stosuje klasę <span=@media stylu po lewej stronie i po prawej stronie styl zostanie pominięty" title="W lewym rogu strona stosuje styl @media po prawej stronie zostanie pominięty" />

    Po lewej stronie zastosowano @media styl po prawej stronie, a styl zostanie pominięty

    Teraz sprawdźmy, co się dzieje na urządzeniach przenośnych:

    Po lewej stronie jest stosowana klasa <span =@media stylu po prawej stronie styl zostanie pominięty" title="W lewym rogu strona stosuje styl @media po prawej stronie, styl zostanie pominięty" />

    Po lewej stronie zastosowano @media styl po prawej stronie, a styl zostanie pominięty

    Chociaż zauważysz, że zmiany, gdy strona jest renderowana w przeglądarce sieci Web, nie są bardzo znaczące, w przypadku korzystania z urządzenia przenośnego różnice stają się bardziej oczywiste. Po lewej stronie obrazu widać, że styl niestandardowy poprawił czytelność.

    Renderowanie adaptacyjne może być używane w wielu innych scenariuszach, co ułatwia stosowanie stylów warunkowych w witrynie sieci Web i rozwiązywanie typowych problemów ze stylem z schludnym podejściem.

    Metadane Viewport i zapytania multimediów CSS nie są specyficzne dla ASP.NET MVC 4, dzięki czemu można korzystać z tych funkcji w dowolnej aplikacji internetowej.

  5. W programie Visual Studio naciśnij SHIFT + F5, aby zatrzymać debugowanie aplikacji.

W tym ćwiczeniu będziesz pracować nad aplikacją Galeria zdjęć, aby wyświetlać zdjęcia. Rozpoczniesz od szablonu projektu ASP.NET MVC 4, a następnie dodasz funkcję do pobierania zdjęć z usługi i wyświetlania ich na stronie głównej.

W poniższym ćwiczeniu zaktualizujesz to rozwiązanie, aby ulepszyć sposób wyświetlania go na urządzeniach przenośnych.

Zadanie 1 . Tworzenie makiety usługi fotograficznej

W tym zadaniu utworzysz makiet usługi fotograficznej w celu pobrania zawartości, która będzie wyświetlana w galerii. W tym celu dodasz nowy kontroler, który po prostu zwróci plik JSON z danymi każdego zdjęcia.

  1. Otwórz program Visual Studio , jeśli jeszcze nie został otwarty.

  2. 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 pozycję ASP.NET aplikacja internetowa MVC 4. Nadaj projektowi nazwę PhotoGallery, wybierz lokalizację (lub pozostaw wartość domyślną) i kliknij przycisk OK. Alternatywnie możesz kontynuować pracę z istniejącego rozwiązania aplikacji internetowej MVC 4 ASP.NET z ćwiczenia 1 i pominąć następny krok.

  3. W oknie dialogowym Nowy projekt MVC 4 ASP.NET wybierz szablon projektu Aplikacja internetowa i kliknij przycisk OK. Upewnij się, że wybrano razor jako aparat wyświetlania.

  4. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder App_Data projektu, a następnie wybierz polecenie Dodaj | Istniejący element. Przejdź do folderu Source\Assets\App_Data tego laboratorium i dodaj plik Photos.json .

  5. Utwórz nowy kontroler o nazwie PhotoController. Aby to zrobić, kliknij prawym przyciskiem myszy folder Controllers , przejdź do pozycji Dodaj i wybierz pozycję Kontroler. Wypełnij nazwę kontrolera, pozostaw pusty szablon kontrolera MVC i kliknij przycisk Dodaj.

    Dodawanie kontrolera PhotoController

    Dodawanie kontrolera PhotoController

  6. Zastąp metodę Index następującą akcją Galeria i zwróć zawartość z pliku JSON, który został niedawno dodany do projektu.

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex02 — Akcja galerii)

    public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}

  7. Naciśnij F5 , aby uruchomić rozwiązanie, a następnie przejdź do następującego adresu URL, aby przetestować pozorowaną usługę zdjęć: http://localhost:[port]/photo/gallery (wartość [port] zależy od bieżącego portu, w którym uruchomiono aplikację). Żądanie do tego adresu URL powinno pobrać zawartość pliku Photos.json .

    Testowanie wyśmiewanej usługi fotograficznej

    Testowanie wyśmiewanej usługi fotograficznej

W rzeczywistej implementacji można użyć ASP.NET internetowego interfejsu API do zaimplementowania usługi Galeria zdjęć. ASP.NET internetowy interfejs API to struktura, która ułatwia tworzenie usług HTTP, które docierają do szerokiej gamy klientów, w tym przeglądarek i urządzeń przenośnych. ASP.NET internetowy interfejs API to idealna platforma do tworzenia aplikacji RESTful na platformie .NET Framework.

Zadanie 2 . Wyświetlanie galerii zdjęć

W tym zadaniu zaktualizujesz stronę główną, aby wyświetlić galerię zdjęć przy użyciu wyśmiewanej usługi utworzonej w pierwszym zadaniu tego ćwiczenia. Dodasz pliki modelu i zaktualizujesz widoki galerii.

  1. W programie Visual Studio naciśnij SHIFT + F5, aby zatrzymać debugowanie aplikacji.

  2. Utwórz klasę Photo w folderze Models . Aby to zrobić, kliknij prawym przyciskiem myszy folder Modele , wybierz pozycję Dodaj i kliknij pozycję Klasa. Następnie ustaw nazwę na Photo.cs i kliknij przycisk Dodaj.

  3. Dodaj następujące elementy członkowskie do klasy Photo .

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex02 — Model fotograficzny)

    public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

  4. Otwórz plik HomeController.cs z folderu Controllers.

  5. Dodaj następujące instrukcje using.

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex02 — HomeController Usings)

    using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

  6. Zaktualizuj akcję Indeks, aby użyć klienta HttpClient do pobrania danych galerii, a następnie użyj elementu JavaScriptSerializer do deserializacji go do modelu widoku.

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex02 — akcja indeksu)

    public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

  7. Otwórz plik Index.cshtml znajdujący się w folderze Views\Home i zastąp całą zawartość następującym kodem.

    Ten kod przechodzi przez wszystkie zdjęcia pobrane z usługi i wyświetla je na liście nieurządzanej.

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex02 — Lista zdjęć)

    @model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

  8. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder Zawartość projektu, a następnie wybierz polecenie Dodaj | Istniejący element. Przejdź do folderu Source\Assets\Content tego laboratorium i dodaj plik Site.css . Należy potwierdzić jego zastąpienie. Jeśli masz otwarty plik Site.css , musisz potwierdzić ponowne załadowanie pliku.

  9. Otwórz Eksplorator plików i skopiuj cały folder Photos znajdujący się w folderze Source\Assets tego laboratorium do folderu głównego projektu w Eksplorator rozwiązań.

  10. Uruchom aplikację. Powinna zostać wyświetlona strona główna zawierająca zdjęcia w galerii.

    Galeria

    Galeria

  11. W programie Visual Studio naciśnij SHIFT + F5, aby zatrzymać debugowanie aplikacji.

Ćwiczenie 3. Dodawanie obsługi urządzeń przenośnych

Jedną z najważniejszych aktualizacji w ASP.NET MVC 4 jest obsługa tworzenia aplikacji mobilnych. W tym ćwiczeniu zapoznasz się z ASP.NET nowymi funkcjami MVC 4 dla aplikacji mobilnych, rozszerzając rozwiązanie PhotoGallery utworzone w poprzednim ćwiczeniu.

Zadanie 1 . Instalowanie aplikacji jQuery Mobile w aplikacji MVC 4 ASP.NET

  1. Otwórz rozwiązanie Rozpocznij znajdujące się w folderze Source/Ex3-MobileSupport/Begin/. W przeciwnym razie możesz kontynuować korzystanie z rozwiązania końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.

    1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.

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

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

      Uwaga

      Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.

  2. Otwórz konsolę Menedżer pakietów, klikając opcję Narzędzia NuGet>Menedżer pakietów> Menedżer pakietów Konsoli.

    Otwieranie konsoli Menedżer pakietów NuGet

    Otwieranie konsoli Menedżer pakietów NuGet

  3. W konsoli Menedżer pakietów uruchom następujące polecenie, aby zainstalować pakiet jQuery.Mobile.MVC.

    jQuery Mobile to biblioteka typu open source do tworzenia internetowego interfejsu użytkownika zoptymalizowanego pod kątem dotyku. Pakiet NuGet jQuery.Mobile.MVC zawiera pomocników do korzystania z aplikacji jQuery Mobile z aplikacją ASP.NET MVC 4.

    Uwaga

    Uruchamiając następujące polecenie, pobierzesz bibliotekę jQuery.Mobile.MVC z narzędzia Nuget.

    PM

    Install-Package jQuery.Mobile.MVC

    To polecenie instaluje aplikację jQuery Mobile i niektóre pliki pomocnicze, w tym następujące:

    • Views/Shared/_Layout.Mobile.cshtml: jest układem opartym na protokole jQuery Mobile zoptymalizowanym pod kątem mniejszego ekranu. Gdy witryna internetowa otrzyma żądanie z przeglądarki mobilnej, zastąpi oryginalny układ (_Layout.cshtml) tym.

    • Składnik przełącznika widoku: składa się z widoku Views/Shared/_ViewSwitcher.cshtml częściowego widoku i kontrolera ViewSwitcherController.cs . Ten składnik wyświetli link w przeglądarkach mobilnych, aby umożliwić użytkownikom przełączanie się do wersji klasycznej strony.
      Projekt galerii zdjęć z obsługą urządzeń przenośnych

      Projekt galerii zdjęć z obsługą urządzeń przenośnych

  4. Zarejestruj pakiety mobilne. W tym celu otwórz plik Global.asax.cs i dodaj następujący wiersz.

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex03 — Rejestrowanie pakietów mobilnych)

    protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

  5. Uruchom aplikację przy użyciu przeglądarki internetowej dla komputerów stacjonarnych.

  6. Otwórz emulator systemu Windows Phone 7 znajdujący się w menu Start | Wszystkie programy | Windows Phone SDK 7.1 | Emulator systemu Windows Phone.

  7. Na ekranie startowym telefonu otwórz program Internet Explorer. Sprawdź adres URL, pod którym aplikacja została uruchomiona, i przejdź do tego adresu URL za pomocą przeglądarki telefonu (np. http://localhost:[PortNumber]/).

    Zauważysz, że aplikacja będzie wyglądać inaczej w emulatorze systemu Windows Phone, ponieważ aplikacja jQuery.Mobile.MVC utworzyła nowe zasoby w projekcie, które pokazują widoki zoptymalizowane pod kątem urządzeń przenośnych.

    Zwróć uwagę na komunikat w górnej części telefonu z linkiem, który przełącza się do widoku pulpitu. Ponadto układ _Layout.Mobile.cshtml utworzony przez zainstalowany pakiet zawiera inny układ w aplikacji.

    Uwaga

    Do tej pory nie ma linku, aby wrócić do widoku mobilnego. Zostanie ona uwzględniona w nowszych wersjach.

    Widok mobilny strony głównej galerii zdjęć

    Widok mobilny strony głównej galerii zdjęć

  8. W programie Visual Studio naciśnij SHIFT + F5, aby zatrzymać debugowanie aplikacji.

Zadanie 2 . Tworzenie widoków mobilnych

W tym zadaniu utworzysz mobilną wersję widoku indeksu z zawartością dostosowaną do lepszego wyglądu na urządzeniach przenośnych.

  1. Skopiuj widok Views\Home\Index.cshtml i wklej go, aby utworzyć kopię, zmień nazwę nowego pliku na Index.Mobile.cshtml.

  2. Otwórz nowy utworzony widok Index.Mobile.cshtml i zastąp istniejący <tag ul> tym kodem. W tym celu zaktualizujesz <tag ul> przy użyciu adnotacji danych jQuery Mobile, aby używać motywów mobilnych z biblioteki jQuery.

    <ul data-role="listview" data-inset="true" data-filter="true">

    Uwaga

    Zwróć uwagę, że:

    • Atrybut roli danych ustawiony na listview spowoduje renderowanie listy przy użyciu stylów widoku listy.

    • Atrybut zestawu danych ustawiony na wartość true spowoduje wyświetlenie listy z zaokrąglonym obramowaniem i marginesem.

    • Atrybut filtru danych ustawiony na wartość true spowoduje wygenerowanie pola wyszukiwania.

    Więcej informacji na temat konwencji jQuery Mobile można dowiedzieć się w dokumentacji projektu: [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/)

  3. Naciśnij CTRL + S , aby zapisać zmiany.

  4. Przejdź do emulatora systemu Windows Phone i odśwież witrynę. Zwróć uwagę na nowy wygląd i działanie listy galerii, a także nowe pole wyszukiwania znajdujące się u góry. Następnie wpisz wyraz w polu wyszukiwania (na przykład Tulips), aby rozpocząć wyszukiwanie w galerii zdjęć.

    Galeria korzystająca ze stylu listview z filtrowaniem

    Galeria korzystająca ze stylu listview z filtrowaniem

    Podsumowując, użyto przepisu View Mobilizer w celu utworzenia kopii widoku indeksu z sufiksem "mobile". Ten sufiks wskazuje ASP.NET MVC 4, że każde żądanie wygenerowane na urządzeniu przenośnym będzie używać tej kopii indeksu. Ponadto zaktualizowano wersję mobilną widoku indeksu w celu korzystania z aplikacji jQuery Mobile w celu zwiększenia wyglądu i działania witryny na urządzeniach przenośnych.

  5. Wróć do programu Visual Studio i otwórz Site.Mobile.css znajdujący się w folderze Zawartość .

  6. Napraw położenie tytułu zdjęcia, aby było wyświetlane po prawej stronie obrazu. W tym celu dodaj następujący kod do pliku Site.Mobile.css .

    CSS

    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

  7. Naciśnij CTRL + S , aby zapisać zmiany.

  8. Wróć do emulatora systemu Windows Phone i odśwież witrynę. Zwróć uwagę, że tytuł zdjęcia jest teraz prawidłowo umieszczony.

    Tytuł umieszczony po prawej stronie obrazu

    Tytuł umieszczony po prawej stronie obrazu

Zadanie 3 — motywy mobilne jQuery

Każdy układ i widżet w aplikacji jQuery Mobile jest zaprojektowany wokół nowej, obiektowo zorientowanej struktury CSS, która umożliwia zastosowanie kompletnego ujednoliconego motywu projektu wizualnego do witryn i aplikacji.

Domyślny motyw jQuery Mobile zawiera 5 próbek, które otrzymują litery (a, b, c, d, e) w celu szybkiego dokumentacji.

W tym zadaniu zaktualizujesz układ mobilny, aby używał innego motywu niż domyślny.

  1. Wróć do programu Visual Studio.

  2. Otwórz plik _Layout.Mobile.cshtml znajdujący się w pliku Views\Shared.

  3. Znajdź element div z zestawem roli danych na "page" i zaktualizuj motyw danych na "e".

    <div data-role="page" data-theme="e">

  4. Naciśnij CTRL + S , aby zapisać zmiany.

  5. Odśwież witrynę w emulatorze systemu Windows Phone i zwróć uwagę na nowy schemat kolorów.

    Układ mobilny z innym schematem kolorów

    Układ mobilny z innym schematem kolorów

Zadanie 4 . Używanie składnika przełącznika widoku i funkcji zastępowania przeglądarki

Konwencją dla stron internetowych zoptymalizowanych pod kątem urządzeń przenośnych jest dodanie linku, którego tekst jest podobny do widoku pulpitu lub trybu pełnej witryny, który umożliwia użytkownikom przełączenie się na wersję klasyczną strony. Pakiet jQuery.Mobile.MVC zawiera przykładowy składnik przełącznika widoków do tego celu używany w widoku _Layout.Mobile.cshtml .

Łącze, aby przełączyć się do widoku pulpitu

Łącze, aby przełączyć się do widoku pulpitu

Przełącznik widoków używa nowej funkcji o nazwie Przesłonięcia przeglądarki. Ta funkcja umożliwia aplikacji traktowanie żądań tak, jakby pochodziły z innej przeglądarki (agenta użytkownika) niż te, z których rzeczywiście pochodzą.

W tym zadaniu zapoznasz się z przykładową implementacją przełącznika widoku dodanego przez narzędzie jQuery.Mobile.MVC i nową przeglądarką przesłaniającą funkcje w ASP.NET MVC 4.

  1. Wróć do programu Visual Studio.

  2. Otwórz widok _Layout.Mobile.cshtml znajdujący się w folderze Views\Shared i zwróć uwagę, że składnik przełącznika widoku jest przywoływany jako widok częściowy.

    Układ urządzeń przenośnych przy użyciu składnika View-Switcher

    Układ urządzeń przenośnych przy użyciu składnika View-Switcher

  3. Otwórz widok częściowy _ViewSwitcher.cshtml.

    Widok częściowy używa nowej metody ViewContext.HttpContext.GetOverriddenBrowser() w celu określenia źródła żądania internetowego i wyświetlenia odpowiedniego linku, aby przełączyć się do widoków klasycznych lub mobilnych.

    Metoda GetOverriddenBrowser zwraca wystąpienie HttpBrowserCapabilitiesBase , które odpowiada agentowi użytkownika obecnie ustawionemu dla żądania (rzeczywiste lub zastąpione). Możesz użyć tej wartości, aby uzyskać właściwości, takie jak IsMobileDevice.

    Widok przełącznika częściowego

    Widok przełącznika częściowego

  4. Otwórz klasę ViewSwitcherController.cs znajdującą się w folderze Controllers . Sprawdź, czy akcja SwitchView jest wywoływana przez łącze w składniku ViewSwitcher i zwróć uwagę na nowe metody HttpContext.

    • Metoda HttpContext.ClearOverriddenBrowser() usuwa wszelkie zastąpione agenta użytkownika dla bieżącego żądania.

    • Metoda HttpContext.SetOverriddenBrowser() zastępuje rzeczywistą wartość agenta użytkownika żądania przy użyciu określonego agenta użytkownika.
      Kontroler przełącznika widoku
      Kontroler przełącznika widoku

      Zastępowanie przeglądarki to podstawowa funkcja ASP.NET MVC 4, która jest również dostępna, nawet jeśli nie instalujesz pakietu jQuery.Mobile.MVC. Jednak ta funkcja ma wpływ tylko na widok, układ i widok częściowy i nie ma wpływu na żadne funkcje, które zależą od obiektu Request.Browser.

Zadanie 5 . Dodawanie przełącznika widoków w widoku pulpitu

W tym zadaniu zaktualizujesz układ pulpitu, aby zawierał przełącznik widoków. Umożliwi to użytkownikom mobilnym powrót do widoku mobilnego podczas przeglądania widoku pulpitu.

  1. Odśwież witrynę w emulatorze systemu Windows Phone.

  2. Kliknij link Widok pulpitu w górnej części galerii. Zwróć uwagę, że w widoku pulpitu nie ma przełącznika widoków, aby umożliwić powrót do widoku dla urządzeń przenośnych.

  3. Wróć do programu Visual Studio i otwórz widok _Layout.cshtml .

  4. Znajdź sekcję logowania i wstaw wywołanie w celu renderowania widoku częściowego _ViewSwitcher poniżej widoku częściowego _LogOnPartial . Następnie naciśnij CTRL + S , aby zapisać zmiany.

    <div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>

  5. Naciśnij CTRL + S , aby zapisać zmiany.

  6. Odśwież stronę w emulatorze systemu Windows Phone i kliknij dwukrotnie ekran, aby powiększyć. Zwróć uwagę, że na stronie głównej jest teraz wyświetlany link Widok mobilny, który przełącza się z urządzenia przenośnego na widok pulpitu.

    Wyświetlanie przełącznika renderowanego w widoku pulpitu

    Wyświetlanie przełącznika renderowanego w widoku pulpitu

  7. Przejdź ponownie do widoku urządzenia przenośnego i przejdź do strony Informacje (http://localhost[port]/Strona główna/Informacje). Zwróć uwagę, że nawet jeśli nie utworzono widoku About.Mobile.cshtml, strona Informacje jest wyświetlana przy użyciu układu mobilnego (_Layout.Mobile.cshtml).

    Strona — informacje

    Strona — informacje

  8. Na koniec otwórz witrynę w przeglądarce internetowej pulpitu. Zwróć uwagę, że żaden z poprzednich aktualizacji nie miał wpływu na widok pulpitu.

    Widok pulpitu photoGallery

    Widok pulpitu photoGallery

Zadanie 6 . Tworzenie nowych trybów wyświetlania

Nowa funkcja trybów wyświetlania umożliwia aplikacji wybieranie widoków w zależności od przeglądarki, która generuje żądanie. Jeśli na przykład przeglądarka klasyczna zażąda strony głównej, aplikacja zwróci szablon Views\Home\Index.cshtml . Następnie, jeśli przeglądarka mobilna zażąda strony głównej, aplikacja zwróci szablon Views\Home\Index.mobile.cshtml .

W tym zadaniu utworzysz dostosowany układ dla urządzeń iPhone i będziesz musiał symulować żądania z urządzeń iPhone. W tym celu można użyć emulatora/symulatora telefonu iPhone (na przykład Electric Mobile Simulator) lub przeglądarki z dodatkami modyfikującymi agenta użytkownika. Aby uzyskać instrukcje dotyczące ustawiania ciągu agenta użytkownika w przeglądarce Safari w celu emulowania telefonu iPhone, zobacz How to let Safari pretend it's IE in David Alison's blog (Jak pozwolić przeglądarce Safari udawać, że jest to IE w blogu Davida Alisona).

Zwróć uwagę, że to zadanie jest opcjonalne i można kontynuować w całym laboratorium bez jego wykonywania.

  1. W programie Visual Studio naciśnij SHIFT + F5, aby zatrzymać debugowanie aplikacji.

  2. Otwórz Global.asax.cs i dodaj następującą instrukcję using.

    using System.Web.WebPages;

  3. Dodaj następujący wyróżniony kod do metody Application_Start.

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex03 — iPhone DisplayMode)

    protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

Zarejestrowano nową metodę DefaultDisplayMode o nazwie "iPhone" na statycznej liście statycznej DisplayModeProvider.Instance.Modes , która będzie dopasowana do każdego żądania przychodzącego. Jeśli żądanie przychodzące zawiera ciąg "iPhone", ASP.NET MVC znajdzie widoki, których nazwa zawiera sufiks "iPhone". Parametr 0 wskazuje, jak specyficzny jest nowy tryb; na przykład ten widok jest bardziej szczegółowy niż ogólna reguła ".mobile", która pasuje do żądań z urządzeń przenośnych.

Po uruchomieniu tego kodu po wygenerowaniu żądania przez przeglądarkę iPhone aplikacja będzie używać układu Views\Shared\_Layout.iPhone.cshtml , który zostanie utworzony w następnych krokach.

Uwaga

Ten sposób testowania żądania dla telefonu iPhone został uproszczony w celach demonstracyjnych i może nie działać zgodnie z oczekiwaniami dla każdego ciągu agenta użytkownika iPhone (na przykład test jest uwzględniany wielkość liter).

  1. Utwórz kopię pliku _Layout.Mobile.cshtml w folderze Views\Shared i zmień jego nazwę na "_Layout.iPhone.cshtml".
  2. Otwórz plik _Layout.iPhone.cshtml utworzony w poprzednim kroku.
  3. Znajdź element div z atrybutem roli danych ustawionym na stronę i zmień atrybut motywu danych na "a".
<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

Teraz masz 3 układy w aplikacji ASP.NET MVC 4:

  1. _Layout.cshtml: domyślny układ używany w przeglądarkach klasycznych.

  2. _Layout.mobile.cshtml: domyślny układ używany dla urządzeń przenośnych.

  3. _Layout.iPhone.cshtml: specyficzny układ dla urządzeń iPhone przy użyciu innego schematu kolorów, aby odróżnić się od _Layout.mobile.cshtml.

  4. Naciśnij F5, aby uruchomić aplikację i przejrzeć witrynę w emulatorze systemu Windows Phone.

  5. Otwórz symulator telefonu iPhone (zobacz dodatek C, aby uzyskać instrukcje dotyczące sposobu instalowania i konfigurowania symulatora iPhone'a) i przejdź do witryny. Zwróć uwagę, że każdy telefon używa określonego szablonu.

    Używanie różnych widoków dla każdego urządzenia przenośnego2

    Używanie różnych widoków dla każdego urządzenia przenośnego

Ćwiczenie 4. Używanie kontrolerów asynchronicznych

Program Microsoft .NET Framework 4.5 wprowadza nowe funkcje językowe w językach C# i Visual Basic, aby zapewnić nową podstawę asynchronii w programowaniu .NET. Ta nowa podstawa sprawia, że programowanie asynchroniczne jest podobne do programowania synchronicznego . Teraz możesz napisać metody akcji asynchronicznych w ASP.NET MVC 4 przy użyciu klasy AsyncController . Można użyć metod akcji asynchronicznych dla długotrwałych żądań powiązanych z procesorem CPU. Uniemożliwia to serwerowi sieci Web wykonywanie pracy podczas przetwarzania żądania. Klasa AsyncController jest zwykle używana do długotrwałych wywołań usługi sieci Web.

W tym ćwiczeniu wyjaśniono podstawy operacji asynchronicznej w ASP.NET MVC 4. Jeśli chcesz dowiedzieć się więcej, możesz zapoznać się z następującym artykułem: [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

Zadanie 1 — implementowanie kontrolera asynchronicznego

  1. Otwórz rozwiązanie Rozpocznij znajdujące się w folderze Source/Ex4-Async/Begin/. W przeciwnym razie możesz kontynuować korzystanie z rozwiązania końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.

    1. Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.

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

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

      Uwaga

      Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium trzeba będzie uruchomić te kroki.

  2. Otwórz klasę HomeController.cs z folderu Controllers .

  3. Dodaj następującą instrukcję using.

    using System.Threading.Tasks;

  4. Zaktualizuj klasę HomeController , aby dziedziczyła z AsyncController. Kontrolery pochodzące z AsyncController umożliwiają ASP.NET przetwarzania żądań asynchronicznych i nadal mogą obsługiwać metody akcji synchronicznych.

    public class HomeController : AsyncController
{

  5. Dodaj słowo kluczowe asynchroniczne do metody Index i ustaw, że zwraca typ ActionResult> zadania<.

    public async Task<ActionResult> Index()
{
    ...

    Uwaga

    Słowo kluczowe asynchroniczne jest jednym z nowych słów kluczowych zapewnianych przez program .NET Framework 4.5. Informuje kompilator, że ta metoda zawiera kod asynchroniczny. Obiekt Zadania reprezentuje operację asynchroniczną, która może zakończyć się w pewnym momencie w przyszłości.

  6. Zastąp klienta. Wywołanie getAsync() z pełną wersją asynchroniową przy użyciu słowa kluczowego await, jak pokazano poniżej.

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex04 — GetAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...

    Uwaga

    W poprzedniej wersji używano właściwości Result z obiektu Task , aby zablokować wątek do momentu zwrócenia wyniku (wersja synchronizacji).

    Dodanie słowa kluczowego await nakazuje kompilatorowi asynchroniczne oczekiwanie na zadanie zwrócone z wywołania metody. Oznacza to, że pozostała część kodu zostanie wykonana jako wywołanie zwrotne dopiero po zakończeniu oczekiwanej metody. Kolejną rzeczą, którą należy zauważyć, jest to, że nie trzeba zmieniać bloku try-catch, aby wykonać tę pracę: wyjątki, które występują w tle lub na pierwszym planie, będą nadal przechwytywane bez dodatkowej pracy przy użyciu procedury obsługi dostarczonej przez platformę.

  7. Zmień kod, aby kontynuować implementację asynchroniczną, zastępując wiersze nowym kodem, jak pokazano poniżej

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex04 — ReadAsStringAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  8. Uruchom aplikację. Nie zauważysz żadnych istotnych zmian, ale kod nie zablokuje wątku z puli wątków, co poprawi wykorzystanie zasobów serwera i poprawi wydajność.

    Uwaga

    Więcej informacji na temat nowych funkcji programowania asynchronicznego można znaleźć w laboratorium "Programowanie asynchroniczne na platformie .NET 4.5 z językiem C# i Visual Basic" zawarte w zestawie szkoleniowym Visual Studio.

Zadanie 2. Obsługa limitów czasu za pomocą tokenów anulowania

Metody akcji asynchronicznych, które zwracają wystąpienia zadań, mogą również obsługiwać limity czasu. W tym zadaniu zaktualizujesz kod metody index w celu obsługi scenariusza przekroczenia limitu czasu przy użyciu tokenu anulowania.

  1. Wróć do programu Visual Studio i naciśnij SHIFT + F5 , aby zatrzymać debugowanie.

  2. Dodaj następującą instrukcję using do pliku HomeController.cs .

    using System.Threading;

  3. Zaktualizuj akcję Indeks, aby otrzymać argument CancellationToken .

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

  4. Zaktualizuj wywołanie GetAsync, aby przekazać token anulowania.

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex04 — SendAsync z elementem CancellationToken)

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  5. Udekoruj metodę Index za pomocą atrybutu AsyncTimeout ustawionego na 500 milisekund i atrybutu HandleError skonfigurowanego do obsługi elementu TaskCanceledException przez przekierowanie do widoku limitu czasu.

    (Fragment kodu — ASP.NET laboratorium MVC 4 — Ex04 — atrybuty)

    [AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{

  6. Otwórz klasę PhotoController i zaktualizuj metodę Gallery , aby opóźnić wykonanie 1000 milisekund (1 sekundę) w celu symulowania długotrwałego zadania.

    public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}

  7. Otwórz plik Web.config i włącz błędy niestandardowe, dodając następujący element.

    <system.web>
  <customErrors mode="On"></customErrors>
  ...

  8. Utwórz nowy widok w obszarze Views\Shared o nazwie TimedOut i użyj układu domyślnego. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder Views\Shared i wybierz polecenie Dodaj | Wyświetl.

    Używanie różnych widoków dla każdego urządzenia przenośnego

    Używanie różnych widoków dla każdego urządzenia przenośnego

  9. Zaktualizuj zawartość widoku Limit czasu, jak pokazano poniżej.

    @{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

  10. Uruchom aplikację i przejdź do głównego adresu URL. Po dodaniu atrybutu Thread.Sleep z 1000 milisekund zostanie wyświetlony błąd przekroczenia limitu czasu wygenerowany przez atrybut AsyncTimeout i przechwycony przez atrybut HandleError .

    Obsłużony wyjątek przekroczenia limitu czasu

    Obsłużony wyjątek przekroczenia limitu czasu

Uwaga

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

Podsumowanie

W tym praktycznym laboratorium zaobserwowano niektóre nowe funkcje rezydentne w ASP.NET MVC 4. Omówiono następujące pojęcia:

  • Skorzystaj z ulepszeń szablonów projektów ASP.NET MVC, w tym nowego szablonu projektu aplikacji mobilnej
  • Użyj atrybutu viewport HTML5 i zapytań multimedialnych CSS, aby ulepszyć wyświetlanie na urządzeniach przenośnych
  • Używanie aplikacji jQuery Mobile do stopniowego ulepszania i tworzenia zoptymalizowanego pod kątem dotyku internetowego interfejsu użytkownika
  • Tworzenie widoków specyficznych dla urządzeń przenośnych
  • Przełączenie między widokami i widokami pulpitu w aplikacji za pomocą składnika przełącznika widoku
  • Tworzenie kontrolerów asynchronicznych przy użyciu obsługi zadań

Dodatek A: 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#)

  1. Umieść kursor, w którym chcesz wstawić kod.
  2. Zacznij wpisywać nazwę fragmentu kodu (bez spacji lub łączników).
  3. Zobacz, jak funkcja IntelliSense wyświetla pasujące nazwy fragmentów kodu.
  4. Wybierz poprawny fragment kodu (lub kontynuuj wpisywanie do momentu wybrania nazwy całego fragmentu kodu).
  5. Naciśnij dwukrotnie 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.
  2. Wybierz pozycję Wstaw fragment kodu , a następnie pozycję Moje fragmenty kodu.
  3. 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

Dodatek B: 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.

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

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

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

    Instalowanie programu Visual Studio Express

    Instalowanie programu Visual Studio Express

  4. Przeczytaj wszystkie licencje i postanowienia dotyczące produktów, a następnie kliknij pozycję 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.

    Ukończono instalację

    Ukończono instalację

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

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

    Kafelek programu VS Express dla sieci Web

Dodatek C: Instalowanie programu WebMatrix 2 i symulatora iPhone'a

Aby uruchomić witrynę na symulowanym urządzeniu iPhone, możesz użyć rozszerzenia WebMatrix "Electric Mobile Simulator for the iPhone". Ponadto można skonfigurować to samo rozszerzenie do uruchamiania symulatora z poziomu programu Visual Studio 2012.

Zadanie 1 — Instalowanie programu WebMatrix 2

  1. 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 sieci Web, możesz go otworzyć i wyszukać produkt "WebMatrix 2".

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

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

    Instalowanie programu WebMatrix 2

    Instalowanie programu WebMatrix 2

  4. Przeczytaj wszystkie licencje i postanowienia dotyczące produktów, a następnie kliknij pozycję 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.

    Ukończono instalację

    Ukończono instalację

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

Zadanie 2 . Instalowanie rozszerzenia symulatora telefonu iPhone

  1. Uruchom program WebMatrix i otwórz dowolną istniejącą witrynę sieci Web lub utwórz nową.

  2. Kliknij przycisk Uruchom na wstążce Narzędzia główne i wybierz pozycję Dodaj nowy.

    Dodawanie nowego rozszerzenia WebMatrix

    Dodawanie nowego rozszerzenia WebMatrix

  3. Wybierz pozycję Symulator telefonu iPhone i kliknij przycisk Zainstaluj.

    Przeglądanie rozszerzeń WebMatrix

    Przeglądanie rozszerzeń WebMatrix

  4. W szczegółach pakietu kliknij przycisk Zainstaluj , aby kontynuować instalację rozszerzenia.

    Rozszerzenie symulatora telefonu iPhone

    Rozszerzenie symulatora telefonu iPhone

  5. Przeczytaj i zaakceptuj rozszerzenie EULA.

    Umowa LICENCYJNA rozszerzenia WebMatrix

    Umowa LICENCYJNA rozszerzenia WebMatrix

  6. Teraz możesz uruchomić witrynę internetową z poziomu programu WebMatrix przy użyciu opcji Symulator telefonu iPhone.

    Uruchamianie przy użyciu telefonu iPhone

    Uruchamianie przy użyciu telefonu iPhone

Zadanie 3 — Konfigurowanie programu Visual Studio 2012 do uruchamiania symulatora telefonu iPhone

  1. Otwórz program Visual Studio 2012 i otwórz dowolną witrynę sieci Web lub utwórz nowy projekt.

  2. Kliknij strzałkę w dół z przycisku Uruchom i wybierz pozycję Przeglądaj za pomocą.

    Przeglądaj za pomocą

    Przeglądaj za pomocą

  3. W oknie dialogowym "Przeglądaj za pomocą" kliknij przycisk Dodaj.

  4. W oknie dialogowym "Dodaj program" użyj następujących wartości:

    • Program: C:\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe (zaktualizuj odpowiednio ścieżkę)

    • Argumenty: "1"

    • Przyjazna nazwa: iPhone Simulator

      Dodaj program

      Dodawanie programu do przeglądania za pomocą polecenia

  5. Kliknij przycisk OK i zamknij okna dialogowe.

  6. Teraz możesz uruchamiać aplikacje internetowe w symulatorze telefonu iPhone z poziomu programu Visual Studio 2012.

    Przeglądanie za pomocą symulatora telefonu iPhone

    Przeglądanie za pomocą symulatora telefonu iPhone

Dodatek D: publikowanie aplikacji ASP.NET MVC 4 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

  1. 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 witryny Azure Portal systemu Windows

    Zaloguj się do portalu zarządzania platformy Windows Azure

  2. Kliknij pozycję Nowy na pasku poleceń.

    Tworzenie nowej witryny sieci Web

    Tworzenie nowej witryny sieci Web

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

    Tworzenie nowej witryny sieci Web przy użyciu szybkiego tworzenia

  4. Poczekaj na utworzenie nowej witryny sieci Web.

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

    Przechodzenie do nowej witryny sieci Web

    Uruchomiona witryna sieci Web

    Uruchomiona witryna sieci Web

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

    Otwieranie stron zarządzania witrynami sieci Web

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

    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 internetowej w witrynach sieci Web platformy Windows Azure z poziomu programu Visual Studio.

    Zapisywanie pliku profilu publikowania

    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.

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

    Pulpit nawigacyjny serwera usługi SQL Database

  2. 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 tekstowychprzycisk add-client-ip-address-ok-button Początkowy adres IP i Końcowy adres IP, a następnie kliknij przycisk.

    Dodawanie adresu IP klienta

    Dodawanie adresu IP klienta

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

    Potwierdzanie zmian

    Potwierdzanie zmian

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

  1. Wróć do rozwiązania ASP.NET MVC 4. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt witryny internetowej 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ę 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

    Weryfikowanie połączenia

  4. Na stronie Ustawienia w sekcji Bazy danych kliknij przycisk obok pola tekstowego połączenia bazy danych (tj. 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 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

      Konfigurowanie parametry połączenia docelowej

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

    Parametry połączenia wskazujące usługę SQL Database

  8. Na stronie Wersja zapoznawcza kliknij pozycję Publikuj.

    Publikowanie aplikacji internetowej

    Publikowanie aplikacji internetowej

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

    Aplikacja opublikowana na platformie Windows Azure

    Aplikacja opublikowana na platformie Windows Azure