Udostępnij za pośrednictwem


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

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 pokazuje, jak to zrobić:

  • Tworzenie projektu programu Visual Studio
  • Tworzenie aplikacji internetowej w języku C# ASP.NET Core
  • Wprowadzanie zmian w aplikacji internetowej
  • Eksplorowanie funkcji środowiska IDE
  • Uruchamianie aplikacji internetowej

Warunki wstępne

Do ukończenia tego samouczka potrzebne są następujące elementy:

  • Zainstalowany program Visual Studio. Odwiedź stronę pobierania Visual Studio, aby pobrać bezpłatną wersję. Aby uzyskać więcej informacji na temat uaktualniania do najnowszej wersji programu Visual Studio, zobacz aktualizacje programu Visual Studio.
  • Zainstalowane obciążenie ASP.NET i tworzenia stron internetowych. Aby zweryfikować lub zainstalować to obciążenie w programie Visual Studio, wybierz Narzędzia >Pobierz narzędzia i funkcje. Aby uzyskać więcej informacji, zobacz Zmienianie obciążeń lub poszczególnych składników.

Tworzenie projektu

Najpierw należy utworzyć projekt ASP.NET Core. Typ projektu jest dostarczany ze wszystkimi plikami szablonów potrzebnymi do zbudowania w pełni funkcjonalnej witryny internetowej.

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

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

  2. W oknie Utwórz nowy projekt z listy języków wybierz C# . Następnie wybierz pozycję windows z listy platformy, a 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 na koniec wybierz pozycję Dalej.

    Zrzut ekranu przedstawiający szablon projektu ASP.NET Core Web App wyróżniony w oknie dialogowym Nowy projekt w programie Visual Studio.

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

    Zrzut ekranu przedstawiający okno Konfigurowania nowego projektu w programie Visual Studio, z nazwą projektu MyCoreApp wprowadzoną w odpowiednie pole.

  4. W oknie Dodatkowe informacje sprawdź, czy w polu Platforma docelowa pojawi się .NET Core 3.1.

    W tym oknie możesz włączyć obsługę platformy Docker i dodać obsługę uwierzytelniania. Menu rozwijane dla Typ 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.
    • platformy tożsamości firmy Microsoft: ta opcja używa identyfikatora Entra firmy Microsoft lub platformy Microsoft 365 do uwierzytelniania.
    • Windows: odpowiednie dla aplikacji intranetowych.

    Pozostaw niezaznaczone pole włącz platformy Docker i wybierz pozycję Brak dla pozycji Typ uwierzytelniania.

    Zrzut ekranu przedstawiający ustawienia domyślne w oknie Dodatkowe informacje, w którym platforma docelowa jest ustawiona na .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.

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

  2. W oknie Utwórz nowy projekt wybierz pozycję C# z listy Języków. Następnie wybierz pozycję Windows z listy Wszystkie platformy, a Web z listy Wszystkie typy projektów.

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

    Zrzut ekranu przedstawiający wybrany szablon projektu ASP.NET Core Web App i wyróżniony na stronie Tworzenie nowego projektu.

  3. W oknie Konfiguracja nowego projektu wprowadź MyCoreApp w polu Nazwa projektu. Następnie wybierz pozycję Dalej.

    Zrzut ekranu przedstawiający okno Konfigurowanie nowego projektu w programie Visual Studio z wpisaną nazwą projektu MyCoreApp.

  4. W oknie Dodatkowe informacje sprawdź, czy .NET 8.0 jest wyświetlana w polu Target Framework.

    W tym oknie możesz włączyć obsługę kontenerów i dodać obsługę uwierzytelniania. Menu rozwijane dla Typ 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.
    • platformy tożsamości firmy Microsoft: ta opcja używa identyfikatora Entra firmy Microsoft lub platformy Microsoft 365 do uwierzytelniania.
    • Windows: odpowiednie dla aplikacji intranetowych.

    Pozostaw pole Włącz obsługę kontenera niezaznaczone, a dla typu uwierzytelniania wybierz Brak.

    Zrzut ekranu przedstawiający ustawienia domyślne w oknie Dodatkowe informacje, w którym platforma docelowa jest ustawiona na .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 projektu Model-View-Controller (MVC), ponieważ jest on usprawniony w celu uwzględnienia modelu i kodu kontrolera w samej stronie Razor.

