Samouczek: rozpoczynanie pracy z językami C# i ASP.NET Core w Visual Studio

W tym samouczku na temat tworzenia aplikacji w języku C# za pomocą ASP.NET Core utworzysz aplikację internetową w języku C# ASP.NET Core aplikacji Visual Studio.

Ten samouczek przedstawia sposób wykonania następujących czynności:

  • Tworzenie projektu programu Visual Studio
  • Tworzenie aplikacji internetowej w języku C# ASP.NET Core aplikacji internetowej
  • Wprowadzaj zmiany w aplikacji internetowej
  • Eksplorowanie funkcji środowiska IDE
  • Uruchom aplikację internetową

Wymagania wstępne

Do ukończenia Visual Studio tego samouczka jest konieczne Visual Studio. Odwiedź stronę Visual Studio plików do pobrania, aby uzyskać bezpłatną wersję.

Do ukończenia Visual Studio tego samouczka jest konieczne Visual Studio. Odwiedź stronę Visual Studio plików do pobrania, aby uzyskać bezpłatną wersję.

Tworzenie projektu

Najpierw utworzysz projekt ASP.NET Core projektu. Typ projektu zawiera wszystkie pliki szablonów potrzebne do tworzenia w pełni funkcjonalnej witryny internetowej.

  1. Otwórz program Visual Studio 2017.

  2. Na górnym pasku menu wybierz pozycję Nowy > > plik Project.

  3. W oknie dialogowym Project w okienku po lewej stronie rozwiń węzeł Visual C#, rozwiń węzeł Sieć Web, a następnie wybierz pozycję .NET Core. W środkowym okienku wybierz pozycję ASP.NET Core Web Application. Następnie nadaj plikowi nazwę MyCoreApp i wybierz przycisk OK.

    ASP.NET Core projektu aplikacji internetowej w oknie dialogowym Project w Visual Studio IDE.

Dodawanie obciążenia (opcjonalnie)

Jeśli nie widzisz szablonu projektu ASP.NET Core Web Application, możesz go uzyskać, dodając obciążenie tworzenie aplikacji ASP.NET aplikacji internetowych. To obciążenie można dodać na jeden z dwóch następujących sposobów, w zależności od tego, Visual Studio zainstalowano aktualizacje programu 2017 na komputerze.

Opcja 1. Użyj okna dialogowego Project Nowe ustawienia

  1. Wybierz link Otwórz Instalator programu Visual Studio w lewym okienku okna dialogowego Project nowy. W zależności od ustawień wyświetlania może być konieczne przewinięcie ekranu, aby je wyświetlić.

    Wybierz link Open Instalator programu Visual Studio (Otwórz Instalator programu Visual Studio) w oknie Project dialogowym New Project (Nowa wersja).

  2. Po uruchomieniu Instalator programu Visual Studio wybierz pakiet ASP.NET i tworzenie aplikacji internetowych, a następnie wybierz pozycję Modyfikuj. Visual Studio może być trzeba zamknąć podczas instalowania wybranego obciążenia.

    Międzyplatformowe obciążenie programowe platformy .NET Core w Instalator programu Visual Studio.

Opcja 2. Korzystanie z paska menu Narzędzia

  1. Anuluj poza Nową Project okno dialogowe. Następnie na górnym pasku menu wybierz pozycję NarzędziaPozyskaj > narzędzia i funkcje.

  2. Po uruchomieniu Instalator programu Visual Studio wybierz pakiet ASP.NET i tworzenie aplikacji internetowych, a następnie wybierz pozycję Modyfikuj. Visual Studio może być trzeba zamknąć podczas instalowania wybranego obciążenia.

