Tworzenie aplikacji platformy ASP.NET Core w programie Visual Studio dla komputerów Mac

ASP.NET Core to międzyplatformowa platforma typu open source do tworzenia nowoczesnych opartych na chmurze aplikacji połączonych z Internetem, takich jak aplikacje i usługi internetowe, aplikacje IoT i zaplecza mobilne. ASP.NET Core można uruchamiać na .NET Core lub w .NET Framework uruchomieniowych. Został on sytektowany w celu zapewnienia zoptymalizowanej struktury tworzenia aplikacji, które są wdrażane w chmurze lub uruchamiane lokalnie. Składa się ona ze składników modułowych z minimalnym obciążeniem, dzięki czemu można zachować elastyczność podczas konstruowania rozwiązań. Możesz tworzyć i uruchamiać aplikacje ASP.NET Core na wiele platform w systemach Windows, Mac i Linux. ASP.NET Core jest open source naGitHub .

W tym laboratorium utworzysz i zbadasz aplikację ASP.NET Core za pomocą Visual Studio dla komputerów Mac.

Cele

  • Tworzenie aplikacji internetowej ASP.NET Core
  • Zapoznaj się z ASP.NET Core hostingiem, konfiguracją i modelem oprogramowania pośredniczącego
  • Debugowanie ASP.NET Core internetowej

Wymagania wstępne

Docelowi odbiorcy

To laboratorium jest przeznaczone dla deweloperów, którzy znają język C#, chociaż głębokie doświadczenie nie jest wymagane.