Przewodnik po rozwiązaniu

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

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

  2. Rozwiń folder Pages.

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

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

    Zrzut ekranu przedstawia plik Index dot c s h m l otwarty w edytorze kodu programu Visual Studio.

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

    Zrzut ekranu przedstawia plik Index dot c s h m l wybrany w Eksploratorze rozwiązań w programie Visual Studio.

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

    Zrzut ekranu przedstawia plik Index dot c s h t m l dot c s otwarty w edytorze kodu programu Visual Studio.

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

    Zrzut ekranu przedstawia folder główny www wybrany w Eksploratorze rozwiązań w programie 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 appsettings.json. Można jednak zastąpić te ustawienia przy użyciu appsettings.Development.json.

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

    Zrzut ekranu przedstawia wybrany i rozwinięty plik appsettings.json w Eksploratorze rozwiązań w programie 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 F5lub przejdź do Debugowanie>Rozpocznij debugowanie na pasku menu.

    Zrzut ekranu przedstawia przycisk I S Express wyróżniony na pasku narzędzi w programie Visual Studio.

    Notatka

    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 Home i Privacy.

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

    pl-PL: Zrzut ekranu przedstawia stronę Prywatność aplikacji MyCoreApp z następującym tekstem: Użyj tej strony, aby szczegółowo opisać politykę prywatności witryny.

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

  5. W programie Visual Studio otwórz Privacy.cshtml do edycji. Następnie usuń zdanie, Użyj tej strony, aby przedstawić szczegółowe informacje o polityce prywatności witryny i zastąp je Ta strona jest w budowie od @ViewData["TimeStamp"].

    Zrzut ekranu przedstawia plik Privacy dot c s h m l otwarty w edytorze kodu programu Visual Studio ze zaktualizowanym tekstem.

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

    Najeżdżaj myszą lub wybierz wyszarzoną dyrektywę using. żarówka szybkich akcji pojawia się poniżej kursora lub na lewym marginesie. Wybierz żarówkę, a następnie wybierz pozycję Usuń niepotrzebne użycie przy użyciu.

    Zrzut ekranu przedstawia plik Privacy dot c s h t m l w edytorze Visual Studio, gdzie etykieta narzędzia

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

    Zrzut ekranu przedstawia okno dialogowe Podgląd zmian. W oknie dialogowym jest wyświetlana dyrektywa, która jest usuwana, i wyświetla podgląd zmiany kodu po usunięciu.

    Wybierz pozycję Zastosuj. Program 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 pod DateTimepojawia się faliste podkreślenie. Pojawia się faliste podkreślenie, ponieważ ten typ nie jest uwzględniony w kontekście.

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

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

    Zrzut ekranu przedstawia pasek narzędzi Lista błędów w programie Visual Studio z wymienionym elementem DateTime.

  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ę przy użyciu „using System”;, aby dodać tę dyrektywę na początku pliku i usunąć błędy.

    Zrzut ekranu przedstawia opcje szybkich akcji z menu rozwijanego z najechaniem myszą na opcję System.

  10. Naciśnij 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ść zawierającą wprowadzone zmiany.

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

Zmienianie strony głównej

  1. W Eksploratorze rozwiązań rozwiń folder stron , a następnie wybierz Index.cshtml.

    Zrzut ekranu przedstawia wybrany plik Index.cshhtml pod węzłem Strony w Eksploratorze rozwiązań.

    Plik Index.cshtml odpowiada stronie Home 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 Strona główna.

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

  2. Zastąp tekst Welcome na Hello World!

    Zrzut ekranu przedstawia plik Index dot c s h m l w edytorze kodu programu Visual Studio z tekstem powitalnym zmienionym na Hello World!.

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

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

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

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

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