Dodawanie szablonu projektu

  1. W oknie dialogowym ASP.NET Core Web Application wybierz szablon projektu Aplikacja internetowa.

  2. Sprawdź, ASP.NET Core 2.1 jest wyświetlana w górnym menu rozwijanych. Następnie wybierz przycisk OK.

    Nowe ASP.NET Core aplikacji internetowej.

    Uwaga

    Jeśli nie widzisz wersji ASP.NET Core 2.1 z górnego menu rozwijanego, upewnij się, że używasz najnowszej wersji Visual Studio. Aby uzyskać więcej informacji na temat aktualizowania instalacji, zobacz update Visual Studio do najnowszej wersji. .

  1. W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.

    Zrzut ekranu przedstawia okno uruchamiania Visual Studio. Opcja Utwórz nowy projekt jest wyróżniona.

  2. W oknie Tworzenie nowego projektu wybierz pozycję C# z listy Język. Następnie wybierz pozycję Windows z listy platform, a pozycję Internet z listy typów projektów.

    Po zastosowaniu filtrów języka, platformy i typu projektu wybierz szablon ASP.NET Core Web App, a następnie wybierz przycisk Dalej.

    Zrzut ekranu przedstawia ASP.NET Core projektu aplikacji internetowej wyróżniony w oknie dialogowym Project Aplikacji internetowej.

    Uwaga

    Jeśli szablon aplikacji internetowej nie jest ASP.NET Core, możesz go zainstalować w oknie Tworzenie nowego projektu. W komunikacie Nie znaleziono tego, czego szukasz? w dolnej części listy szablonów wybierz link Zainstaluj więcej narzędzi i funkcji.

    Zrzut ekranu przedstawia link Zainstaluj więcej narzędzi i funkcji, który jest częścią komunikatu Nie można znaleźć tego, czego szukasz.

    Następnie w witrynie Instalator programu Visual Studio pozycję ASP.NET i tworzenie aplikacji internetowych.

    Zrzut ekranu przedstawia międzyplatformowe obciążenie programowe platformy NET Core w Instalator programu Visual Studio.

    Wybierz pozycję Modyfikuj w Instalator programu Visual Studio. Może zostać wyświetlony monit o zapisanie pracy. Następnie wybierz pozycję Kontynuuj, aby zainstalować obciążenie.

  3. W oknie Configure your new project ( Konfigurowanie nowego projektu) wprowadź MyCoreApp w Project nazwa projektu. Następnie wybierz pozycję Dalej.

    Zrzut ekranu przedstawia okno Konfigurowanie nowego projektu z wprowadzonym w polu nazwy Project MyCoreApp.

  4. W oknie Dodatkowe informacje sprawdź, czy program .NET Core 3.1 pojawia się w polu Target Framework . W tym oknie możesz włączyć obsługę platformy Docker i dodać obsługę uwierzytelniania. Menu rozwijane typ uwierzytelniania ma następujące cztery opcje:

    • Brak. Brak uwierzytelniania.
    • Indywidualne konta. Te uwierzytelnienia są przechowywane w lokalnej bazie danych lub bazie danych opartej na platformie Azure.
    • Platforma tożsamości Microsoft. Ta opcja używa usługi Active Directory, Azure AD lub Microsoft 365 do uwierzytelniania.
    • Windows. Odpowiednie dla aplikacji intranetowych.

    Pozostaw pole Enable Docker (Włącz platformę Docker ) niezaznaczone i wybierz opcję None (Brak) w polu Authentication Type (Typ uwierzytelniania). Następnie wybierz pozycję Utwórz.

    Zrzut ekranu przedstawia ustawienia domyślne w oknie Dodatkowe informacje. Wartość framework to .NET Core 3.1.

    Visual Studio spowoduje otwarcie nowego projektu.

  1. W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.

    Zrzut ekranu przedstawia okno uruchamiania Visual Studio. Opcja Utwórz nowy projekt jest wyróżniona.

  2. W oknie Tworzenie nowego projektu wybierz pozycję C# z listy Język. Następnie wybierz pozycję Windows z listy platform, a pozycję Internet z listy typów projektów.

    Po zastosowaniu filtrów języka, platformy i typu projektu wybierz szablon ASP.NET Core Web App, a następnie wybierz przycisk Dalej.

    Zrzut ekranu przedstawia ASP.NET Core projektu aplikacji internetowej wybrany i wyróżniony na stronie Tworzenie nowego projektu.

    Uwaga

    Jeśli szablon aplikacji internetowej nie jest ASP.NET Core, możesz go zainstalować w oknie Tworzenie nowego projektu. W komunikacie Nie znaleziono tego, czego szukasz? w dolnej części listy szablonów wybierz link Zainstaluj więcej narzędzi i funkcji.

    Zrzut ekranu przedstawia link Zainstaluj więcej narzędzi i funkcji, który jest częścią komunikatu Nie można znaleźć tego, czego szukasz.

    Następnie w witrynie Instalator programu Visual Studio wybierz obciążenie Tworzenie aplikacji ASP.NET sieci Web.

    Zrzut ekranu przedstawia ASP.NET tworzenia aplikacji i aplikacji internetowych w Instalator programu Visual Studio.

    Wybierz pozycję Modyfikuj w Instalator programu Visual Studio. Może zostać wyświetlony monit o zapisanie pracy. Następnie wybierz pozycję Kontynuuj, aby zainstalować obciążenie.

  3. W oknie Configure your new project ( Konfigurowanie nowego projektu) wprowadź MyCoreApp w Project nazwa projektu. Następnie wybierz pozycję Dalej.

    Zrzut ekranu przedstawia okno Konfigurowanie nowego projektu z wprowadzonym w polu nazwy Project MyCoreApp.

  4. W oknie Dodatkowe informacje sprawdź, czy program .NET 6.0 jest wyświetlany w polu Target Framework . W tym oknie możesz włączyć obsługę platformy Docker i dodać obsługę uwierzytelniania. Menu rozwijane typ uwierzytelniania ma następujące cztery opcje:

    • Brak. Brak uwierzytelniania.
    • Indywidualne konta. Te uwierzytelnienia są przechowywane w lokalnej bazie danych lub bazie danych opartej na platformie Azure.
    • Platforma tożsamości Microsoft. Ta opcja używa usługi Active Directory, Azure AD lub Microsoft 365 do uwierzytelniania.
    • Windows. Odpowiednie dla aplikacji intranetowych.

    Pozostaw niezaznaczone pole Enable Docker (Włącz platformę Docker ) i wybierz opcję None (Brak) w polu Authentication Type (Typ uwierzytelniania). Następnie wybierz pozycję Utwórz.

    Zrzut ekranu przedstawia ustawienia domyślne w oknie Dodatkowe informacje. Wartość framework to .NET 6.0.

    Visual Studio spowoduje otwarcie nowego projektu.

