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

  • Artykuł

W tym samouczku dotyczącym programowania w języku C# za pomocą platformy ASP.NET Core utworzysz aplikację internetową w języku C# ASP.NET Core w programie 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
  • Wprowadzanie zmian w aplikacji internetowej
  • Eksplorowanie funkcji środowiska IDE
  • Uruchom aplikację internetową

Wymagania wstępne

Do ukończenia tego samouczka potrzebny jest program Visual Studio. Odwiedź stronę pobierania programu Visual Studio, aby uzyskać bezpłatną wersję.

  • Aby uzyskać więcej informacji na temat uaktualniania do najnowszej wersji programu Visual Studio, zobacz Aktualizacje programu Visual Studio.

  • Aby dostosować środowisko programu Visual Studio, zobacz personalizowanie środowiska IDE i edytora programu Visual Studio.

Tworzenie projektu

Najpierw należy utworzyć projekt ASP.NET Core. Typ projektu jest dostarczany ze wszystkimi plikami szablonów, które należy utworzyć w pełni funkcjonalną witrynę internetową.

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

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

  2. W oknie Tworzenie nowego projektu wybierz pozycję C# z listy Język. Następnie wybierz pozycję Windows z listy platformy i sieć Web 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.

    Screenshot that shows the ASP.NET Core Web App project template highlighted in the New Project dialog box in Visual Studio.

    Uwaga

    Jeśli nie widzisz szablonu ASP.NET Core Web App , możesz zainstalować go w oknie Tworzenie nowego projektu .

    W obszarze Nie można znaleźć szukanego komunikatu? w dolnej części listy szablonów wybierz link Zainstaluj więcej narzędzi i funkcji .

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    W Instalator programu Visual Studio wybierz pozycję ASP.NET i tworzenie aplikacji internetowych.

    Screenshot shows the dot NET Core cross-platform development workload in the Visual Studio Installer.

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

    Wróć do kroku 2 w tej procedurze "Tworzenie projektu".

  3. W oknie Konfigurowanie nowego projektu wprowadź ciąg MyCoreApp w polu Nazwa projektu. Następnie wybierz Dalej.

    Screenshot that shows the Configure your new project window in Visual Studio with MyCoreApp entered in the Project name field.

  4. W oknie Dodatkowe informacje sprawdź, czy platforma .NET Core 3.1 jest wyświetlana w polu Platforma docelowa.

    W tym oknie możesz włączyć obsługę platformy Docker i dodać obsługę uwierzytelniania. Menu rozwijane typu uwierzytelniania ma następujące cztery opcje:

    • Brak: brak uwierzytelniania.
    • Indywidualne konta: te uwierzytelniania są przechowywane w lokalnej lub opartej na platformie Azure bazie danych.
    • Platforma tożsamości Microsoft: ta opcja używa identyfikatora Entra firmy Microsoft lub platformy Microsoft 365 do uwierzytelniania.
    • Windows: odpowiednie dla aplikacji intranetowych.

    Pozostaw pole Włącz platformę Docker niezaznaczone, a następnie wybierz pozycję Brak w polu Typ uwierzytelniania.

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET Core 3.1.

  5. Wybierz pozycję Utwórz.

Program Visual Studio otwiera nowy projekt.

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

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

  2. W oknie Tworzenie nowego projektu wybierz pozycję C# z listy Język. Następnie wybierz pozycję Windows z listy platformy i sieć Web 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.

    Screenshot that shows the ASP.NET Core Web App project template selected and highlighted on the Create a new project page.

    Uwaga

    Jeśli nie widzisz szablonu ASP.NET Core Web App , możesz zainstalować go w oknie Tworzenie nowego projektu .

    W obszarze Nie można znaleźć szukanego komunikatu? w dolnej części listy szablonów wybierz link Zainstaluj więcej narzędzi i funkcji .

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    W Instalator programu Visual Studio wybierz obciążenie ASP.NET i tworzenie aplikacji internetowych.

    Screenshot shows the ASP.NET and web development workload in the Visual Studio Installer.

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

    Wróć do kroku 2 w tej procedurze "Tworzenie projektu".

  3. W oknie Konfigurowanie nowego projektu wprowadź ciąg MyCoreApp w polu Nazwa projektu. Następnie wybierz Dalej.

    Screenshot that shows the Configure your new project window in Visual Studio with MyCoreApp entered in the Project name field.

  4. W oknie Dodatkowe informacje sprawdź, czy platforma .NET 8.0 jest wyświetlana w polu Platforma docelowa.

    W tym oknie możesz włączyć obsługę platformy Docker i dodać obsługę uwierzytelniania. Menu rozwijane typu uwierzytelniania ma następujące cztery opcje:

    • Brak: brak uwierzytelniania.
    • Indywidualne konta: te uwierzytelniania są przechowywane w lokalnej lub opartej na platformie Azure bazie danych.
    • Platforma tożsamości Microsoft: ta opcja używa identyfikatora Entra firmy Microsoft lub platformy Microsoft 365 do uwierzytelniania.
    • Windows: odpowiednie dla aplikacji intranetowych.

    Pozostaw pole Włącz platformę Docker niezaznaczone, a następnie wybierz pozycję Brak w polu Typ uwierzytelniania.

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET 8.0.

  5. Wybierz pozycję Utwórz.