Zapoznaj się ze swoim rozwiązaniem

  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ść.

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

  2. Rozwiń folder Pages.

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

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

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

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

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

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

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

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

    Zrzut ekranu przedstawia folder główny WWW wybrany w Eksploratorze rozwiązań w programie 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 appsettings.json. Można jednak zastąpić te ustawienia przy użyciu appsettings.Development.json. Rozwiń plik appsettings.json, aby wyświetlić plik appsettings.Development.json.

    Zrzut ekranu przedstawia, że appsettings.json jest wybrane i rozwinięte, co uwidacznia appsettings.Development.jsonw Eksploratorze rozwiązań w programie Visual Studio.

Uruchamianie, debugowanie i wprowadzanie zmian

  1. Na pasku narzędzi wybierz przycisk https, aby skompilować i uruchomić aplikację w trybie debugowania. Alternatywnie naciśnij F5lub przejdź do Debugowanie>Rozpocznij debugowanie na pasku menu.

    Zrzut ekranu przedstawia przycisk https wyróżniony na pasku narzędzi w programie Visual Studio.

    Notatka

    Może również zostać wyświetlony komunikat z pytaniem, czy chcesz zaakceptować certyfikat SSL platformy ASP.NET Core. Aby wyświetlić kod w przeglądarce internetowej, wybierz Tak, a następnie wybierz Tak, jeśli zostanie wyświetlony komunikat ostrzegawczy zabezpieczeń. Dowiedz się więcej o włączaniu protokołu SSL w ASP.NET Core.

  2. Program Visual Studio uruchamia okno przeglądarki. Na pasku menu powinny zostać wyświetlone strony Home i Privacy.

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

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

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

  5. W programie Visual Studio otwórz Privacy.cshtml do edycji. Następnie usuń zdanie Użyj tej strony, aby opisać szczegółowo politykę prywatności witryny i zastąp je Ta strona jest w budowie @ViewData["Sygnatura czasowa"].

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

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

    Najedź kursorem lub wybierz wyszarzałą dyrektywę using. szybkie akcje żarówka 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.

    Zrzut ekranu przedstawia plik Privacy.cshtml w edytorze programu Visual Studio Code z otwartym oknem narzędzia Szybkie akcje, z wyróżnioną opcją Podgląd zmian.

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

    Zrzut ekranu przedstawia okno dialogowe Podgląd zmian. W oknie dialogowym jest wyświetlana dyrektywa, która jest usuwana, i wyświetla podgląd zmiany kodu po usunięciu.

    Wybierz pozycję Zastosuj. Program 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 określający 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ść metody OnGet() w Privacy.cshtml.cs 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 dyrektywa using jest automatycznie dodawana do góry pliku:

    using System.Globalization;
    

    System.Globalization zawiera klasę CultureInfo.

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

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

    Zrzut ekranu przedstawiający stronę Prywatność aplikacji MyCoreApp zawierającą zmiany wprowadzone w celu dodania daty.

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

Zmienianie strony głównej

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

    Zrzut ekranu przedstawia plik Index.cshtml wybrany w węźle Pages w Eksploratorze rozwiązań.

    Plik Index.cshtml odpowiada Twojej stronie Głównej w aplikacji internetowej, która działa 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 Strona główna.

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

  2. Zastąp tekst Welcome na Hello World!

    Zrzut ekranu przedstawia plik Index.cshtml w edytorze programu Visual Studio Code z tekstem powitalnym zmienionym na

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

    Zrzut ekranu przedstawia przycisk https wyróżniony na pasku narzędzi programu Visual Studio.

  4. W przeglądarce internetowej zobaczysz zmiany na stronie Strona główna.

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

  5. Zamknij przeglądarkę internetową, naciśnij 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:

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

narzędzia kontenera w programie Visual Studio