Informacje o rozwiązaniu

To rozwiązanie jest zgodna ze wzorcem projektowym strony Razor . Wzorzec projektowy MVC (Model-View-Controller) różni się tym, że usprawnione jest dołączanie kodu modelu i kontrolera do strony Razor.

Przewodnik po rozwiązaniu

  1. Szablon projektu tworzy rozwiązanie z jednym projektem o ASP.NET Core o nazwie MyCoreApp. Wybierz kartę Eksplorator rozwiązań , aby wyświetlić jej zawartość.

    Zrzut ekranu przedstawia projekt MyCoreApp wybrany w Eksplorator rozwiązań w Visual Studio.

  2. Rozwiń folder Strony , a następnie rozwiń pozycję About.cshtml.

    Zrzut ekranu przedstawia plik About dot c s h t m l wybrany w Eksplorator rozwiązań w Visual Studio.

  3. Wyświetl plik About.cshtml w edytorze kodu.

    Zrzut ekranu przedstawia tekst pliku About dot c s h t m l w Visual Studio kodu.

  4. Wybierz plik About.cshtml.cs .

    Zrzut ekranu przedstawia plik About dot c s h t m l dot c s wybrany w Eksplorator rozwiązań w Visual Studio.

  5. Wyświetl plik About.cshtml.cs w edytorze kodu.

    Zrzut ekranu przedstawia zawartość pliku About dot c s h t m l dot c s w edytorze Visual Studio kodu.

  6. Projekt zawiera folder wwwroot , który jest katalogiem głównym witryny internetowej. Rozwiń folder, aby wyświetlić jego zawartość.

    Zrzut ekranu przedstawia w w folderze głównym wybranego w Eksplorator rozwiązań w Visual Studio.

    Zawartość witryny statycznej można— umieszczaćw sposób CSS, obrazy i biblioteki JavaScript— pośrednio w ścieżkach, w których mają być.

  7. Projekt zawiera również pliki konfiguracji, które zarządzają aplikacją internetową w czasie uruchamiania. Domyślna konfiguracja aplikacji jest przechowywana w pliku appsettings.json. Można jednak przesłonić te ustawienia przy użyciu ustawień appsettings. Development.json. Rozwiń węzeł appsettings.json , aby wyświetlić appsettings. Plik Development.json .

    Zrzut ekranu przedstawia wybraną i rozwiniętą kropkę appsettings j son w Eksplorator rozwiązań w Visual Studio.

