Sdílet prostřednictvím


Kurz: Začínáme s jazykem C# a ASP.NET Core v sadě Visual Studio

V tomto kurzu pro vývoj v jazyce C# pomocí ASP.NET Core vytvoříte webovou aplikaci C# ASP.NET Core v sadě Visual Studio.

V tomto kurzu se dozvíte, jak:

  • Vytvoření projektu sady Visual Studio
  • Vytvoření webové aplikace ASP.NET Core v jazyce C#
  • Provádění změn ve webové aplikaci
  • Prozkoumání funkcí integrovaného vývojového prostředí (IDE)
  • Spuštění webové aplikace

Požadavky

K dokončení tohoto kurzu potřebujete:

Vytvoření projektu

Nejprve vytvoříte projekt ASP.NET Core. Typ projektu obsahuje všechny soubory šablon, které potřebujete k vytvoření plně funkčního webu.

  1. V úvodním okně vyberte Vytvořit nový projekt.

    Snímek obrazovky ukazuje úvodní okno sady Visual Studio. Možnost Vytvořit nový projekt je zvýrazněná.

  2. V okně Vytvořit nový projekt vyberte C# ze seznamu jazyků. Dále v seznamu platforem vyberte Windows a ze seznamu typů projektů webovou.

    Po použití filtrů jazyka, platformy a typu projektu vyberte šablonu ASP.NET Core Web App a pak vyberte Další.

    Snímek obrazovky se zvýrazněnou šablonou projektu ASP.NET Core Web App v dialogovém okně Nový projekt ve Visual Studio

  3. V okně Konfigurace nového projektu zadejte MyCoreApp do pole Název projektu. Pak vyberte Další.

    Snímek obrazovky, který zobrazuje okno Konfigurovat nový projekt v sadě Visual Studio s MyCoreApp zadaným v poli Název projektu.

  4. V okně Další informace ověřte, že .NET Core 3.1 se zobrazí v poli Target Framework.

    V tomto okně můžete povolit podporu Dockeru a přidat podporu ověřování. Rozevírací nabídka pro typ ověřování má následující čtyři možnosti:

    • Žádné: Žádné ověřování.
    • jednotlivé účty: Tato ověření se ukládají do místní databáze nebo databáze na bázi Azure.
    • Microsoft identity platform: Tato možnost používá k ověřování Microsoft Entra identitu nebo Microsoft 365.
    • Windows: Vhodné pro intranetové aplikace.

    Pole Povolit Docker ponechte nezaškrtnuté a jako typ ověřování vyberte Žádné.

    Snímek obrazovky, který zobrazuje výchozí nastavení v okně Další informace, kde je cílová architektura nastavená na .NET Core 3.1

  5. Vyberte Vytvořit.

Visual Studio otevře nový projekt.

  1. V úvodním okně vyberte Vytvořit nový projekt.

    Snímek obrazovky ukazuje úvodní okno sady Visual Studio. Možnost Vytvořit nový projekt je zvýrazněná.

  2. V okně Vytvořit nový projekt vyberte ze seznamu jazyků C#. Potom v seznamu Všechny platformy vyberte Windows a Web ze seznamu s názvem Všechny typy projektů.

    Po použití filtrů jazyka, platformy a typu projektu vyberte šablonu ASP.NET Core Web App (Razor Pages) a pak vyberte Další.

    snímek obrazovky znázorňující vybranou šablonu projektu ASP.NET Core Web App a zvýrazněnou na stránce Vytvořit nový projekt

  3. V okně Konfigurace nového projektu zadejte MyCoreApp do pole Project name. Pak vyberte Další.

    Snímek obrazovky, který zobrazuje okno Konfigurovat nový projekt v prostředí Visual Studio s MyCoreApp zadaným v poli Název projektu.

  4. V okně Další informace ověřte, že .NET 8.0 je uvedeno v poli Cílové rozhraní.

    V tomto okně můžete povolit podporu kontejneru a přidat podporu ověřování. Rozevírací nabídka pro typ ověřování má následující čtyři možnosti:

    • Žádné: Žádné ověřování.
    • jednotlivé účty: Tyto ověřovací údaje se ukládají do místní databáze nebo databáze v systému Azure.
    • platforma Microsoft identity: Tato možnost používá k ověřování Microsoft Entra ID nebo Microsoft 365.
    • Windows: Vhodné pro intranetové aplikace.

    Pole Povolit podporu pro kontejnery ponechte nezaškrtnuté a jako typ ověřování zvolte Žádné.

    Snímek obrazovky, který zobrazuje výchozí nastavení v okně Další informace, kde je cílová architektura nastavená na .NET 8.0.

  5. Vyberte Vytvořit.

