Udostępnij przez

Co nowego we wzorcu ASP.NET MVC 4

  • Artykuł

Według zespołu obozów internetowych

Pobierz zestaw szkoleniowy dla obozów internetowych

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

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 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 platforma do tworzenia aplikacji internetowych, które są zgodne ze wszystkimi popularnymi platformami urządzeń przenośnych, w tym Windows Phone, iPhone' i 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 zapewnianie 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 komputerów stacjonarnych. Poznasz również nowe przepisy dotyczące kodu na potrzeby generowania kodu oraz sposób, w jaki ASP.NET MVC 4 ułatwia pisanie metod akcji asynchronicznych przez obsługę typów zwracanych ActionResult> zadania<.

Uwaga

Wszystkie przykładowe kod i fragmenty kodu są zawarte w zestawie szkoleniowym Web Camps dostępnym w witrynie Microsoft-Web/WebCampTrainingKit Releases. Projekt specyficzny dla tego laboratorium jest dostępny w artykule Co nowego w Web Forms w 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żywanie atrybutu viewport HTML5 i zapytań multimedialnych CSS w celu ulepszenia wyświetlania na urządzeniach przenośnych
  • Używanie aplikacji jQuery Mobile do progresywnych ulepszeń i tworzenia interfejsu użytkownika internetowego zoptymalizowanego pod kątem dotyku
  • 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:

Konfigurowanie

W całym dokumencie laboratoryjnym zostanie wyświetlone polecenie wstawiania bloków kodu. Dla wygody większość tego kodu jest dostarczana jako fragmenty kodu Visual Studio Code, których można użyć 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.

Jeśli nie znasz fragmentów kodu 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 MVC 4 ASP.NET
  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 Końcowego zawierającego wynikowe rozwiązanie, które należy uzyskać po zakończeniu ćwiczeń. To rozwiązanie można użyć 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 szablonów 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 przyjrzysz 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 Projektu. W oknie dialogowym Nowy projekt wybierz pozycję 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 teraz tworzysz.

    Tworzenie nowego projektu Tworzenie

    Tworzenie nowego projektu

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

    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ęć klawiszy wymaganych w pliku, umożliwiając szybki i płynny przepływ pracy kodowania. Platforma Razor wykorzystuje istniejące umiejętności języka C# /VB (lub inne) i dostarcza składnię znaczników szablonu, która umożliwia niesamowity przepływ pracy budowy HTML.

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

    Szablony stylu nowoczesnego

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

    ASP.NET szablonów restyled MVC 4 restyled szablonów

    szablony restyled ASP.NET MVC 4

    Nowa strona kontaktowa Nowa strona kontaktowa

    Nowa strona kontaktów

    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 konieczności dostosowywania.

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

    ASP.NET szablon projektu 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 Logowania i Rejestrowania używane w szablonie ilustrują sposób użycia weryfikacji jQuery w celu zweryfikowania pól wejściowych po stronie klienta.

    Weryfikacja jQuery

    Weryfikacja 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

    Zwróć uwagę, że można łatwo włączyć uwierzytelnianie przy użyciu dowolnej usługi OpenID lub OAuth, takiej jak Facebook, Twitter, Microsoft itp.

  8. Naciśnij klawisz 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 mvc 4 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 z użyciem składni 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 szybko reagujących 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 Projektu . 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 domyślną), wybierz pozycję "Dodaj do rozwiązania" i kliknij przycisk OK.

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

    Tworzenie nowej aplikacji mobilnej ASP.NET MVC 4

    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ą open source na potrzeby zgodności przeglądarki mobilnej. Aplikacja jQuery Mobile stosuje progresywne ulepszenia dla przeglądarek mobilnych, które obsługują arkusze CSS i JavaScript. Stopniowe ulepszanie umożliwia wszystkim przeglądarkom wyświetlanie podstawowej zawartości strony internetowej, a jednocześnie umożliwia wyświetlanie rozbudowanej zawartości tylko przez najbardziej zaawansowane przeglądarki. Pliki JavaScript i CSS zawarte w stylu jQuery Mobile pomagają przeglądarkom mobilnym dopasować zawartość 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 klawisz F5 , aby uruchomić rozwiązanie.

  5. Otwórz emulator 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ę informacji. Zwróć uwagę, że styl witryny internetowej jest oparty 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 wykorzystać.

    Strony szablonu projektu na stronach szablonu projektu urządzenia przenośnego

    Strony szablonu projektu na urządzeniu przenośnym

  8. Nowy szablon używa również tagu metaportu 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ą na ekranie wirtualnym. Tag metaportu 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 metaportu Viewport nie zmieni domyślnego widoku przeglądarki.

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

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