Uruchamianie, debugowanie i wprowadzanie zmian

  1. Wybierz przycisk IIS Express pasku narzędzi, aby skompilować i uruchomić aplikację w trybie debugowania. Alternatywnie naciśnij klawisz F5 lub przejdź do pozycji DebugujStart > Debugowanie na pasku menu.

    Zrzut ekranu przedstawiający przycisk I S Express wyróżniony na pasku narzędzi Visual Studio.

    Uwaga

    Jeśli zostanie wyświetlony komunikat o błędzie Nie można nawiązać połączenia z serwerem internetowym "IIS Express", zamknij Visual Studio a następnie ponownie wyzłoń program jako administrator. Możesz to zrobić, klikając prawym przyciskiem myszy ikonę Visual Studio menu Start, a następnie wybierając opcję Uruchom jako administrator z menu kontekstowego.

    Może również zostać wyświetlony komunikat z pytaniem, czy chcesz zaakceptować certyfikat SSL Express usług IIS. Aby wyświetlić kod w przeglądarce internetowej, wybierz pozycję Tak, a następnie wybierz pozycję Tak , jeśli zostanie wyświetlony komunikat z ostrzeżeniem o zabezpieczeniach.

  2. Visual Studio zostanie otwarte okno przeglądarki. Na pasku menu powinny zostać wtedy wyświetlony strony Strona główna, Informacje i Kontakt. Jeśli nie widzisz stron, wybierz element menu "hamburger", aby je wyświetlić.

    Zrzut ekranu przedstawia projekt MyCoreApp i element menu "hamburger" wyróżniony na pasku menu aplikacji internetowej.

  3. Wybierz pozycję Informacje na pasku menu.

    Zrzut ekranu przedstawia wyróżnione informacje na pasku menu aplikacji internetowej.

    Między innymi strona Informacje w przeglądarce renderuje tekst ustawiony w pliku About.cshtml .

    Zrzut ekranu przedstawia stronę Informacje w aplikacji internetowej.

  4. Wróć do Visual Studio, a następnie naciśnij klawisze Shift+F5, aby zatrzymać debugowanie. Ta akcja zamyka projekt w oknie przeglądarki.

  5. W Visual Studio wybierz pozycję About.cshtml. Następnie usuń wyraz inny i zastąp go plikiem i katalogiem.

    Zrzut ekranu przedstawia zawartość pliku About dot c s h t m l w Visual Studio kodu.

  6. Wybierz pozycję About.cshtml.cs. Następnie wyczyść dyrektywy using w górnej części pliku przy użyciu następującego skrótu:

    Najechaj kursorem myszy lub wybierz wyszaną dyrektywę using . Żarówka Szybkie akcje pojawi się tuż poniżej cyka lub na lewym marginesie. Wybierz żarówkę, a następnie wybierz pozycję Usuń niepotrzebne usings.

    Zrzut ekranu przedstawia wyróżnione przycisk Usuń niepotrzebne użycia.  Znajduje się on poniżej ikony żarówki Szybkie akcje.

    Visual Studio usuwa niepotrzebne dyrektywy using z pliku.

  7. Następnie w metodzie OnGet() zmień treść na następujący kod:

    public void OnGet()
    {
        string directory = Environment.CurrentDirectory;
        Message = String.Format("Your directory is {0}.", directory);
    }
    
  8. Zwróć uwagę, że w obszarze Środowisko i Ciąg są wyświetlane dwa podkreślenia faliste. Zostaną wyświetlone faliste podkreślenia, ponieważ te typy nie są w zakresie.

    Zrzut ekranu przedstawia znaczniki błędów w postaci falistych podkreśleń dla środowiska i ciągu w edytorze kodu.

    Otwórz pasek narzędzi Lista błędów , aby wyświetlić tam te same błędy. Jeśli nie widzisz paska narzędzi Lista błędów, przejdź do pozycji ViewError > List (Lista błędów) na górnym pasku menu.

    Zrzut ekranu przedstawia pasek narzędzi Lista błędów w Visual Studio z listami Environment (Środowisko) i String (Ciąg).

  9. Naprawmy ten błąd. W edytorze kodu umieść kursor w każdym wierszu zawierającym błąd, a następnie wybierz żarówkę Szybkie akcje na lewym marginesie. Następnie z menu rozwijanego wybierz pozycję using System; aby dodać tę dyrektywę na początku pliku i usunąć błędy.

    Zrzut ekranu przedstawia opcje Szybkich akcji z menu rozwijanego z najechania kursorem myszy na pozycję System.

  10. Naciśnij klawisze CtrlS+, aby zapisać zmiany, a następnie naciśnij klawisz F5, aby otworzyć projekt w przeglądarce internetowej.

  11. W górnej części witryny internetowej wybierz pozycję Informacje , aby wyświetlić zmiany.

    Zrzut ekranu przedstawia stronę Informacje na stronie internetowej ze zmianami.

  12. Zamknij przeglądarkę internetową, naciśnij klawisz ShiftF5+, aby zatrzymać debugowanie.

Zmienianie strony Informacje

  1. W Eksplorator rozwiązań rozwiń folder Strony , a następnie wybierz pozycję About.cshtml.

    Zrzut ekranu przedstawia kropkę c s h t m l wybraną w węźle Strony w Eksplorator rozwiązań.

    Plik About.cshtml odpowiada stronie o tytule Informacje w aplikacji internetowej, która jest uruchamiana w przeglądarce internetowej.

    Zrzut ekranu przedstawia stronę Informacje dla aplikacji internetowej w oknie przeglądarki.

    W edytorze kodu zobaczysz kod HTML dla tekstu wyświetlanego na stronie Informacje.

    Zrzut ekranu przedstawia plik About dot c s h t m l (Informacje) dla strony głównej Visual Studio edytorze kodu.

  2. Zastąp pole Użyj tego obszaru, aby podać dodatkowy tekst informacji Hello world!

    Zrzut ekranu przedstawiający plik About dot c s h t m l w edytorze kodu Visual Studio z domyślnym tekstem zmienionym na Hello world!

  3. W Eksplorator rozwiązań rozwiń pozycję About.cshtml , a następnie wybierz pozycję About.cshtml.cs. Ten plik odpowiada również stronie Informacje w przeglądarce internetowej.

    Zrzut ekranu przedstawia plik About dot c s h t m l dot c s wybrany w obszarze węzła Informacje o kropce c s h t m l w Eksplorator rozwiązań.

    W edytorze kodu zobaczysz kod języka C#, który zawiera tekst w obszarze opisu aplikacji na stronie Informacje.

    Zrzut ekranu przedstawia kod C Sharp dla obszaru opisu aplikacji w edytorze kodu.

  4. Zastąp tekst twojej strony opisu aplikacji tekstem What's my message? (Co to jest mój komunikat?)

    Zrzut ekranu w edytorze kodu przedstawia tekst zmieniony z Opis aplikacji w tym miejscu na Co to jest mój komunikat?

  5. Wybierz IIS Express lub naciśnij klawisze CtrlF5+, aby uruchomić aplikację i otworzyć ją w przeglądarce internetowej.

    Zrzut ekranu przedstawia przycisk IIS Express wyróżniony na pasku narzędzi dla Visual Studio

  6. Nowe zmiany zostaną wprowadzone w przeglądarce internetowej na stronie Informacje .

    Zrzut ekranu przedstawia stronę Informacje dla aplikacji internetowej w oknie przeglądarki. Zaktualizowany tekst to What's my message? (Co to jest mój komunikat?) Hello World!

  7. Zamknij przeglądarkę internetową, naciśnij klawisz ShiftF5+, aby zatrzymać debugowanie, i zapisz projekt. Teraz możesz zamknąć Visual Studio.