Visual Studio otevře nový projekt.

Informace o vašem řešení

Toto řešení se řídí vzorem návrhu Razor Page. Liší se od modelu - vzoru návrhuView-Controller (MVC) tím, že je integrovaný tak, aby zahrnoval kód modelu a kontroléru v Razor Page.

Prohlídka řešení

  1. Šablona projektu vytvoří řešení s jedním projektem ASP.NET Core s názvem MyCoreApp. Vyberte kartu Průzkumník řešení, abyste zobrazili jeho obsah.

    Snímek obrazovky ukazuje projekt MyCoreApp vybraný v Průzkumníku řešení v sadě Visual Studio.

  2. Rozbalte složku Pages.

    Snímek obrazovky zobrazuje obsah složky Stránky v Průzkumníku řešení v sadě Visual Studio.

  3. Vyberte soubor Index.cshtml a zobrazte soubor v editoru kódu.

    Snímek obrazovky ukazuje soubor Index.c s h t m l otevřený v editoru Visual Studio Code.

  4. Každý soubor .cshtml má přidružený soubor kódu. Pokud chcete otevřít soubor kódu v editoru, rozbalte uzel Index.cshtml v Průzkumníku řešení a vyberte soubor Index.cshtml.cs.

    Snímek obrazovky ukazuje soubor index.cshhtml vybraný v Průzkumníku řešení v sadě Visual Studio.

  5. Prohlédněte si soubor Index.cshtml.cs v editoru kódu.

    Snímek obrazovky ukazuje soubor index.c s h t m l.c s otevřený v editoru Visual Studio.

  6. Projekt obsahuje složku wwwroot, což je kořen pro váš web. Rozbalte složku a zobrazte její obsah.

    Snímek obrazovky ukazuje kořenovou složku w w w vybranou v Průzkumníku řešení v sadě Visual Studio.

    Statický obsah webu, jako jsou šablony stylů CSS, obrázky a javascriptové knihovny, můžete umístit přímo do požadovaných cest.

    Projekt obsahuje také konfigurační soubory, které spravují webovou aplikaci za běhu. Výchozí konfigurace aplikace je uložena v appsettings.json. Tato nastavení však můžete přepsat pomocí appsettings.Development.json.

  7. Rozbalením souboru appsettings.json zobrazte soubor appsettings.Development.json.

    Snímek obrazovky ukazuje vybraný a rozbalený soubor appsettings.json v Průzkumníku řešení v sadě Visual Studio.

