Rychlý start: Použití Visual Studio k vytvoření první ASP.NET Core aplikace

  • Článek
  • 3 min ke čtení

V tomto 5 až 10minutovém úvodu do používání Visual Studio vytvoříte jednoduchou webovou aplikaci "Hello World" pomocí šablony projektu ASP.NET a programovacího jazyka C#.

Než začnete

Instalace sady Visual Studio

Pokud jste si ještě nenainstalujete Visual Studio, přejděte na stránku Visual Studio stahování a nainstalujte si ji zdarma.

Pokud jste si ještě nenainstalujete Visual Studio, přejděte na stránku Visual Studio stahování a nainstalujte si ji zdarma.

Volba motivu (volitelné)

Tento rychlý úvodní kurz obsahuje snímky obrazovky, které používají tmavý motiv. Pokud tmavý motiv používáte, ale chcete se dozvědět, jak na to, přečtěte si téma Postupy:Přizpůsobení integrovaného vývojového Visual Studio a editoru .

Vytvoření projektu

Začněte tím, že vytvoříte projekt ASP.NET Core webové aplikace. Typ projektu se dodává se všemi soubory šablon pro vytvoření webové aplikace, ještě než cokoli přidáváte.

  1. Otevřete sadu Visual Studio 2017.

  2. V horním řádku nabídek zvolte Soubor > Nový Project > .

  3. V levém podokně dialogového okna Nový Project rozbalte Visual C# a pak zvolte .NET Core. V prostředním podokně zvolte ASP.NET Core Webová aplikace.

    Pak soubor pojmechte a HelloWorld zvolte OK.

    Vytvoření nového projektu webové ASP.NET Core aplikace pro jazyk C #

    Poznámka

    Pokud nevidíte kategorii šablony projektu .NET Core, zvolte odkaz Otevřít Instalační program pro Visual Studio v levém podokně. (V závislosti na nastavení zobrazení se možná budete muset posunout, abyste ji viděli.)

    Otevření Instalační program pro Visual Studio z dialogového okna nový projekt

    Spustí se instalační program pro Visual Studio. Zvolte úlohu ASP.NET a vývoje webu a pak zvolte Upravit.

    ASP.NET úlohy v instalačním programu sady Visual Studio

    (Možná budete muset zavřít Visual Studio, než budete moci pokračovat v instalaci nové úlohy.)

  4. V dialogovém ASP.NET Core Nová webová aplikace vyberte ASP.NET Core 2.1 z rozevírací nabídky. Dále zvolte Webová aplikace a pak zvolte OK.

    Dialogové ASP.NET Core Nová webová aplikace

    Poznámka

    Pokud nevidíte verzi ASP.NET Core 2.1, ujistěte se, že používáte nejnovější verzi Visual Studio. Další informace o aktualizaci instalace najdete na stránce Aktualizace Visual Studio na nejnovější verzi.