Przeglądanie pracy

Wyświetl następującą animację, aby sprawdzić pracę, która została ukończona w poprzedniej sekcji:

Animowany plik GIF przedstawia wszystkie kroki zmiany tekstu strony Informacje.

Przewodnik po rozwiązaniu

  1. Szablon projektu tworzy rozwiązanie z jednym projektem o ASP.NET Core o nazwie MyCoreApp. Wybierz kartę Eksplorator rozwiązań , aby wyświetlić jej zawartość.

    Zrzut ekranu przedstawia projekt MyCoreApp wybrany w Eksplorator rozwiązań w Visual Studio.

  2. Rozwiń folder Strony .

    Zrzut ekranu przedstawia zawartość folderu Pages w Eksplorator rozwiązań w Visual Studio..

  3. Wybierz plik Index.cshtml i wyświetl go w edytorze kodu.

    Zrzut ekranu przedstawiający plik Index dot c s h t m l otwarty w Visual Studio edytorze kodu.

  4. Każdy plik cshtml ma skojarzony plik kodu. Aby otworzyć plik kodu w edytorze, rozwiń węzeł Index.cshtml w Eksplorator rozwiązań, a następnie wybierz plik Index.cshtml.cs .

    Zrzut ekranu przedstawiający plik Index dot c s h t m l wybrany w Eksplorator rozwiązań w Visual Studio.

  5. Wyświetl plik Index.cshtml.cs w edytorze kodu.

    Zrzut ekranu przedstawiający plik Index dot c s h t t m l dot c s otwarty w Visual Studio edytorze kodu.

  6. Projekt zawiera folder wwwroot , który jest katalogiem głównym witryny internetowej. Rozwiń folder, aby wyświetlić jego zawartość.

    Zrzut ekranu przedstawia w w folderze głównym wybrane w Eksplorator rozwiązań w Visual Studio.

    Zawartość witryny statycznej można umieszczaćw— sposób css, obrazy i biblioteki Języka JavaScript— pośrednio w ścieżkach, w których mają być.

  7. Projekt zawiera również pliki konfiguracji, które zarządzają aplikacją internetową w czasie uruchamiania. Domyślna konfiguracja aplikacji jest przechowywana w pliku appsettings.json. Można jednak przesłonić te ustawienia przy użyciu ustawień appsettings. Development.json. Rozwiń plik appsettings.json , aby wyświetlić appsettings. Plik Development.json .

    Zrzut ekranu przedstawia wybraną i rozwiniętą kropkę appsettings j son w Eksplorator rozwiązań w Visual Studio.