Spuštění, ladění a provádění změn

  1. Na panelu nástrojů vyberte tlačítko IIS Express a sestavte a spusťte aplikaci v režimu ladění. Případně stiskněte F5, nebo přejděte na Ladění>Spustit ladění z řádku nabídek.

    Snímek obrazovky zobrazuje na panelu nástrojů v sadě Visual Studio zvýrazněné tlačítko I I S Express.

    Poznámka

    Pokud se zobrazí chybová zpráva s informací Nelze se připojit k webovému serveru IIS Express, zavřete Visual Studio a znovu spusťte program jako správce. Tuto úlohu můžete provést tak, že v nabídce Start kliknete pravým tlačítkem myši na ikonu sady Visual Studio a pak v místní nabídce vyberete možnost Spustit jako správce.

    Může se zobrazit také zpráva s dotazem, jestli chcete přijmout certifikát SSL Express služby IIS. Pokud chcete kód zobrazit ve webovém prohlížeči, vyberte Anoa pak vyberte Ano, pokud se zobrazí zpráva s upozorněním na zabezpečení pro následnou akci.

  2. Visual Studio spustí okno prohlížeče. Pak byste měli v řádku nabídek vidět stránky Domov a Soukromí.

  3. V nabídce vyberte Ochrana osobních údajů. Stránka Ochrana osobních údajů v prohlížeči vykresluje text, který je nastavený v souboru Privacy.cshtml.

    snímek obrazovky se stránkou Ochrana osobních údajů v MyCoreAppu s následujícím textem: Na této stránce můžete podrobně zobrazit zásady ochrany osobních údajů vašeho webu.

  4. Vraťte se do sady Visual Studio a stisknutím kláves Shift+F5 zastavte ladění. Tato akce zavře projekt v okně prohlížeče.

  5. V sadě Visual Studio otevřete Privacy.cshtml pro úpravy. Dále odstraňte větu, Tuto stránku použijte k podrobnostem zásad ochrany osobních údajů vašeho webu a nahraďte ji Tato stránka je ve výstavbě od @ViewData["TimeStamp"].

    Snímek obrazovky ukazuje soubor Privacy dot c s h t m l otevřený v editoru kódu sady Visual Studio s aktualizovaným textem.

  6. Teď provedeme změnu kódu. Vyberte Privacy.cshtml.cs. Dále pomocí následující klávesové zkratky vyčistěte direktivy using v horní části souboru:

    Najetím myší nebo výběrem šedě zobrazené direktivy using. Rychlé akce žárovka se zobrazí pod kurzorem nebo na levém okraji. Vyberte žárovku a pak vyberte Odebrat nepotřebné použití.

    Snímek obrazovky ukazuje soubor Privacy.cshtml v editoru kódu sady Visual Studio se zobrazeným popiskem Rychlé akce pro zašedlou direktivu using.

    Teď vyberte Náhled změn a podívejte se, co se změní.

    Snímek obrazovky zobrazuje dialogové okno Náhled změn. Dialogové okno zobrazuje odebranou direktivu a zobrazí náhled změny kódu po odebrání.

    Vyberte a použijte. Visual Studio odstraní nepotřebné direktivy using ze souboru.

  7. Dále v metodě OnGet() změňte tělo na následující kód:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToShortDateString();
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. Všimněte si, že pod DateTimese zobrazí podtržení vlnovkou. Vlnovkové podtržení se zobrazí, protože tento typ není v rozsahu.

    snímek obrazovky zobrazuje chybovou značku ve formě vlnovkového podtržení pro DateTime v editoru kódu sady Visual Studio.

    Otevřete panel nástrojů Seznam chyb , kde jsou uvedeny stejné chyby. Pokud panel nástrojů Seznam chyb nevidíte, přejděte na Zobrazení>Seznam chyb z hlavní nabídky.

    Snímek obrazovky zobrazuje panel nástrojů Seznam chyb v sadě Visual Studio s položkou DateTime.

  9. Pojďme tuto chybu opravit. V editoru kódu umístěte kurzor na řádek, který obsahuje chybu, a pak vyberte žárovku Rychlých akcí na levém okraji. Poté v rozevírací nabídce vyberte s použitím namespace 'System';, abyste přidali tuto direktivu do horní části souboru a vyřešili chyby.

    Snímek obrazovky ukazuje možnosti Rychlých akcí z rozevírací nabídky s najetím myší na položku Používání systému.

  10. Stisknutím klávesy F5 otevřete projekt ve webovém prohlížeči.

  11. V horní části webu vyberte Ochrana osobních údajů a zobrazte změny.

    snímek obrazovky s aktualizovanou stránkou Ochrany osobních údajů, která obsahuje provedené změny.

  12. Zavřete webový prohlížeč. Ladění zastavíte stisknutím kláves Shift+F5.

Změna domovské stránky

  1. V průzkumníku řešenírozbalte složku stránky a vyberte Index.cshtml.

    Snímek obrazovky zobrazuje Index.html vybraný v uzlu Stránky v Průzkumníku řešení.

    Soubor Index.cshtml odpovídá vaší domovské stránce v webové aplikaci, která běží ve webovém prohlížeči.

     Snímek obrazovky zobrazuje domovskou stránku webové aplikace v okně prohlížeče.

    V editoru kódu uvidíte kód HTML pro text, který se zobrazí na domovské stránce.

    Snímek obrazovky ukazuje soubor Index c s h t m l pro Domovskou stránku v editoru Visual Studio.

  2. Nahraďte text Welcome textem Hello World!

    Snímek obrazovky ukazuje soubor index.cshhtml v editoru kódu sady Visual Studio, kde byl uvítací text změněn na

  3. Vyberte IIS Express nebo stisknutím klávesy Ctrl+F5 spusťte aplikaci a otevřete ji ve webovém prohlížeči.

    Snímek obrazovky se zvýrazněným tlačítkem IIS Express na panelu nástrojů pro Visual Studio

  4. Ve webovém prohlížeči uvidíte nové změny na domovské stránce.

    Snímek obrazovky zobrazuje domovskou stránku webové aplikace v okně prohlížeče. Aktualizovaný text říká Hello World!

  5. Zavřete webový prohlížeč, stisknutím kláves Shift+F5 zastavte ladění a uložte projekt. Teď můžete Visual Studio zavřít.