Zadanie 1. Tworzenie nowej ASP.NET Core aplikacji

  1. Uruchom Visual Studio dla komputerów Mac.

  2. Wybierz pozycję > nowe rozwiązanie.

  3. Wybierz kategorię .NET Core > App i szablon ASP.NET Core Web App (C#). Kliknij przycisk Dalej.

    Zrzut ekranu przedstawiający sposób wybierania szablonu aplikacji internetowej dla nowego projektu.

  4. Wprowadź nazwę "CoreLab", a następnie kliknij przycisk Utwórz, aby utworzyć projekt. Ukończenie tego procesu może potrwać chwilę.

    Zrzut ekranu przedstawiający konfigurację aplikacji internetowej i Project nazwę.

Zadanie 2. Przewodnik po rozwiązaniu

  1. Szablon domyślny będzie tworzyć rozwiązanie z pojedynczym projektem ASP.NET Core o nazwie CoreLab. Rozwiń węzeł projektu, aby uwidocznić jego zawartość.

    Zrzut ekranu przedstawiający wybrany węzeł projektu rozwiązania, aby wyświetlić jego zawartość, w tym foldery i pliki.

  2. Ten projekt jest zgodny z paradygmatem model-view-controller (MVC) w celu zapewnienia jasnego podziału obowiązków między danymi (modelami), prezentacją (widokami) i funkcjami (kontrolerami). Otwórz plik HomeController.cs z folderu Controllers.

    Zrzut ekranu przedstawiający projekt rozwiązania z wybraną klasą C# o nazwie HomeController.

  3. Klasa HomeController convention-by obsługuje wszystkie żądania przychodzące, które zaczynają się od /Home. Metoda Index obsługuje żądania do katalogu głównego (na przykład ), a inne metody obsługują żądania do ścieżki nazwanej zgodnie z konwencją, takie jak http://site.com/Home About() obsługujące żądania do http://site.com/Home/About . Oczywiście wszystko to można skonfigurować. Warto pamiętać, że kontroler HomeController jest domyślnym kontrolerem w nowym projekcie, dlatego żądania do katalogu głównego witryny ( ) przechodziłyby przez proces http://site.com Index() kontrolera HomeController tak samo jak żądania do http://site.com/Home lub http://site.com/Home/Index .

    Zrzut ekranu przedstawiający klasę języka C# o nazwie HomeController.

  4. Projekt ma również folder Widoki, który zawiera inne foldery mapowane na każdy kontroler (a także jeden dla widoków udostępnionych. Na przykład plik CSHTML widoku (rozszerzenie HTML) dla ścieżki /Home/About będzie w lokalizacji Views/Home/About.cshtml. Otwórz ten plik.

    Zrzut ekranu przedstawiający projekt rozwiązania z wybranym plikiem C S H T M L o nazwie About (Informacje).

  5. Ten plik CSHTML używa składnia Razor do renderowania kodu HTML w oparciu o kombinację standardowych tagów i wbudowanego języka C#. Więcej informacji na ten temat można znaleźć w dokumentacji online.

    Zrzut ekranu przedstawiający część pliku C S H T M L z składnia Razor.

  6. Rozwiązanie zawiera również folder wwwroot, który będzie katalogiem głównym witryny internetowej. Zawartość witryny statycznej, taką jak CSS, obrazy i biblioteki JavaScript, można umieścić bezpośrednio w ścieżkach, które mają być w momencie wdrożenia witryny.

    Zrzut ekranu przedstawiający rozwiązanie z wybranym w folderze głównym.

  7. Istnieją również różne pliki konfiguracji, które służą do zarządzania projektem, jego pakietami i aplikacją w czasie wykonywania. Na przykład domyślna konfiguracja aplikacji jest przechowywana wappsettings.js na stronie. Zagnieżdżone poniżej appsettings.jsw pliku jestappsettings.Development.js pliku. W tym miejscu można przesłonić niektóre/wszystkie te ustawienia dla każdego środowiska. Visual Studio dla komputerów Mac zagnieżdża pliki w ten sposób przy użyciu tej samej logiki co Visual Studio for Windows, dzięki czemu pliki, do których trzeba uzyskać dostęp częściej, znajdują się na początku.

    Zrzut ekranu przedstawiający widok szczegółów z wybranym plikiem JSON.

Zadanie 3. Zrozumienie sposobu hostowanej aplikacji

  1. Z Eksplorator rozwiązań otwórz program Program.cs. Jest to program inicjujący, który uruchomi aplikację.

    Zrzut ekranu przedstawiający rozwiązanie z wybranym plikiem źródłowym języka C# o nazwie Program.

  2. Chociaż w tym miejscu znajdują się tylko dwa wiersze kodu, są one istotne. Rozbijmy je. Najpierw jest tworzony nowy webHostBuilder. ASP.NET Core aplikacje wymagają hosta, na którym mają być wykonywane. Host musi implementować interfejs IWebHost, który uwidacznia kolekcje funkcji i usług oraz metodę Start. Host jest zazwyczaj tworzony przy użyciu wystąpienia klasy WebHostBuilder, które tworzy i zwraca wystąpienie klasy WebHost. WebHost odwołuje się do serwera, który będzie obsługiwać żądania.

    Zrzut ekranu przedstawiający metodę Main w języku C# z instrukcjeą, która inicjuje zmienną o nazwie host z typem WebHostBuilder.

  3. Chociaż WebHostBuilder jest odpowiedzialny za tworzenie hosta, który będzie uruchamiać serwer dla aplikacji, wymaga podania serwera, który implementuje IServer . Domyślnie jest to Kestrel, międzyplatformowy serwer internetowy dla usługi ASP.NET Core oparty na libuv, czyli międzyplatformowej asynchronicznej bibliotece we/wy.

    Zrzut ekranu przedstawiający metodę Main w języku C# z wyróżnieniami zmiennej hosta ustawiających serwer za pomocą metody UseKestrel.

  4. Następnie zostanie ustawiony katalog główny zawartości serwera. Określa miejsce wyszukiwania plików zawartości, takich jak pliki widoku MVC. Domyślny katalog główny zawartości to folder, z którego jest uruchamiana aplikacja.

    Zrzut ekranu przedstawiający metodę Main w języku C# z wyróżnioną zmienną hosta ustawianą jako główny katalog zawartości dla serwera za pomocą metody UseContentRoot.

  5. Jeśli aplikacja musi współpracować z serwerem internetowym Internet Information Services (IIS), metoda UseIISIntegration powinna zostać wywołana w ramach budowania hosta. Nie powoduje to skonfigurowania serwera, tak jak w przypadku funkcji UseKestrel. Aby używać usług IIS ASP.NET Core, należy określić zarówno wartość UseKestrel, jak i wartość UseIISIntegration. Kestrel jest przeznaczony do uruchamiania za serwerem proxy i nie powinien być wdrażany bezpośrednio z Internetem. UseIISIntegration określa usługi IIS jako serwer zwrotnego serwera proxy, ale ma to zastosowanie tylko w przypadku uruchamiania na maszynach z usługami IIS. Jeśli aplikacja zostanie wdrożona w Windows, pozostaw ją w. W przeciwnym razie nie zaszkodzi.

    Zrzut ekranu przedstawiający metodę Main w języku C# z wyróżnieniami zmiennej hosta ustawiających zwrotny serwer proxy za pomocą metody UseIISIntegration.

  6. Bardziej przejrzystym rozwiązaniem jest oddzielanie ładowania ustawień od ładowania początkowego aplikacji. Aby to łatwo zrobić, program UseStartup jest wywoływany w celu określenia, że klasa Startup ma być wywoływana w celu ładowania ustawień i innych zadań uruchamiania, takich jak wstawianie oprogramowania pośredniczącego do potoku HTTP. Możesz mieć wiele wywołań UseStartup z oczekiwaniem, że każde z nich zastąpi poprzednie ustawienia zgodnie z potrzebami.

    Zrzut ekranu przedstawiający metodę Main w języku C# z wyróżnieniami zmiennej hosta ustawiających klasę startową przy użyciu opcji UseStartup.

  7. Ostatnim krokiem tworzenia hosta IWebHost jest wywołanie kompilacji.

    Zrzut ekranu przedstawiający metodę Main języka C# wyróżnianą zmienną hosta za pomocą metody Build.

  8. Klasy IWebHost są wymagane do zaimplementowania nieblokującego uruchamiania, ASP.NET Core projekty mają metodę rozszerzenia o nazwie Run, która opakuje element Start z kodem blokującym, dzięki czemu nie trzeba ręcznie zapobiegać natychmiastowemu zamykaniu metody.

    Zrzut ekranu przedstawiający metodę Main w języku C# wyróżnianą kropką hosta instrukcji Run.

Zadanie 4. Uruchamianie i debugowanie aplikacji

  1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł projektu CoreLab i wybierz pozycję Opcje.

    Zrzut ekranu przedstawiający menu kontekstowe rozwiązania CoreLab z wyróżnieniami Opcje.

  2. Okno dialogowe Project Opcje aplikacji zawiera wszystko, czego potrzebujesz, aby dostosować sposób budowania i uruchamiania aplikacji. Wybierz węzeł Uruchom > konfiguracji > domyślny w panelu po lewej stronie.

  3. Zaznacz pole wyboru Uruchom w konsoli zewnętrznej i usuń zaznaczenie pola wyboru Wstrzymaj dane wyjściowe konsoli. Zwykle aplikacja hostowana samodzielnie nie miałaby widocznej konsoli, ale zamiast tego rejestrowałaby wyniki w oknie Dane wyjściowe. Na potrzeby tego laboratorium pokażemy je również w osobnym oknie, chociaż nie trzeba tego robić podczas normalnego opracowywania.

  4. Kliknij przycisk OK.

    Zrzut ekranu przedstawiający kartę Uruchom konfigurację Ogólne z wybraną oknie Uruchom w konsoli zewnętrznej i nie wybraną wstrzymać danych wyjściowych konsoli.

  5. Naciśnij klawisz F5, aby skompilować i uruchomić aplikację. Alternatywnie możesz wybrać pozycję Uruchom > rozpocznij debugowanie.

  6. Visual Studio dla komputerów Mac spowoduje uruchomienie dwóch okien. Pierwszy to okno konsoli, które zapewnia widok aplikacji serwera hostowanej samodzielnie.

    Zrzut ekranu przedstawiający okno konsoli dla aplikacji serwera hostowanej samodzielnie.

  7. Drugi to typowe okno przeglądarki do testowania witryny. O ile przeglądarka wie, ta aplikacja może być hostowana w dowolnym miejscu. Kliknij pozycję Informacje, aby przejść do tej strony.

    Zrzut ekranu przedstawiający okno przeglądarki do testowania witryny z wyróżniona opcją Informacje.

  8. Między innymi strona z informacjami renderuje tekst ustawiony w kontrolerze.

    Zrzut ekranu przedstawiający wynik wybrania opcji Informacje, która jest stroną Informacje.

  9. Nie otwieraj obu okien i wróć do Visual Studio dla komputerów Mac. Otwórz kontrolery/homecontroller.cs, jeśli nie jest jeszcze otwarty.

    Zrzut ekranu przedstawiający rozwiązanie z ponownie wybraną klasą C# HomeController.

  10. Ustaw punkt przerwania w pierwszym wierszu metody About. Możesz to zrobić, klikając margines lub ustawiając kursor w wierszu i naciskając klawisz F9. Ten wiersz ustawia niektóre dane w kolekcji ViewData, która jest renderowana na stronie CSHTML w pliku Views/Home/About.cshtml.

    Zrzut ekranu przedstawiający metodę About z zestawem punktów przerwania.

  11. Wróć do przeglądarki i odśwież stronę z informacjami. Spowoduje to wyzwolenie punktu przerwania w Visual Studio dla komputerów Mac.

  12. Aby wyświetlić jego dane, najedziej kursorem myszy na członka ViewData. Możesz również rozwinąć jego podrzędne elementy członkowskie, aby wyświetlić zagnieżdżone dane.

    Zrzut ekranu przedstawiający punkt przerwania z rozwiniętymi danymi.

  13. Usuń punkt przerwania aplikacji przy użyciu tej samej metody, która została użyta do dodania.

  14. Otwórz okno Views/Home/About.cshtml.

  15. Zmień tekst "additional" na "changed" (zmieniono) i zapisz plik.

    Zrzut ekranu przedstawiający plik C S H T M L o nazwie About ze zmianą jego tekstu.

  16. Naciśnij przycisk Kontynuuj, aby kontynuować wykonywanie.

    Zrzut ekranu przedstawiający okno Visual Studio wyróżnione przyciskiem Kontynuuj.

  17. Wróć do okna przeglądarki, aby zobaczyć zaktualizowany tekst. Ta zmiana może zostać w dowolnym momencie i nie musi wymagać punktu przerwania debugera. Odśwież przeglądarkę, jeśli zmiana nie zostanie natychmiast odzwierciedlona.

    Zrzut ekranu przedstawiający stronę Informacje, tym razem ze zmienionym tekstem.

  18. Zamknij okno przeglądarki testowej i konsolę aplikacji. Spowoduje to również zatrzymanie debugowania.

Zadanie 5. Konfiguracja uruchamiania aplikacji

  1. Z Eksplorator rozwiązań otwórz skrypt Startup.cs. Niektóre czerwone zygzyki początkowo można zauważyć, gdy pakiety NuGet są przywracane w tle, a kompilator Roslyn budowania kompletnego obrazu zależności projektu.

    Zrzut ekranu przedstawiający rozwiązanie z wybranym plikiem klasy C# o nazwie Uruchamianie.

  2. Znajdź metodę Startup. Ta sekcja definiuje początkową konfigurację aplikacji i jest gęsto spakowana. Podzielmy ją na kroki.

    Zrzut ekranu przedstawiający metodę Uruchamiania klasy Startup.

  3. Metoda rozpoczyna się od zainicjowania klasy ConfigurationBuilder i ustawienia jej ścieżki podstawowej.

    Zrzut ekranu metody Startup przedstawiający instrukcje inicjowania zmiennej o nazwie builder o typie ConfigurationBuilder.

  4. Następnie ładuje wymagany plik appsettings.jspliku.

    Zrzut ekranu metody Startup przedstawiający zmienną konstruktora używającą metody AddJsonFile w celu dodania pliku JSON o nazwie appsettings.

  5. Następnie próbuje załadować do pliku plik appsettings.jsśrodowisko, które zastąpiłoby istniejące ustawienia. Jest to na przykład plikappsettings.Development.js używany w danym środowisku. Aby dowiedzieć się więcej na temat konfiguracji w ASP.NET Core, zapoznaj się z tematem .

    Zrzut ekranu metody Startup przedstawiający zmienną konstruktora używającą metody AddJsonFile w celu dodania pliku JSON appsettings specyficznego dla środowiska.

  6. Na koniec zmienne środowiskowe są dodawane do konstruktora konfiguracji, a konfiguracja jest budowaną i ustawianą do użycia.

    Zrzut ekranu metody Startup przedstawiający zmienną konstruktora dodającą zmienne środowiskowe, a następnie używającej metody Build do skompilowania konfiguracji.

Zadanie 6. Wstawianie oprogramowania pośredniczącego aplikacji

  1. Znajdź metodę Configure w klasie Startup. Jest to miejsce, w którym całe oprogramowanie pośredniczące jest konfigurowane tak, aby można je było wstawić do potoku HTTP i użyć do przetwarzania każdego żądania do serwera. Chociaż ta metoda jest wywoływana tylko raz, zawartość metod (takich jak UseStaticFiles) może być wykonywana przy każdym żądaniu.

    Zrzut ekranu przedstawiający metodę Configure w klasie Startup.

  2. Możesz również dodać dodatkowe oprogramowanie pośredniczące do wykonania w ramach potoku. Dodaj poniższy kod po aplikacji. Użyj plikuStaticFiles, aby automatycznie dodać nagłówek X-Test do każdej odpowiedzi wychodzącej. Funkcja IntelliSense pomoże ukończyć kod podczas wpisywania.

    app.Use(async (context, next) =>
    {
        context.Response.Headers.Add("X-Test", new[] { "Test value" });
        await next();
    });
    
  3. Naciśnij klawisz F5, aby skompilować i uruchomić projekt.

  4. Możemy użyć przeglądarki, aby sprawdzić nagłówki, aby sprawdzić, czy zostały dodane. Poniższe instrukcje są dla przeglądarki Safari, ale można to zrobić w przeglądarce Chrome lub Firefox.

  5. Gdy przeglądarka załaduje witrynę, wybierz pozycję Safari > Preferencje.

  6. Na karcie Zaawansowane zaznacz menu Pokaż tworzenie na pasku menu i zamknij okno dialogowe.

    Zrzut ekranu przedstawiający okienko Zaawansowane w oknie dialogowym Preferencje przeglądarki Safari z wybraną opcją Pokaż menu Opracowywanie na pasku menu.

  7. Wybierz pozycję Opracuj > Pokaż zasoby strony.

  8. Odśwież okno przeglądarki, aby nowo otwarte narzędzia deweloperskie mogą śledzić i analizować ruch i zawartość.

  9. Strona HTML hosta lokalnego renderowana przez serwer będzie elementem wybranym domyślnie.

    Zrzut ekranu przedstawiający stronę hosta lokalnego H T M L.

  10. Rozwiń pasek boczny Szczegóły.

    Zrzut ekranu przedstawiający kontrolkę używaną do rozwijania paska bocznego Szczegóły.

  11. Przewiń w dół paska bocznego, aby zobaczyć nagłówek odpowiedzi dodany wcześniej w kodzie.

    Zrzut ekranu przedstawiający nagłówek odpowiedzi o nazwie XTest z wartością Test.

  12. Zamknij okno przeglądarki i konsolę, jeśli są spełnione.

Podsumowanie

W tym laboratorium nauczyliśmy się, jak rozpocząć tworzenie aplikacji ASP.NET Core za pomocą Visual Studio dla komputerów Mac. Jeśli chcesz poznać tworzenie bardziej kompletnej aplikacji bazy danych filmów, zobacz samouczek Wprowadzenie do ASP.NET Core MVC.