Brzy potom Visual Studio soubor projektu.

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

    Snímek obrazovky úvodního okna Visual Studio se zvýrazněnou možností Vytvořit nový projekt

  2. V okně Vytvořit nový projekt zvolte v seznamu Jazyk možnost C#. Dále zvolte Windows ze seznamu Platforma a ze seznamu typů projektů vyberte Web.

    Po použití filtrů jazyka, platformy a typu projektu zvolte šablonu ASP.NET Core webovou aplikaci a pak zvolte Další.

    Snímek obrazovky znázorňující okno Vytvořit nový projekt filtrované podle C#, Windows a Web Šablona projektu ASP.NET Core Web App je zvýrazněná.

    Poznámka

    Pokud se šablona webové aplikace ASP.NET Core, můžete ji nainstalovat z okna Vytvořit nový projekt. Ve zprávě Nehledáte to, co hledáte? zvolte odkaz Instalovat další nástroje a funkce.

    Snímek obrazovky zobrazující odkaz Instalovat další nástroje a funkce zvýrazněný ve zprávě "Nehledáme to, co hledáte"

    Potom v části Instalační program pro Visual Studio úlohu vývoj ASP.NET a webu.

    Snímek obrazovky znázorňující úlohu vývoje pro různé platformy v .NET Core v Instalační program pro Visual Studio

    Potom v okně klikněte na tlačítko Instalační program pro Visual Studio. Pokud se zobrazí výzva k uložení práce, proveďte to. Potom zvolte Pokračovat a nainstalujte úlohu. Pak se vraťte ke kroku 2 v tétoproceduře "Vytvořeníprojektu".

  3. V okně Configure your new project (Konfigurace nového projektu) zadejte nebo zadejte HelloWorld do pole Project name (Název projektu). Pak zvolte Další.

    Snímek obrazovky zobrazující okno Konfigurovat nový projekt se zadaným textem HelloWorld do Project názvu projektu

  4. V okně Další informace ověřte, že se v horní rozevírací nabídce zobrazuje .NET Core 3.1. Nezapomeňte, že podporu Dockeru můžete povolit zaškrtnutím tohoto políčka. Podporu ověřování můžete přidat také kliknutím na tlačítko Změnit ověřování. Odtud si můžete vybrat z:

    • Žádné: bez ověřování.
    • Jednotlivé účty: Tyto účty jsou uložené v místní databázi nebo databázi Založené na Azure.
    • Microsoft identity platform: Tato možnost k ověřování používá Active Directory, Azure AD nebo Microsoft 365.
    • Windows: vhodné pro intranetové aplikace.

    Políčko Povolit Docker nechte nezaškrtnuté a jako Typ ověřování vyberte Žádné. Potom vyberte Vytvořit.

    Snímek obrazovky s oknem Další informace a vybranou možností .NET Core 3.1 v poli Framework

    Visual Studio nový projekt otevřete.

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

    Snímek obrazovky úvodního okna Visual Studio se zvýrazněnou možností Vytvořit nový projekt

  2. V okně Vytvořit nový projekt zvolte v seznamu Jazyk možnost C#. Dále zvolte Windows ze seznamu Platforma a ze seznamu typů projektů vyberte Web.

    Po použití filtrů jazyka, platformy a typu projektu zvolte šablonu ASP.NET Core webovou aplikaci a pak zvolte Další.

    Snímek obrazovky znázorňující okno Vytvořit nový projekt filtrované podle C#, Windows a Web Šablona projektu ASP.NET Core Web App je zvýrazněná.

    Poznámka

    Pokud se šablona webové aplikace ASP.NET Core, můžete ji nainstalovat z okna Vytvořit nový projekt. Ve zprávě Nehledáte to, co hledáte? zvolte odkaz Instalovat další nástroje a funkce.

    Snímek obrazovky zobrazující odkaz Instalovat další nástroje a funkce zvýrazněný ve zprávě "Nehledáme to, co hledáte"

    Potom v části Instalační program pro Visual Studio úlohu vývoj ASP.NET a webu.

    Snímek obrazovky znázorňující úlohu vývoje pro různé platformy v .NET Core v Instalační program pro Visual Studio

    Potom v okně klikněte na tlačítko Instalační program pro Visual Studio. Pokud se zobrazí výzva k uložení práce, proveďte to. Potom zvolte Pokračovat a nainstalujte úlohu. Pak se vraťte ke kroku 2 v tétoproceduře "Vytvořeníprojektu".

  3. V okně Configure your new project (Konfigurace nového projektu) zadejte nebo zadejte HelloWorld do pole Project name (Název projektu). Pak zvolte Další.

    Snímek obrazovky zobrazující okno Konfigurovat nový projekt se zadaným textem HelloWorld do Project názvu projektu

  4. V okně Další informace ověřte, že se v poli Rozhraní zobrazuje rozhraní .NET 6.0. Nezapomeňte, že podporu Dockeru můžete povolit zaškrtnutím tohoto políčka. Podporu ověřování můžete přidat také výběrem hodnoty z rozevíracího seznamu Typ ověřování. Odtud si můžete vybrat z:

    • Žádné: bez 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 k ověřování používá Active Directory, Azure AD nebo Microsoft 365.
    • Windows: vhodné pro intranetové aplikace.

    Políčko Povolit Docker nechte nezaškrtnuté a jako Typ ověřování vyberte Žádné. Potom vyberte Vytvořit.

    Snímek obrazovky s oknem Další informace a vybranou možností .NET 6.0 v poli Framework

    Visual Studio nový projekt otevřete.

Vytvoření a spuštění aplikace

  1. V Průzkumník řešení rozbalte složku Pages a pak zvolte About.cshtml.

    Snímek obrazovky Visual Studio Průzkumník řešení zobrazující soubory v projektu HelloWorld Rozbalí se složka Pages a vybere se Soubor About.cshtml.

    Tento soubor odpovídá stránce s názvem About ve webové aplikaci, která běží ve webovém prohlížeči.

    Stránka O aplikaci ve webové aplikaci

    V editoru uvidíte kód HTML pro oblast Další informace na stránce O produktu.

    kód HTML pro další informační oblast v editoru Visual Studio

  2. Změnou textu "Další informace" Přečtěte "Hello World!".

    změňte výchozí kód HTML pro oblast dalších informací v editoru Visual Studio

  3. V Průzkumník řešení rozbalte položku About. cshtml a potom zvolte About. cshtml. cs. (Tento soubor také odpovídá stránce o stránku ve webovém prohlížeči.)

    snímek obrazovky Visual Studio Průzkumník řešení zobrazení souborů v projektu HelloWorld O. cshtml je rozbalený a je v něm vybraná možnost About. cshtml. cs.

    V editoru uvidíte kód C#, který obsahuje text pro oblast Popis aplikace na stránce o produktu .

    kód jazyka C# pro oblast popisu aplikace v editoru Visual Studio

  4. Změňte text zprávy "Popis aplikace", abyste si přečetli "co je moje zpráva?".

    změna výchozího textu zprávy pro oblast popisu aplikace v editoru Visual Studio

  5. zvolte IIS Express nebo stiskněte klávesu Ctrl + F5 a spusťte aplikaci a otevřete ji ve webovém prohlížeči.

    výběr tlačítka IIS Express v Visual Studio

    Poznámka

    pokud se zobrazí chybová zpráva s oznámením, že se nelze připojit k webovému serveru ' IIS Express ' nebo chybová zpráva, která uvádí certifikát SSL, ukončete Visual Studio. v dalším kroku otevřete Visual Studio pomocí možnosti spustit jako správce z místní nabídky klikněte pravým tlačítkem myši. Pak aplikaci spusťte znovu.

  6. Ve webovém prohlížeči ověřte, zda stránka o produktu obsahuje aktualizovaný text.

    Zobrazit aktualizované informace o stránce, která obsahuje změny, které jste provedli

  7. Zavřete webový prohlížeč.