Prozkoumejte své řešení

  1. Šablona projektu vytvoří řešení s jedním projektem ASP.NET Core s názvem MyCoreApp. Vyberte kartu Průzkumníka řešení, abyste zobrazili její obsah.

    Snímek obrazovky ukazuje vybraný projekt MyCoreApp a jeho obsah v Průzkumníku řešení v sadě Visual Studio.

  2. Rozbalte složku Pages.

    Snímek obrazovky zobrazuje obsah složky Stránky v Průzkumníku řešení.

  3. Vyberte soubor Index.cshtml a zobrazte ho v editoru kódu.

    Snímek obrazovky ukazuje soubor Index.cshtml otevřený v editoru Visual Studio Code.

  4. Každý soubor .cshtml má přidružený soubor kódu. Pokud chcete otevřít soubor kódu v editoru, rozbalte uzel Index.cshtml v Průzkumníku řešení a vyberte soubor Index.cshtml.cs.

    Snímek obrazovky zobrazuje soubor Index.cshtml vybraný v Průzkumníku řešení v sadě Visual Studio.

  5. Prohlédněte si soubor Index.cshtml.cs v editoru kódu.

    Snímek obrazovky ukazuje soubor Index.cshtml.cs otevřený v editoru Visual Studio Code.

  6. Projekt obsahuje složku wwwroot, což je kořen pro váš web. Rozbalte složku a zobrazte její obsah.

    Snímek obrazovky ukazuje kořenovou složku w w w vybranou v Průzkumníku řešení v sadě Visual Studio.

    Statický obsah webu, jako jsou šablony stylů CSS, obrázky a javascriptové knihovny, můžete umístit přímo do požadovaných cest.

  7. Projekt obsahuje také konfigurační soubory, které spravují webovou aplikaci za běhu. Výchozí konfigurace aplikace je uložena v appsettings.json. Tato nastavení však můžete přepsat pomocí appsettings.Development.json. Rozbalením souboru appsettings.json zobrazte soubor appsettings.Development.json.

    Snímek obrazovky ukazuje, že appsettings.json je vybrané a rozbalené, což v Průzkumníku řešení sady Visual Studio zobrazuje appsettings.Development.json.

