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:

• Nainstalovaná sada Visual Studio. Navštivte stránku ke stažení sady Visual Studio pro bezplatnou verzi. Další informace o upgradu na nejnovější verzi sady Visual Studio najdete v tématu aktualizace sady Visual Studio.
• Nainstalovaná úloha ASP.NET a vývoj webu. Pokud chcete tuto pracovní zátěž ověřit nebo nainstalovat v sadě Visual Studio, vyberte Nástroje>Získat nástroje a funkce. Další informace najdete v tématu Změna úloh nebo jednotlivých komponent.

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.

   

2. V okně Vytvořit nový projekt vyberte C# v seznamu jazyků. Poté v seznamu Všechny platformy vyberte Windows a Web ze seznamu 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ší.

   

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

   

4. V okně Další informace ověřte, že .NET 8.0 se zobrazí v poli Cílové prostředí.

   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 založené na Azure.
   • platforma Microsoft identity platform: Tato možnost používá Microsoft Entra ID nebo Microsoft 365 k ověřování.
   • Windows: Vhodné pro intranetové aplikace.

   Pole Povolit podporu kontejneru ponechte nezaškrtnuté a pro typ ověřování vyberte možnost Žádná.

   

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 návrhového vzoru modelu -View-Controller (MVC) tím, že je zjednodušen k zahrnutí kódu modelu a kontroleru přímo do Razor Page.

Prohlédněte si vaše ř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í pro zobrazení jeho obsahu.

   

2. Rozbalte složku Pages.

   

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

   

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.

   

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

   

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

   

   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.

   

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 F5nebo přejděte na Ladění>Spustit ladění z panelu menu.

   

   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. Přečtěte si další informace o vynucování ssl v ASP.NET Core.

2. Visual Studio spustí okno prohlížeče. V nabídkové liště byste pak měli vidět domovskou stránku a stránku ochrany osobních údajů.

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

   

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. Ve Visual Studiu otevřete Privacy.cshtml k úpravám. 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 k datu @ViewData["TimeStamp"] ve výstavbě.

   

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

   Najetím myší nebo výběrem direktivy using šedě. Ikona žárovky pro rychlé akce se zobrazí pod kurzorem nebo na levém okraji. Vyberte žárovku a pak vyberte šipku rozbalení vedle Odebrat nepotřebné použití.

   

   Teď vyberte Náhled změn, abyste viděli změny.

   

   Vyberte Použít. 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 region 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 jazykovou verzi nebo oblast data. Druhý argument mimo jiné určuje jazyk všech slov v datu a typ použitých oddělovačů.

   V OnGet() změňte tělo metody 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.

    

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.

   

   Soubor Index.cshtml odpovídá vaší domovské stránce v rámci webové aplikace, která se spouští ve webovém prohlížeči.

   

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

   

2. Nahraďte text Welcome textem Hello World!

   

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

   

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

   

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:

Vytvořte webovou aplikaci Razor Pages s ASP.NET Core

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

nástroje kontejneru v sadě Visual Studio

Související odkazy

• Publikování webové aplikace do služby Azure App Service pomocí sady Visual Studio
• Přizpůsobení integrovaného vývojového prostředí a editoru sady Visual Studio