Uruchamianie, debugowanie i wprowadzanie zmian

  1. Wybierz przycisk IIS Express na pasku narzędzi, aby skompilować i uruchomić aplikację w trybie debugowania. Alternatywnie naciśnij klawisz F5 lub przejdź do pozycji DebugujStart > Debugowanie na pasku menu.

    Zrzut ekranu przedstawiający przycisk I S Express wyróżniony na pasku narzędzi Visual Studio.

    Uwaga

    Jeśli zostanie wyświetlony komunikat o błędzie Nie można nawiązać połączenia z serwerem internetowym "IIS Express", zamknij Visual Studio, a następnie ponownie wyzłoń program jako administrator. Możesz to zrobić, klikając prawym przyciskiem myszy ikonę Visual Studio menu Start, a następnie wybierając opcję Uruchom jako administrator z menu kontekstowego.

    Może również zostać wyświetlony komunikat z pytaniem, czy chcesz zaakceptować certyfikat SSL Express usług IIS. Aby wyświetlić kod w przeglądarce internetowej, wybierz pozycję Tak, a następnie wybierz pozycję Tak , jeśli zostanie wyświetlony komunikat z ostrzeżeniem o zabezpieczeniach.

  2. Visual Studio zostanie otwarte okno przeglądarki. Na pasku menu powinny zostać wtedy wyświetlony strony Strona główna i Prywatność.

  3. Wybierz pozycję Prywatność na pasku menu. Strona Prywatność w przeglądarce renderuje tekst ustawiony w pliku Privacy.cshtml .

    Zrzut ekranu przedstawiający stronę Prywatność aplikacji MyCoreApp z następującym tekstem: Użyj tej strony, aby szczegółowo opisano zasady ochrony prywatności witryny.

  4. Wróć do Visual Studio, a następnie naciśnij klawisze Shift+F5, aby zatrzymać debugowanie. Ta akcja zamyka projekt w oknie przeglądarki.

  5. W Visual Studio otwórz privacy.cshtml do edycji. Następnie usuń zdanie. Użyj tej strony, @ViewData aby szczegółowo opisano zasady ochrony prywatności witryny i zastąpić ją tą stroną, która jest w trakcie budowy ["Sygnatura czasowa"].

    Zrzut ekranu przedstawiający plik Privacy dot c s h t m l otwarty w Visual Studio edytorze kodu ze zaktualizowanym tekstem.

  6. Teraz dokonajmy zmiany kodu. Wybierz pozycję Privacy.cshtml.cs. Następnie wyczyść dyrektywy using w górnej części pliku za pomocą następującego skrótu:

    Najechaj kursorem myszy lub wybierz wyszadną dyrektywę using . Żarówka Szybkie akcje pojawi się tuż pod lewą Wybierz żarówkę, a następnie wybierz pozycję Usuń niepotrzebne usings.

    Zrzut ekranu przedstawiający plik Privacy dot c s h t m l w edytorze kodu Visual Studio z etykietką narzędzia Szybkie akcje ujmną dla wyszarzony przy użyciu dyrektywy using.

    Teraz wybierz pozycję Podgląd zmian, aby zobaczyć, co się zmieni.

    Zrzut ekranu przedstawia okno dialogowe Podgląd zmian. Okno dialogowe pokazuje usuwaną dyrektywę i wyświetla podgląd zmiany kodu po usunięciu.

    Wybierz przycisk Zastosuj. Visual Studio usuwa niepotrzebne dyrektywy using z pliku .

  7. Następnie w metodzie OnGet() zmień treść na następujący kod:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToShortDateString();
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. Zwróć uwagę, że w obszarze DateTime jest wyświetlane faliste podkreślenie. Zostanie wyświetlone faliste podkreślenie, ponieważ ten typ nie znajduje się w zakresie.

    Zrzut ekranu przedstawia znacznik błędu w postaci falistego podkreślenia dla daty/Visual Studio edytorze kodu.

    Otwórz pasek narzędzi Lista błędów , aby wyświetlić tam te same błędy. Jeśli nie widzisz paska narzędzi Lista błędów, przejdź do pozycji ViewError > List na górnym pasku menu.

    Zrzut ekranu przedstawia pasek narzędzi Lista błędów w Visual Studio z wyświetloną datą/godziną.

  9. Naprawmy ten błąd. W edytorze kodu umieść kursor na wierszu zawierającym błąd, a następnie wybierz żarówkę Szybkie akcje na lewym marginesie. Następnie z menu rozwijanego wybierz pozycję using System; aby dodać tę dyrektywę na początku pliku i usunąć błędy.

    Zrzut ekranu przedstawia opcje Szybkich akcji z menu rozwijanego z najechania kursorem myszy na pozycję System.

  10. Naciśnij klawisz F5 , aby otworzyć projekt w przeglądarce internetowej.

  11. W górnej części witryny internetowej wybierz pozycję Prywatność , aby wyświetlić zmiany.

    Zrzut ekranu przedstawiający zaktualizowaną stronę Prywatność, która zawiera wprowadzone zmiany.

  12. Zamknij przeglądarkę internetową, naciśnij klawisz ShiftF5+, aby zatrzymać debugowanie.

Zmienianie strony głównej

  1. W Eksplorator rozwiązań rozwiń folder Strony , a następnie wybierz pozycję Index.cshtml.

    Zrzut ekranu przedstawiający wybraną kropkę indeksu w węźle Strony w Eksplorator rozwiązań.

    Plik Index.cshtml odpowiada Twojej stronie głównej w aplikacji internetowej, która jest uruchamiana w przeglądarce internetowej.

     Zrzut ekranu przedstawia stronę główną aplikacji internetowej w oknie przeglądarki.

    W edytorze kodu zobaczysz kod HTML dla tekstu wyświetlanego na stronie głównej .

    Zrzut ekranu przedstawiający plik Index dot c s h t m l dla strony głównej w Visual Studio edytorze kodu.

  2. Zastąp tekst powitalny tekstem Hello world!

    Zrzut ekranu przedstawiający plik Index dot c s h t m l w edytorze kodu Visual Studio z tekstem powitalnym zmienionym na Hello world!.

  3. Wybierz IIS Express naciśnij klawisze CtrlF5+, aby uruchomić aplikację i otworzyć ją w przeglądarce internetowej.

    Zrzut ekranu przedstawia IIS Express wyróżniony na pasku narzędzi dla Visual Studio.

  4. W przeglądarce internetowej zobaczysz nowe zmiany na stronie głównej .

    Zrzut ekranu przedstawia stronę główną aplikacji internetowej w oknie przeglądarki. Zaktualizowany tekst zawiera Hello world!

  5. Zamknij przeglądarkę internetową, naciśnij klawisz ShiftF5+, aby zatrzymać debugowanie, i zapisz projekt. Teraz możesz zamknąć Visual Studio.