Spuštění, ladění a provádění změn

  1. Na panelu nástrojů vyberte tlačítko https a sestavte a spusťte aplikaci v režimu ladění. Případně stiskněte F5 nebo přejděte na Ladění>Spustit ladění z řádku nabídek.

    Snímek obrazovky ukazuje tlačítko https zvýrazněné na panelu nástrojů v sadě Visual Studio.

    Poznámka

    Může se také zobrazit zpráva s dotazem, jestli chcete přijmout certifikát SSL ASP.NET Core. Pokud chcete kód zobrazit ve webovém prohlížeči, vyberte Anoa pak vyberte Ano, pokud se zobrazí zpráva s upozorněním na zabezpečení pro následnou akci. Zjistěte více informací o vynucování SSL v ASP.NET Core.

  2. Visual Studio spustí okno prohlížeče. Pak byste měli v řádku nabídek vidět stránky Domů a Ochrana osobních údajů.

  3. V řádku nabídek vyberte Ochrana osobních údajů. Stránka Ochrana osobních údajů v prohlížeči zobrazuje text nastavený v souboru Privacy.cshtml.

    Snímek obrazovky se stránkou Ochrany osobních údajů aplikace MyCoreApp s následujícím textem: Na této stránce můžete podrobně zobrazit zásady ochrany osobních údajů vašeho webu.

  4. Vraťte se do sady Visual Studio a stisknutím kláves Shift+F5 zastavte ladění. Tato akce zavře projekt v okně prohlížeče.

  5. V prostředí Visual Studio otevřete Privacy.cshtml pro úpravy. Dále odstraňte větu, Tuto stránku použijte pro podrobnosti o zásadách ochrany osobních údajů vašeho webu a nahraďte ji Tato stránka je ve výstavbě od @ViewData["TimeStamp"].

    snímek obrazovky ukazuje soubor Privacy.cshtml otevřený v editoru Visual Studio Code s aktualizovaným textem.

  6. Teď provedeme změnu kódu. Vyberte Privacy.cshtml.cs. Pomocí výběru následující klávesové zkratky vyčistěte příkazy using v horní části souboru:

    Najetím myší nebo výběrem zašedlé direktivy using. Rychlé akce žárovka se zobrazí pod stříškou nebo na levém okraji. Vyberte žárovku a pak vyberte šipku rozbalení vedle Odebrat nepotřebné použití.

    Snímek obrazovky zobrazuje soubor Privacy.cshtml v editoru Visual Studio Code s otevřenou bublinou nápovědy Rychlé akce a zvýrazněnými změnami náhledu.

    Nyní vyberte Náhled změn a podívejte se, jaké změny nastaly.

    Snímek obrazovky zobrazuje dialogové okno Náhled změn. Dialogové okno zobrazuje odebranou direktivu a zobrazí náhled změny kódu po odebrání.

    Vyberte a použijte. Visual Studio odstraní nepotřebné direktivy using ze souboru.

  7. Dále vytvořte řetězec pro aktuální datum formátované pro vaši kulturu nebo oblast pomocí metody DateTime.ToString.

    • První argument metody určuje, jak se má datum zobrazit. Tento příklad používá specifikátor formátu (d), který označuje krátký formát data.
    • Druhým argumentem je objekt CultureInfo, který určuje kulturu nebo region pro datum. Druhý argument mimo jiné určuje jazyk všech slov v datu a typ použitých oddělovačů.

    V Privacy.cshtml.cs změňte tělo metody OnGet() na následující kód:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. Všimněte si, že na začátek souboru se automaticky přidá následující direktiva using:

    using System.Globalization;
    

    System.Globalization obsahuje třídu CultureInfo.

  9. Stisknutím klávesy F5 otevřete projekt ve webovém prohlížeči.

  10. V horní části webu vyberte Ochrana osobních údajů a zobrazte změny.

    snímek obrazovky se stránkou Ochrana osobních údajů aplikace MyCoreApp, která obsahuje změny provedené při přidání data.

  11. Zavřete webový prohlížeč. Ladění zastavíte stisknutím kláves Shift+F5.

Změna domovské stránky

  1. V průzkumníku řešenírozbalte složku stránky a vyberte Index.cshtml.

    Snímek obrazovky zobrazuje index.cshtml vybraný v uzlu Stránky v Průzkumníku řešení.

    Soubor Index.cshtml odpovídá vaší domovské stránce ve webové aplikaci, která běží ve webovém prohlížeči.

    Snímek obrazovky zobrazuje domovskou stránku webové aplikace v okně prohlížeče.

    V editoru kódu uvidíte kód HTML pro text, který se zobrazí na domovské stránce.

    Snímek obrazovky ukazuje soubor Index.cshtml pro domovskou stránku v editoru Visual Studio Code.

  2. Nahraďte text Welcome textem Hello World!

    snímek obrazovky ukazuje soubor Index.cshtml v editoru Visual Studio Code se změněným textem Vítejte na Hello World!.

  3. Vyberte https nebo stiskněte Ctrl+F5 spusťte aplikaci a otevřete ji ve webovém prohlížeči.

    Snímek obrazovky ukazuje na panelu nástrojů pro Visual Studio zvýrazněné tlačítko https.

  4. Ve webovém prohlížeči uvidíte nové změny na stránce domovské .

    Snímek obrazovky zobrazuje domovskou stránku webové aplikace v okně prohlížeče. Aktualizovaný text říká

  5. Zavřete webový prohlížeč, stisknutím kláves Shift+F5 zastavte ladění a uložte projekt. Teď můžete Visual Studio zavřít.

Další kroky

Blahopřejeme k dokončení tohoto kurzu! Doufáme, že jste se seznámili s jazykem C#, ASP.NET Core a integrovaným vývojovém prostředím sady Visual Studio. Další informace o vytvoření webové aplikace nebo webu pomocí jazyka C# a ASP.NET najdete v následujícím kurzu:

Nebo se naučíte kontejnerizovat webovou aplikaci pomocí Dockeru:

nástroje kontejneru v sadě Visual Studio