Witryna po oznaczeniu tagu metaportu viewport witryna

Witryna po komentarzu do tagu metaportu viewport 10. W programie Visual Studio naciśnij klawisze SHIFT + F5 , aby zatrzymać debugowanie aplikacji. 11. Usuń komentarz z tagu metaportu viewport.

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

Zadanie 3 . Korzystanie z renderowania adaptacyjnego

W tym zadaniu poznasz inną metodę poprawnego renderowania strony internetowej na urządzeniach przenośnych i przeglądarkach sieci Web bez konieczności dostosowywania. Użyto już tagu meta Viewport o podobnym celu. Teraz poznasz kolejną zaawansowaną metodę: renderowanie adaptacyjne.

Renderowanie adaptacyjne to technika, która korzysta z 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 multimediów to: [Zakres: @media wszystkie | handheld | print | projekcja | ekran] ([property:value] i ... [property:value])

Przykłady zapytań multimedialnych: >@media wszystkie 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) { ... }: W przypadku urządzeń przenośnych (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 klawisz 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ę na to, 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 w Eksploratorze rozwiązań programu Visual Studio znajdującym się w folderze projekt zawartości . Naciśnij klawisze 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 klawisze CTRL + S , aby zapisać zmiany. Wróć do przeglądarki i naciśnij klawisze 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 styl <span class=@media po lewej stronie, a po prawej stronie styl zostanie pominięty" title="Po lewej stronie strona stosuje styl @media po prawej stronie jest pomijany" />

    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 stosowany styl <span class=@media po prawej stronie styl zostanie pominięty" title="Po lewej stronie strona stosuje styl @media po prawej stronie jest pomijany" />

    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 przy użyciu schludnego podejścia.

    Metadane Viewport i media CSS nie są specyficzne dla ASP.NET MVC 4, więc można korzystać z tych funkcji w dowolnej aplikacji internetowej.

  5. W programie Visual Studio naciśnij klawisze 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ę służącą 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 pozory 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 nie został jeszcze otwarty.

  2. Wybierz plik | Nowy | Polecenie menu Projektu . 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

    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 klawisz F5 , aby uruchomić rozwiązanie, a następnie przejdź do następującego adresu URL, aby przetestować pozorowaną usługę zdjęciową: 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 zdjęciowej

    Testowanie wyśmiewanej usługi zdjęciowej

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 ułatwiająca 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 .NET Framework.

Zadanie 2 . Wyświetlanie galerii zdjęć

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

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

  2. Utwórz klasę Photo w folderze Models . Aby to zrobić, kliknij prawym przyciskiem myszy folder Models , wybierz polecenie 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ć obiektu 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 wykonuje pętlę wszystkich zdjęć pobranych 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 Content projektu i 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 zdjęć galerii zdjęć

    Galeria

  11. W programie Visual Studio naciśnij klawisze 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 poznasz ASP.NET nowych funkcji 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 Begin 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 należy pobrać brakujące pakiety NuGet. W tym celu kliknij menu Project (Projekt ) i wybierz polecenie Manage NuGet Packages (Zarządzaj pakietami NuGet).

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

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

      Uwaga

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

  2. Otwórz konsolę menedżera pakietów, klikając opcję menu Narzędzia>Menedżera> pakietów NuGetMenedżer pakietów.

    Otwieranie konsoli Menedżera pakietów NuGet otwieranie konsoli Menedżera pakietów NuGet

    Otwieranie konsoli Menedżera pakietów NuGet

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

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

    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: to układ oparty na protokole jQuery Mobile zoptymalizowany 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ę na wersję klasyczną strony.
      Projekt z galerii zdjęć z obsługą urządzeń przenośnych

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

  4. Zarejestruj pakiety dla urządzeń przenośnych. 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 Windows Phone 7 znajdujący się w menu Start | Wszystkie programy | zestaw SDK Windows Phone 7.1 | Windows Phone Emulator.

  7. Na ekranie startowym telefonu otwórz program Internet Explorer. Sprawdź adres URL, pod którym uruchomiono aplikację, 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 Windows Phone, ponieważ plik jQuery.Mobile.MVC utworzył 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ęć Mobilny na

    Widok mobilny strony głównej galerii zdjęć

  8. W programie Visual Studio naciśnij klawisze 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 usługi jQuery Mobile, aby używać motywów mobilnych z pakietu jQuery.

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

    Uwaga

    Zwróć uwagę, że:

    • Atrybut data-role ustawiony na listview spowoduje renderowanie listy przy użyciu stylów listview.

    • 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 klawisze CTRL + S , aby zapisać zmiany.

  4. Przejdź do emulatora 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 do 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 Indeks, aby używać aplikacji jQuery Mobile do ulepszania wyglądu i działania witryny na urządzeniach przenośnych.

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

  6. Napraw pozycjonowanie 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 klawisze CTRL + S , aby zapisać zmiany.

  8. Wróć do emulatora 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 uzyskania krótkiej informacji.

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 ról danych na "page" i zaktualizuj motyw danych na "e".

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

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

  5. Odśwież witrynę w emulatorze 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 View-Switcher 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 przejście na wersję klasyczną strony. Pakiet jQuery.Mobile.MVC zawiera przykładowy składnik przełącznika widoku do tego celu używany w widoku _Layout.Mobile.cshtml .

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

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

Przełącznik widoków używa nowej funkcji o nazwie Zastępowanie 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 oraz nowe funkcje zastępowania przeglądarki 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ę na przywoływany składnik przełącznika widoku jako widok częściowy.

    Układ mobilny przy użyciu View-Switcher składnika

    Układ mobilny 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 aktualnie ustawionemu dla żądania (rzeczywiste lub zastępowane). Możesz użyć tej wartości, aby uzyskać właściwości, takie jak IsMobileDevice.

    Widok częściowy widoku Przełącznik

    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ępowane 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.
      ViewSwitcher Controller
      Kontroler przełącznika widoku

      Zastępowanie przeglądarki to podstawowa funkcja ASP.NET MVC 4, która jest również dostępna nawet wtedy, gdy nie zainstalujesz 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 View-Switcher 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 Windows Phone.

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

  3. Wstecz 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 klawisze CTRL + S , aby zapisać zmiany.

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

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

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

  6. Odśwież stronę w emulatorze Windows Phone i kliknij dwukrotnie ekran, aby powiększyć. Zwróć uwagę, że na stronie głównej jest teraz wyświetlany link Widok dla urządzeń przenośnych , który przełącza się z aplikacji mobilnej do widoku klasycznego.

    Wyświetl przełącznik renderowany 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 o stronie

    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.

    PhotoGallery desktop view

    Widok pulpitu galerii 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 emulacji telefonu iPhone, zobacz 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 klawisze 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 zgodna z każdym żądaniem przychodzącym. 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 odpowiada żądaniom z urządzeń przenośnych.

Po uruchomieniu tego kodu, gdy przeglądarka iPhone wygeneruje żądanie, aplikacja użyje 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 do celów demonstracyjnych i może nie działać zgodnie z oczekiwaniami dla każdego ciągu agenta użytkownika telefonu iPhone (na przykład test jest uwzględniany wielkość liter).

  1. Utwórz kopię pliku _Layout.Mobile.cshtml w folderze Views\Shared i zmień nazwę kopii na "_Layout.iPhone.cshtml".
  2. Otwórz plik _Layout.iPhone.cshtml utworzony w poprzednim kroku.
  3. Znajdź element div z atrybutem data-role 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: konkretny układ dla urządzeń iPhone przy użyciu innego schematu kolorów, aby odróżnić się od _Layout.mobile.cshtml.

  4. Naciśnij klawisz F5, aby uruchomić aplikację i przeglądać witrynę w emulatorze Windows Phone.

  5. Otwórz symulator telefonu iPhone (zobacz dodatek C , aby uzyskać instrukcje dotyczące sposobu instalowania i konfigurowania symulatora telefonu iPhone) 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ęzyku C# i Visual Basic, aby zapewnić nową podstawę asynchronii w programowaniu platformy .NET. Ta nowa podstawa sprawia, że programowanie asynchroniczne jest podobne do programowania synchronicznego . Teraz możesz napisać metody akcji asynchronicznej w ASP.NET MVC 4 przy użyciu klasy AsyncController . Możesz użyć metod akcji asynchronicznych dla długotrwałych żądań powiązanych z procesorem CPU. Zapobiega to blokowaniu działania serwera sieci Web 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 dokładniej poznać, 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 asynchronicznego kontrolera

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

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

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

      Uwaga

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

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

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

    using System.Threading.Tasks;

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

    public class HomeController : AsyncController
{

  5. Dodaj słowo kluczowe asynchroniczne do metody Index i zwróć typ ActionResult> zadania<.

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

    Uwaga

    Asynchroniczne słowo kluczowe jest jednym z nowych słów kluczowych, które udostępnia .NET Framework 4.5; informuje kompilator, że ta metoda zawiera kod asynchroniczny. Obiekt Task reprezentuje operację asynchroniczną, która może zostać ukończona w pewnym momencie w przyszłości.

  6. Zastąp klienta. Wywołanie GetAsync() z pełną wersją asynchronizową 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 reszta 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 w celu wykonania tej pracy: wyjątki, które występują w tle lub na pierwszym planie, nadal będą 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 zwiększa wykorzystanie zasobów serwera i poprawia 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 Time-Outs przy użyciu tokenów anulowania

Asynchroniczne metody akcji zwracające wystąpienia zadań mogą również obsługiwać limity czasu. W tym zadaniu zaktualizujesz kod metody Index, aby obsłużyć scenariusz przekroczenia limitu czasu przy użyciu tokenu anulowania.

  1. Wstecz do programu Visual Studio i naciśnij klawisze 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 anulowaniemToken)

    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 Limit 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ć wykonywanie 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 pozycję Dodaj | Wyświetl.

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

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

  9. Zaktualizuj zawartość widoku TimedOut , 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 1000 milisekund zostanie wyświetlony błąd przekroczenia limitu czasu wygenerowany przez atrybut AsyncTimeout i przechwycony przez atrybut HandleError .

    limitu czasu obsługiwanyWyjątek przez wyjątek

    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 z nowych funkcji rezydentów 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żywanie atrybutu viewport HTML5 i zapytań multimedialnych CSS w celu ulepszenia wyświetlania na urządzeniach przenośnych
  • Używanie aplikacji jQuery Mobile do progresywnych ulepszeń i tworzenia interfejsu użytkownika internetowego zoptymalizowanego pod kątem dotyku
  • 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 w zasięgu ręki. Dokument laboratorium zawiera informacje o tym, kiedy można ich używać, jak pokazano na poniższej ilustracji.

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

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

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

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

Zacznij wpisywać nazwę fragmentu kodu Rozpocznij wpisywanie

Zacznij wpisywać nazwę fragmentu kodu

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

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

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

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

Aby dodać fragment kodu przy użyciu myszy (C#, Visual Basic i XML)

  1. Kliknij prawym przyciskiem myszy miejsce, w którym chcesz wstawić fragment kodu.
  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 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 Visual Studio Express 2012 dla sieci Web

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

  1. Przejdź do strony [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternatywnie, jeśli masz już zainstalowany Instalator platformy internetowej, możesz go otworzyć i wyszukać produkt "Visual Studio Express 2012 for Web with Windows Azure SDK" (Visual Studio Express 2012 dla sieci Web przy użyciu zestawu Windows Azure SDK).

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

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

    Instalowanie Visual Studio Express

    Instalowanie Visual Studio Express

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

    Akceptowanie postanowień licencyjnych

    Akceptowanie postanowień licencyjnych

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

    Postęp instalacji

    Postęp instalacji

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

    Ukończona instalacja

    Instalacja została ukończona

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

  8. Aby otworzyć Visual Studio Express dla sieci Web, przejdź do ekranu startowego i zacznij pisać "VS Express", a następnie kliknij kafelek VS Express for Web.

    Kafelek programu VS Express dla sieci Web

    Kafelek programu VS Express dla sieci Web

Dodatek 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 [https://go.microsoft.com/?linkid=9809776](https://go.microsoft.com/?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 przycisk Akceptuję , aby kontynuować.

    Akceptowanie postanowień licencyjnych Akceptowanie

    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.

    Zakończono instalację

    Instalacja została ukończona

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

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

    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.

    Rozszerzenie WebMatrix

    Umowa LICENCYJNA rozszerzenia WebMatrix

  6. Teraz możesz uruchomić witrynę internetową z poziomu programu WebMatrix przy użyciu opcji symulatora 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ą polecenia Przeglądaj za pomocą polecenia

    Przeglądaj za pomocą polecenia

  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: symulator telefonu iPhone

      Dodaj program Dodaj

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

Ten dodatek pokaże, jak utworzyć nową witrynę internetową z portalu zarządzania platformy Windows Azure i opublikować aplikację uzyskaną w ramach 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 bezpłatne hostowanie 10 ASP.NET witryn internetowych, a następnie skalowanie w miarę wzrostu ruchu. Możesz zarejestrować się tutaj.

    Zaloguj się do systemu Windows Azure Portal

    Zaloguj się do portalu zarządzania platformy Windows Azure

  2. Kliknij pozycję Nowy na pasku poleceń.

    Tworzenie nowej witryny sieci Web Tworzenie

    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ć nią. 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

    Witryna sieci Web z uruchomioną witryną sieci Web

    Uruchomiona witryna sieci Web

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

    Otwieranie stron zarządzania witrynami sieci Web

  7. Na stronie Pulpit nawigacyjny w sekcji Szybki rzut oka 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 metody publikacji z włączoną obsługą. Profil publikowania zawiera adresy URL, poświadczenia użytkownika i ciągi bazy danych wymagane do nawiązania połączenia z poszczególnymi punktami końcowymi, dla których jest włączona metoda publikacji. Program Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web i Microsoft Visual Studio 2012 obsługują odczytywanie profilów publikowania w celu zautomatyzowania konfiguracji tych programów do publikowania aplikacji internetowych w witrynach internetowych platformy Windows Azure.

    Pobieranie profilu publikowania witryny sieci Web Pobieranie

    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

    Zapisywanie pliku profilu publikowania

Zadanie 2 — Konfigurowanie serwera bazy danych

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

  1. Do przechowywania bazy danych aplikacji potrzebny będzie serwer SQL Database. Serwery SQL Database można wyświetlić z subskrypcji w portalu zarządzania platformy Windows Azure napulpicie nawigacyjnym serweraSql Databases | | Server. Jeśli nie masz utworzonego serwera, możesz go utworzyć za pomocą 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 SQL Database

    pulpit nawigacyjny serwera SQL Database

  2. W następnym zadaniu przetestujesz połączenie bazy danych z programu Visual Studio, dlatego musisz uwzględnić lokalny adres IP na liście dozwolonych adresów IP serwera. Aby to zrobić, 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 add-client-ip-address-ok-button .

    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 ASP.NET MVC 4 przy użyciu narzędzia Web Deploy

  1. Wstecz do rozwiązania ASP.NET MVC 4. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt witryny internetowej i wybierz pozycję Publikuj.

    Publikowanie aplikacji

    Publikowanie witryny sieci Web

  2. Zaimportuj profil publikowania zapisany w pierwszym zadaniu.

    Importowanie profilu publikowania Importowanie profilu publikowania

    Importowanie profilu publikowania

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

    Uwaga

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

    Weryfikowanie połączenia

    Weryfikowanie połączenia

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

    sieci Web wdrażania w sieci Web wdróż konfigurację sieci WebKonfiguracja

    Konfiguracja wdrażania sieci Web

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

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

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

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

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

      Konfigurowanie parametry połączenia docelowejKonfigurowanie

      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

    Tworzenie bazy danych

  7. Parametry połączenia, którego użyjesz do nawiązania połączenia z SQL Database na platformie Windows Azure, jest wyświetlana w polu tekstowym Domyślne połączenie. Następnie kliknij przycisk Dalej.

    Parametry połączenia wskazujące SQL Database

    Parametry połączenia wskazujące SQL Database

  8. Na stronie Podgląd kliknij pozycję Publikuj.

    Publikowanie aplikacji internetowej Publikowanie

    Publikowanie aplikacji internetowej

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

    Aplikacja opublikowana w aplikacji platformy Azure systemu Windows

    Aplikacja opublikowana na platformie Windows Azure