Kontrola práce

Prohlédněte si následující animaci a zkontrolujte práci, kterou jste dokončili v předchozí části.

podívejte se na animovaný .gif soubor, který ukazuje, jak vytvořit a spustit jednoduchou webovou aplikaci v jazyce C# ASP.NET Core v Visual Studio

Blahopřejeme k dokončení tohoto rychlého startu! doufáme, že jste se trochu dozvěděli o C#, ASP.NET Core a Visual Studio IDE (integrované vývojové prostředí).

  1. V Průzkumník řešení rozbalte složku stránky a pak zvolte index. cshtml.

    Snímek obrazovky zobrazující ' index. cshtml ' vybraný ve složce rozbalené stránky v Průzkumník řešení.

    Tento soubor odpovídá stránce s názvem Domů ve webové aplikaci, která běží ve webovém prohlížeči.

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

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

    snímek obrazovky zobrazující soubor Index. cshtml pro domovskou stránku v editoru kódu Visual Studio.

  2. Změňte úvodní text tak, aby se načetl Hello World!.

    snímek obrazovky znázorňující soubor Index. cshtml v editoru kódu Visual Studio se textem Welcome se změnil na Hello World!

  3. zvolte IIS Express nebo stiskněte klávesu Ctrl + F5 a 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 v Visual Studio

    Poznámka

    pokud se zobrazí chybová zpráva s oznámením, že se nelze připojit k webovému serveru ' IIS Express ' nebo chybová zpráva, která uvádí certifikát SSL, ukončete Visual Studio. v dalším kroku otevřete Visual Studio pomocí možnosti spustit jako správce z místní nabídky klikněte pravým tlačítkem myši. Pak aplikaci spusťte znovu.

  4. Ve webovém prohlížeči ověřte, zda je na domovské stránce zahrnut aktualizovaný text.

    Snímek obrazovky zobrazující domovskou stránku webové aplikace v okně prohlížeče s aktualizovanou zprávou ' Hello World! '.

  5. Zavřete webový prohlížeč.

  1. V Průzkumník řešení rozbalte složku stránky a pak zvolte index. cshtml.

    Snímek obrazovky zobrazující ' index. cshtml ' vybraný ve složce rozbalené stránky v Průzkumník řešení.

    Tento soubor odpovídá stránce s názvem Domů ve webové aplikaci, která běží ve webovém prohlížeči.

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

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

    snímek obrazovky zobrazující soubor Index. cshtml pro domovskou stránku v editoru kódu Visual Studio.

  2. Změňte úvodní text tak, aby se načetl Hello World!.

    snímek obrazovky znázorňující soubor Index. cshtml v editoru kódu Visual Studio se textem Welcome se změnil na Hello World!

  3. vyberte IIS Express nebo stiskněte Ctrl + F5 a 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 v Visual Studio

    Poznámka

    pokud se zobrazí chybová zpráva s oznámením, že se nelze připojit k webovému serveru ' IIS Express ' nebo chybová zpráva, která uvádí certifikát SSL, ukončete Visual Studio. v dalším kroku otevřete Visual Studio pomocí možnosti spustit jako správce z místní nabídky klikněte pravým tlačítkem myši. Pak aplikaci spusťte znovu.

  4. Ve webovém prohlížeči ověřte, zda je na domovské stránce zahrnut aktualizovaný text.

    Snímek obrazovky zobrazující domovskou stránku webové aplikace v okně prohlížeče s aktualizovanou zprávou ' Hello World! '.

  5. Zavřete webový prohlížeč.

Další kroky

pokud chcete získat další informace o vytváření ASP.NET webových aplikací, pokračujte v následujícím kurzu:

začínáme s C# a ASP.NET v Visual Studio

Nebo se naučíte, jak kontejnerizace webovou aplikaci pomocí Docker:

Nástroje kontejneru v Visual Studio

Viz také

Publikování webové aplikace pro Azure App Service pomocí Visual Studio