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 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 úlohu 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.
V úvodním okně vyberte Vytvořit nový projekt.
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ší .V okně Konfigurace nového projektu zadejte MyCoreApp do pole Název projektu. Pak vyberte Další.
V okně
Další informace ověřte, že.NET Core 3.1 se zobrazí v poliTarget 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é.
Vyberte Vytvořit.
Visual Studio otevře nový projekt.
V úvodním okně vyberte Vytvořit nový projekt.
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ší .V okně Konfigurace nového projektu zadejte MyCoreApp do pole Project name. Pak vyberte Další.
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é.
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í
Š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.
Rozbalte složku Pages.
Vyberte soubor Index.cshtml a zobrazte soubor v editoru kódu.
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.
Prohlédněte si soubor Index.cshtml.cs v editoru kódu.
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.
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
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.
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.
Visual Studio spustí okno prohlížeče. Pak byste měli v řádku nabídek vidět stránky Domov a Soukromí.
V nabídce vyberte Ochrana osobních údajů. Stránka
Ochrana osobních údajů v prohlížeči vykresluje text, který je nastavený v souboruPrivacy.cshtml. 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.
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"].
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í.Teď vyberte Náhled změn a podívejte se, co se změní.
Vyberte a použijte. Visual Studio odstraní nepotřebné direktivy
using
ze souboru.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; }
Všimněte si, že pod DateTimese zobrazí podtržení vlnovkou. Vlnovkové podtržení se zobrazí, protože tento typ není v rozsahu.
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.
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.
Stisknutím klávesy F5 otevřete projekt ve webovém prohlížeči.
V horní části webu vyberte Ochrana osobních údajů a zobrazte změny.
Zavřete webový prohlížeč. Ladění zastavíte stisknutím kláves Shift+F5.
Změna domovské stránky
V průzkumníku
řešení rozbalte složku stránkya vyberte Index.cshtml .Soubor Index.cshtml odpovídá vaší domovské stránce v webové aplikaci, která běží ve webovém prohlížeči.
V editoru kódu uvidíte kód HTML pro text, který se zobrazí na domovské stránce.
Nahraďte text Welcome textem Hello World!
Vyberte IIS Express nebo stisknutím klávesy Ctrl+F5 spusťte aplikaci a otevřete ji ve webovém prohlížeči.
Ve webovém prohlížeči uvidíte nové změny na domovské stránce.
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í
Š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.
Rozbalte složku Pages.
Vyberte soubor Index.cshtml a zobrazte ho v editoru kódu.
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.
Prohlédněte si soubor Index.cshtml.cs v editoru kódu.
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.
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
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.
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.
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ů.
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.
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.
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"].
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í.Nyní vyberte Náhled změn a podívejte se, jaké změny nastaly.
Vyberte a použijte. Visual Studio odstraní nepotřebné direktivy
using
ze souboru.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; }
- První argument metody určuje, jak se má datum zobrazit. Tento příklad používá specifikátor formátu (
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.Stisknutím klávesy F5 otevřete projekt ve webovém prohlížeči.
V horní části webu vyberte Ochrana osobních údajů a zobrazte změny.
Zavřete webový prohlížeč. Ladění zastavíte stisknutím kláves Shift+F5.
Změna domovské stránky
V průzkumníku
řešení rozbalte složku stránkya vyberte Index.cshtml .Soubor Index.cshtml odpovídá vaší domovské stránce ve webové aplikaci, která běží ve webovém prohlížeči.
V editoru kódu uvidíte kód HTML pro text, který se zobrazí na domovské stránce.
Nahraďte text Welcome textem Hello World!
Vyberte https nebo stiskněte Ctrl+F5 spusťte aplikaci a otevřete ji ve webovém prohlížeči.
Ve webovém prohlížeči uvidíte nové změny na stránce domovské .
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