Program Visual Studio otwiera nowy projekt.

Informacje o rozwiązaniu

To rozwiązanie jest zgodne ze wzorcem projektowania strony Razor. Różni się on od wzorca projektowego Model-View-Controller (MVC) w taki sposób, że usprawniony jest dołączanie modelu i kodu kontrolera do samej strony Razor.

Przewodnik po rozwiązaniu

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

    Screenshot shows the MyCoreApp project selected in the Solution Explorer in Visual Studio.

  2. Rozwiń folder Pages.

    Screenshot shows the contents of the Pages folder in the the Solution Explorer in Visual Studio..

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

    Screenshot shows the Index dot c s h t m l file open in the Visual Studio code editor.

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

    Screenshot shows Index dot c s h t m l file selected in the Solution Explorer in Visual Studio.

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

    Screenshot shows the Index dot c s h t m l dot c s file open in the Visual Studio code editor.

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

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    Zawartość witryny statycznej, taka jak CSS, obrazy i biblioteki JavaScript, można umieścić bezpośrednio w ścieżkach, w których chcesz.

    Projekt zawiera również pliki konfiguracji, które zarządzają aplikacją internetową w czasie wykonywania. Domyślna konfiguracja aplikacji jest przechowywana w pliku appsettings.json. Można jednak zastąpić te ustawienia przy użyciu ustawień appsettings. Development.json.

  7. Rozwiń plik appsettings.json, aby wyświetlić ustawienia aplikacji. Plik Development.json.

    Screenshot shows appsettings dot j son selected and expanded in the Solution Explorer in Visual Studio.

Uruchamianie, debugowanie i wprowadzanie zmian

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

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    Uwaga

    Jeśli zostanie wyświetlony komunikat o błędzie z komunikatem Nie można nawiązać połączenia z serwerem internetowym "IIS Express", zamknij program Visual Studio, a następnie uruchom ponownie program jako administrator. To zadanie można wykonać, klikając prawym przyciskiem myszy ikonę programu Visual Studio z 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 ostrzegawczy zabezpieczeń.

  2. Program Visual Studio uruchamia okno przeglądarki. Na pasku menu powinny zostać wyświetlone 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 .

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

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

  5. W programie Visual Studio otwórz plik Privacy.cshtml do edycji. Następnie usuń zdanie, użyj tej strony, aby szczegółowo wyszczególnić zasady ochrony prywatności witryny i zastąpić ją tą stroną jest w budowie @ViewDatajako ["Sygnatura czasowa"].

    Screenshot shows the Privacy dot c s h t m l file open in the Visual Studio code editor with the updated text.

  6. Teraz wprowadźmy zmianę kodu. Wybierz plik Privacy.cshtml.cs. Następnie wyczyść using dyrektywy w górnej części pliku, używając następującego skrótu:

    Mouseover lub wybierz wyszarzone using dyrektywy. Żarówka Szybkie akcje jest wyświetlana poniżej daszka lub na lewym marginesie. Wybierz żarówkę, a następnie wybierz pozycję Usuń niepotrzebne użycie.

    Screenshot shows the Privacy dot c s h t m l file in the Visual Studio code editor with the Quick Actions tooltip exposed for a greyed out using directive.

    Teraz wybierz pozycję Podgląd zmian , aby zobaczyć zmiany.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Wybierz Zastosuj. Program Visual Studio usuwa niepotrzebne using dyrektywy 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 pojawia się faliste podkreślenie. Pojawi się falisty podkreśleń, ponieważ ten typ nie znajduje się w zakresie.

    Screenshot shows an error mark, in the form of a wavy underline, for DateTime in the Visual Studio code editor.

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

    Screenshot shows the Error List toolbar in Visual Studio with DateTime listed.

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

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on using 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.

    Screenshot showing the updated Privacy page that includes the changes you made.

  12. Zamknij przeglądarkę internetową, naciśnij klawisze Shift+F5, aby zatrzymać debugowanie.