Przewodnik po rozwiązaniu

  1. Szablon projektu tworzy rozwiązanie z jednym projektem o ASP.NET Core o nazwie MyCoreApp. Wybierz kartę Eksplorator rozwiązań , aby wyświetlić jej zawartość.

    Zrzut ekranu przedstawia wybrany projekt MyCoreApp i jego zawartość Eksplorator rozwiązań w Visual Studio.

  2. Rozwiń folder Strony .

    Zrzut ekranu przedstawia zawartość folderu Pages w Eksplorator rozwiązań.

  3. Wybierz plik Index.cshtml i wyświetl go w edytorze kodu.

    Zrzut ekranu przedstawia plik Index.cshtml otwarty w Visual Studio edytorze kodu.

  4. Każdy plik cshtml ma skojarzony plik kodu. Aby otworzyć plik kodu w edytorze, rozwiń węzeł Index.cshtml w pliku Eksplorator rozwiązań i wybierz plik Index.cshtml.cs .

    Zrzut ekranu przedstawia plik Index.cshtml wybrany w Eksplorator rozwiązań w Visual Studio.

  5. Wyświetl plik Index.cshtml.cs w edytorze kodu.

    Zrzut ekranu przedstawia plik Index.cshtml.cs otwarty w Visual Studio edytorze kodu.

  6. Projekt zawiera folder wwwroot , który jest katalogiem głównym witryny internetowej. Rozwiń folder, aby wyświetlić jego zawartość.

    Zrzut ekranu przedstawia w w folderze głównym wybrane w Eksplorator rozwiązań w Visual Studio.

    Zawartość witryny statycznej można umieszczaćw— sposób css, obrazy i biblioteki Języka JavaScript— pośrednio w ścieżkach, w których mają być.

  7. Projekt zawiera również pliki konfiguracji, które zarządzają aplikacją internetową w czasie uruchamiania. Domyślna konfiguracja aplikacji jest przechowywana w pliku appsettings.json. Można jednak przesłonić te ustawienia przy użyciu ustawień appsettings. Development.json. Rozwiń plik appsettings.json , aby wyświetlić appsettings. Plik Development.json .

    Zrzut ekranu przedstawia wybrany i rozwinięty element appsettings.json, który uwidacznia elementy appsettings. Development.json, w Eksplorator rozwiązań w Visual Studio.

Uruchamianie, debugowanie i wprowadzanie zmian

  1. Wybierz przycisk IIS Express pasku narzędzi, aby skompilować i uruchomić aplikację w trybie debugowania. Alternatywnie naciśnij klawisz F5 lub przejdź do pozycji DebugujStart > Debugowanie na pasku menu.

    Zrzut ekranu przedstawiający przycisk I S Express wyróżniony na pasku narzędzi Visual Studio.

    Uwaga

    Jeśli zostanie wyświetlony komunikat o błędzie Nie można nawiązać połączenia z serwerem internetowym "IIS Express", zamknij Visual Studio, a następnie ponownie wyzłoń program jako administrator. Możesz to zrobić, klikając prawym przyciskiem myszy ikonę Visual Studio menu Start, a następnie wybierając opcję Uruchom jako administrator z menu kontekstowego.

    Może również zostać wyświetlony komunikat z pytaniem, czy chcesz zaakceptować certyfikat SSL Express usług IIS. Aby wyświetlić kod w przeglądarce internetowej, wybierz pozycję Tak, a następnie wybierz pozycję Tak , jeśli zostanie wyświetlony komunikat z ostrzeżeniem o zabezpieczeniach.

  2. Visual Studio zostanie otwarte okno przeglądarki. Na pasku menu powinny zostać wtedy wyświetlony strony Strona główna i Prywatność.

  3. Wybierz pozycję Prywatność na pasku menu. Strona Prywatność w przeglądarce renderuje tekst ustawiony w pliku Privacy.cshtml .

    Zrzut ekranu przedstawiający stronę Prywatność aplikacji MyCoreApp z następującym tekstem: Użyj tej strony, aby szczegółowo opisano zasady ochrony prywatności witryny.

  4. Wróć do Visual Studio, a następnie naciśnij klawisze Shift+F5, aby zatrzymać debugowanie. Ta akcja zamyka projekt w oknie przeglądarki.

  5. W Visual Studio otwórz privacy.cshtml do edycji. Następnie usuń zdanie. Użyj tej strony, @ViewData aby szczegółowo opisano zasady ochrony prywatności witryny i zastąpić ją tą stroną, która jest w trakcie budowy ["Sygnatura czasowa"].

    Zrzut ekranu przedstawia plik Privacy.cshtml otwarty w Visual Studio edytorze kodu ze zaktualizowanym tekstem.

  6. Teraz dokonajmy zmiany kodu. Wybierz pozycję Privacy.cshtml.cs. Następnie wyczyść dyrektywy using w górnej części pliku, wybierając następujący skrót:

    Najechaj kursorem myszy lub wybierz wyszadną dyrektywę using . Żarówka Szybkie akcje pojawi się tuż pod lewą Wybierz żarówkę, a następnie wybierz pozycję Usuń niepotrzebne usings.

    Zrzut ekranu przedstawia plik Privacy.cshtml w edytorze Visual Studio z otwartą etykietą narzędzia Szybkie akcje i wyróżniona zmianami Podgląd.

    Teraz wybierz pozycję Podgląd zmian, aby zobaczyć, co się zmieni.

    Zrzut ekranu przedstawia okno dialogowe Podgląd zmian. Okno dialogowe pokazuje usuwaną dyrektywę i wyświetla podgląd zmiany kodu po usunięciu.

    Wybierz przycisk Zastosuj. Visual Studio usuwa niepotrzebne dyrektywy using z pliku .

  7. Następnie utwórz ciąg dla bieżącej daty sformatowanej dla kultury lub regionu przy użyciu metody DateTime.ToString .

    • Pierwszy argument metody określa sposób wyświetlania daty. W tym przykładzie użyto specyfikatora formatu (d), który wskazuje format daty krótkiej.
    • Drugim argumentem jest obiekt CultureInfo , który określa kulturę lub region dla daty. Drugi argument określa między innymi język dowolnych wyrazów w dacie oraz typ użytych separatorów.

