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 získáte informace o následujících postupech:
- Vytvoření projektu ve Visual Studiu
- 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)
- Spusťte webovou aplikaci
Požadavky
K dokončení tohoto kurzu potřebujete Visual Studio. Navštivte stránku se soubory 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.
Pokud chcete přizpůsobit prostředí sady Visual Studio, podívejte se na přizpůsobení integrovaného vývojového prostředí a editoru sady Visual Studio.
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 v seznamu Jazyků jazyk C#. Potom ze seznamu platforem vyberte Windows a ze seznamu typů projektů web .
Po použití filtrů jazyka, platformy a typu projektu vyberte šablonu ASP.NET Základní webová aplikace a pak vyberte Další.
Poznámka:
Pokud šablonu webové aplikace ASP.NET Core nevidíte, můžete ji nainstalovat z okna Vytvořit nový projekt.
Ve zprávě Nenajděte, co hledáte? V dolní části seznamu šablon vyberte odkaz Nainstalovat další nástroje a funkce.
V Instalační program pro Visual Studio vyberte ASP.NET a vývoj pro web.
V Instalační program pro Visual Studio vyberte Upravit. Může se zobrazit výzva k uložení práce. Výběrem možnosti Pokračovat nainstalujte úlohu.
Vraťte se ke kroku 2 v tomto postupu Vytvoření projektu.
V okně Konfigurovat nový projekt zadejte myCoreApp do pole Název projektu. Pak vyberte Další.
V okně Další informace ověřte, že se v poli Cílová architektura zobrazí .NET Core 3.1.
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ěřování se ukládají do místní databáze nebo databáze založené na Azure.
- Microsoft Identity Platform: Tato možnost používá k ověřování ID Microsoft Entra nebo Microsoft 365.
- Windows: Vhodné pro intranetové aplikace.
Políčko 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 v seznamu Jazyků jazyk C#. Potom ze seznamu platforem vyberte Windows a ze seznamu typů projektů web .
Po použití filtrů jazyka, platformy a typu projektu vyberte šablonu ASP.NET Základní webová aplikace a pak vyberte Další.
Poznámka:
Pokud šablonu webové aplikace ASP.NET Core nevidíte, můžete ji nainstalovat z okna Vytvořit nový projekt.
Ve zprávě Nenajděte, co hledáte? V dolní části seznamu šablon vyberte odkaz Nainstalovat další nástroje a funkce.
V Instalační program pro Visual Studio vyberte ASP.NET a úlohu vývoje webu.
V Instalační program pro Visual Studio vyberte Upravit. Může se zobrazit výzva k uložení práce. Výběrem možnosti Pokračovat nainstalujte úlohu.
Vraťte se ke kroku 2 v tomto postupu Vytvoření projektu.
V okně Konfigurovat nový projekt zadejte myCoreApp do pole Název projektu. Pak vyberte Další.
V okně Další informace ověřte, že se rozhraní .NET 8.0 zobrazí v poli Cílová architektura.
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ěřování se ukládají do místní databáze nebo databáze založené na Azure.
- Microsoft Identity Platform: Tato možnost používá k ověřování ID Microsoft Entra nebo Microsoft 365.
- Windows: Vhodné pro intranetové aplikace.
Políčko Povolit Docker ponechte nezaškrtnuté a jako typ ověřování vyberte Žá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 vzoru návrhu MVC (Model-View-Controller), který zjednodušuje zahrnutí kódu modelu a kontroleru do samotné stránky 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í a zobrazte její obsah.
Rozbalte složku Stránky.
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ík řešení a vyberte soubor Index.cshtml.cs.
Zobrazte 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žená v souboru appsettings.json. Tato nastavení ale můžete přepsat pomocí nastavení aplikace. Development.json.
Rozbalte soubor appsettings.json a zobrazte nastavení aplikace. Soubor 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 klávesu F5 nebo přejděte na Panel nabídek na> ladění.
Poznámka:
Pokud se zobrazí chybová zpráva s informací , že se nelze 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 kliknete pravým tlačítkem myši na ikonu sady Visual Studio z nabídky Start 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 zobrazit kód ve webovém prohlížeči, vyberte Ano a 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. V řádku nabídek by se měly zobrazit stránky Domů a Ochrana osobních údajů .
V řádku nabídek vyberte Soukromí . Stránka Ochrana osobních údajů v prohlížeči vykreslí text nastavený v souboru Privacy.cshtml .
Vraťte se do sady Visual Studio a stisknutím kombinace kláves Shift+F5 zastavte ladění. Tato akce zavře projekt v okně prohlížeče.
V sadě Visual Studio otevřete soubor Privacy.cshtml pro úpravy. Dále odstraňte větu, použijte tuto stránku k podrobnostem o zásadách ochrany osobních údajů vašeho webu a nahraďte ji touto stránkou @ViewDatajako ["TimeStamp"].
Teď provedeme změnu kódu. Vyberte Privacy.cshtml.cs. Dále pomocí následujícího zástupce vyčistíte
using
direktivy v horní části souboru:Najetí myší nebo výběr direktivy se šedě.
using
Žárovka Rychlých akcí 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, jaké změny se změní.
Vyberte Použít. Visual Studio odstraní nepotřebné
using
direktivy ze souboru.Dále v
OnGet()
metodě změňte text na následující kód:public void OnGet() { string dateTime = DateTime.Now.ToShortDateString(); ViewData["TimeStamp"] = dateTime; }
Všimněte si, že pod položkou DateTime se zobrazí podtržení vlnovkou. Podtržení vlnovek se zobrazí, protože tento typ není v oboru.
Otevřete panel nástrojů Seznam chyb a zobrazte tam stejné chyby. Pokud panel nástrojů Seznam chyb nevidíte, přejděte na Seznam>chyb v horním řádku nabídek.
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. Potom v rozevírací nabídce vyberte příkaz Using System. Pokud chcete tuto direktivu přidat do horní části souboru a vyřešit 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 provedené změny.
Zavřete webový prohlížeč, stisknutím kláves Shift+F5 zastavte ladění.
Změna domovské stránky
V Průzkumník řešení rozbalte složku Pages a pak 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 uvítací text textem Hello World!
Vyberte IIS Express nebo stisknutím 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.
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í a zobrazte její obsah.
Rozbalte složku Stránky.
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ík řešení a vyberte soubor Index.cshtml.cs.
Zobrazte 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žená v souboru appsettings.json. Tato nastavení ale můžete přepsat pomocí nastavení aplikace. Development.json. Rozbalte soubor appsettings.json a zobrazte nastavení aplikace. Soubor 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 klávesu F5 nebo přejděte na Panel nabídek na> ladění.
Poznámka:
Pokud se zobrazí chybová zpráva s informací , že se nelze 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 kliknete pravým tlačítkem myši na ikonu sady Visual Studio z nabídky Start 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 zobrazit kód ve webovém prohlížeči, vyberte Ano a 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. V řádku nabídek by se měly zobrazit stránky Domů a Ochrana osobních údajů .
V řádku nabídek vyberte Soukromí . Stránka Ochrana osobních údajů v prohlížeči vykreslí text nastavený v souboru Privacy.cshtml .
Vraťte se do sady Visual Studio a stisknutím kombinace kláves Shift+F5 zastavte ladění. Tato akce zavře projekt v okně prohlížeče.
V sadě Visual Studio otevřete soubor Privacy.cshtml pro úpravy. Dále odstraňte větu, použijte tuto stránku k podrobnostem o zásadách ochrany osobních údajů vašeho webu a nahraďte ji touto stránkou @ViewDatajako ["TimeStamp"].
Teď provedeme změnu kódu. Vyberte Privacy.cshtml.cs. Potom vyčistíte direktivy
using
v horní části souboru tak, že vyberete následující zástupce:Najetí myší nebo výběr direktivy se šedě.
using
Žárovka Rychlých akcí se zobrazí pod kurzorem nebo na levém okraji. Vyberte žárovku a pak vyberte šipku rozbalení vedle možnosti Odebrat nepotřebné použití.Teď vyberte Náhled změn a podívejte se, jaké změny se změní.
Vyberte Použít. Visual Studio odstraní nepotřebné
using
direktivy ze souboru.Dále vytvořte řetězec pro aktuální datum formátované pro jazykovou verzi 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ý argument je CultureInfo objekt, který určuje jazykovou verzi nebo oblast pro datum. Druhý argument mimo jiné určuje jazyk všech slov v datu a typ použitých oddělovačů.
Změňte tělo
OnGet()
metody 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í
using
direktiva:using System.Globalization;
System.Globalization
obsahuje CultureInfo třída.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 provedené změny.
Zavřete webový prohlížeč, stisknutím kláves Shift+F5 zastavte ladění.
Změna domovské stránky
V Průzkumník řešení rozbalte složku Pages a pak 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 uvítací text textem Hello World!
Vyberte IIS Express nebo stisknutím 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.
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:
Viz také
Publikování webové aplikace do služby Aplikace Azure Service pomocí sady Visual Studio