Zmienianie strony głównej

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

    Screenshot shows Index dot c s h t m l selected under the Pages node in the Solution Explorer.

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

    Screenshot shows the Home page for the web app in the browser window.

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

    Screenshot shows the Index dot c s h t m l file for the Home page in the Visual Studio code editor.

  2. Zastąp tekst powitalny wartością Hello World!

    Screenshot shows the Index dot c s h t m l file in the Visual Studio code editor with the Welcome text changed to Hello World!.

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

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

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

    Screenshot shows the Home page for the web app in the browser window. The updated text says Hello World!

  5. Zamknij przeglądarkę internetową, naciśnij klawisze Shift+F5, aby zatrzymać debugowanie i zapisać projekt. Teraz możesz zamknąć program Visual Studio.

Przewodnik po rozwiązaniu

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

    Screenshot shows the MyCoreApp project selected and its content in the Solution Explorer in Visual Studio.

  2. Rozwiń folder Pages.

    Screenshot shows the contents of the Pages folder in the Solution Explorer.

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

    Screenshot shows the Index.cshtml file open in the Visual Studio Code editor.

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

    Screenshot shows Index.cshtml file selected in the Solution Explorer in Visual Studio.

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

    Screenshot shows the Index.cshtml.cs file open in the Visual Studio Code editor.

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

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    Zawartość witryny statycznej, taka jak CSS, obrazy i biblioteki JavaScript, można umieścić bezpośrednio w ścieżkach, w których chcesz.

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

    Screenshot shows appsettings.json selected and expanded, which exposes appsettings.Development.json, in the Solution Explorer in Visual Studio.

Uruchamianie, debugowanie i wprowadzanie zmian

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

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    Uwaga

    Jeśli zostanie wyświetlony komunikat o błędzie z komunikatem Nie można nawiązać połączenia z serwerem internetowym "IIS Express", zamknij program Visual Studio, a następnie uruchom ponownie program jako administrator. To zadanie można wykonać, klikając prawym przyciskiem myszy ikonę programu Visual Studio z 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 ostrzegawczy zabezpieczeń.

  2. Program Visual Studio uruchamia okno przeglądarki. Na pasku menu powinny zostać wyświetlone 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 .

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

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

  5. W programie Visual Studio otwórz plik Privacy.cshtml do edycji. Następnie usuń zdanie, użyj tej strony, aby szczegółowo wyszczególnić zasady ochrony prywatności witryny i zastąpić ją tą stroną jest w budowie @ViewDatajako ["Sygnatura czasowa"].

    Screenshot shows the Privacy.cshtml file open in the Visual Studio Code editor with the updated text.

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

    Mouseover lub wybierz wyszarzone using dyrektywy. Żarówka Szybkie akcje jest wyświetlana poniżej daszka lub na lewym marginesie. Wybierz żarówkę, a następnie wybierz strzałkę rozwijania obok pozycji Usuń niepotrzebne użycie.

    Screenshot shows the Privacy.cshtml file in the Visual Studio Code editor with the Quick Actions tooltip open and Preview changes highlighted.

    Teraz wybierz pozycję Podgląd zmian , aby zobaczyć zmiany.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Wybierz Zastosuj. Program Visual Studio usuwa niepotrzebne using dyrektywy 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 daty. Drugi argument określa między innymi język dowolnych słów w dacie i typ używanych separatorów.

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

    public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}

  8. Zwróć uwagę, że następująca using dyrektywa jest automatycznie dodawana do góry pliku:

    using System.Globalization;

    System.Globalization zawiera klasę CultureInfo .

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

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

    Screenshot showing the Privacy page of the MyCoreApp that includes the changes made to add the date.

  11. Zamknij przeglądarkę internetową, naciśnij klawisze Shift+F5, aby zatrzymać debugowanie.

Zmienianie strony głównej

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

    Screenshot shows Index.cshtml selected under the Pages node in the Solution Explorer.

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

    Screenshot shows the Home page for the web app in the browser window.

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

    Screenshot shows the Index.cshtml file for the Home page in the Visual Studio Code editor.

  2. Zastąp tekst powitalny wartością Hello World!

    Screenshot shows the Index.cshtml file in the Visual Studio Code editor with the 'Welcome' text changed to 'Hello World!'.

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

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

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

    Screenshot shows the Home page for the web app in the browser window. The updated text says 'Hello World!'

  5. Zamknij przeglądarkę internetową, naciśnij klawisze Shift+F5, aby zatrzymać debugowanie i zapisać projekt. Teraz możesz zamknąć program Visual Studio.

Następne kroki

Gratulujemy ukończenia tego samouczka! Mamy nadzieję, że poznasz język C#, ASP.NET Core i środowisko IDE programu Visual Studio. 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:

Tworzenie aplikacji internetowej Razor Pages przy użyciu platformy ASP.NET Core

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

Narzędzia kontenerów w programie Visual Studio

Zobacz też

Publikowanie aplikacji internetowej w usłudze aplikacja systemu Azure przy użyciu programu Visual Studio