Zmień treść metody OnGet() na następujący kod:

public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}
  1. Zwróć uwagę, że w obszarze CultureInfo jest wyświetlane faliste podkreślenie. Zostanie wyświetlone faliste podkreślenie, ponieważ ten typ nie znajduje się w zakresie.

    Zrzut ekranu przedstawia znacznik błędu w postaci falistego podkreślenia dla cultureInfo w Visual Studio kodu.

    Otwórz pasek narzędzi Lista błędów , aby zobaczyć tam ten sam błąd. Jeśli nie widzisz paska narzędzi Lista błędów, przejdź do pozycji ViewError > List na górnym pasku menu.

    Zrzut ekranu przedstawia pasek narzędzi Lista błędów w Visual Studio z wyświetloną wartością CultureInfo i brakuje dyrektywy using.

  2. Naprawmy ten błąd. W edytorze kodu umieść kursor na wierszu zawierającym błąd, a następnie wybierz żarówkę Szybkie akcje na lewym marginesie. Następnie z menu rozwijanego wybierz pozycję using System.Globalization; aby dodać tę dyrektywę na początku pliku i usunąć błędy.

    Zrzut ekranu przedstawia opcje Szybkich akcji z menu rozwijanego z kursorem myszy w dyrektywie System.Globalization.

  3. Naciśnij klawisz F5 , aby otworzyć projekt w przeglądarce internetowej.

  4. W górnej części witryny internetowej wybierz pozycję Prywatność , aby wyświetlić zmiany.

    Zrzut ekranu przedstawiający stronę Prywatność aplikacji MyCoreApp, która zawiera zmiany wprowadzone w celu dodania daty.

  5. Zamknij przeglądarkę internetową, naciśnij klawisz ShiftF5+, aby zatrzymać debugowanie.

Zmienianie strony głównej

  1. W Eksplorator rozwiązań rozwiń folder Strony , a następnie wybierz pozycję Index.cshtml.

    Zrzut ekranu przedstawia wybrany element Index.cshtml w węźle Strony w Eksplorator rozwiązań.

    Plik Index.cshtml odpowiada Twojej stronie głównej w aplikacji internetowej, która jest uruchamiana w przeglądarce internetowej.

    Zrzut ekranu przedstawia stronę główną aplikacji internetowej w oknie przeglądarki.

    W edytorze kodu zobaczysz kod HTML dla tekstu wyświetlanego na stronie głównej .

    Zrzut ekranu przedstawia plik Index.cshtml strony głównej w Visual Studio edytorze kodu.

  2. Zastąp tekst powitalny tekstem Hello world!

    Zrzut ekranu przedstawiający plik Index.cshtml w Visual Studio kodu z tekstem "Witaj" zmienionym na "Hello world!".

  3. Wybierz IIS Express naciśnij klawisze CtrlF5+, aby uruchomić aplikację i otworzyć ją w przeglądarce internetowej.

    Zrzut ekranu przedstawiający przycisk IIS Express wyróżniony na pasku narzędzi dla Visual Studio.

  4. W przeglądarce internetowej zobaczysz nowe zmiany na stronie głównej .

    Zrzut ekranu przedstawia stronę główną aplikacji internetowej w oknie przeglądarki. Zaktualizowany tekst zawiera tekst "Hello world!".

  5. Zamknij przeglądarkę internetową, naciśnij klawisz ShiftF5+, aby zatrzymać debugowanie, i zapisz projekt. Teraz możesz zamknąć Visual Studio.

Następne kroki

Gratulujemy ukończenia tego samouczka! Mamy nadzieję, że podobała Ci się nauka o języku C#, ASP.NET Core i Visual Studio IDE. Aby dowiedzieć się więcej na temat tworzenia aplikacji internetowej lub witryny internetowej w języku C# i ASP.NET, przejdź do następującego samouczka:

Możesz też dowiedzieć się, jak konteneryzować aplikację internetową za pomocą platformy Docker:

Zobacz też

Publikowanie aplikacji internetowej w witrynie Azure App Service przy użyciu Visual Studio