Självstudie: Kom igång med C# och ASP.NET Core i Visual Studio

I den här självstudien för C#-utveckling med ASP.NET Core skapar du en C# ASP.NET Core-webbapp i Visual Studio.

Den här handledningen visar hur du:

• Skapa ett Visual Studio-projekt
• Skapa en C# ASP.NET Core-webbapp
• Göra ändringar i webbappen
• Utforska IDE-funktioner
• Kör webbappen

Förutsättningar

För att slutföra den här självstudien behöver du:

• Visual Studio installerat. Besök sidan Visual Studio-nedladdningar för en kostnadsfri version. Mer information om hur du uppgraderar till den senaste Visual Studio-versionen finns i Visual Studio-uppdateringar.
• Arbetsbelastningen ASP.NET och webbutveckling installerad. Om du vill verifiera eller installera den här arbetsbelastningen i Visual Studio väljer du Verktyg>Hämta verktyg och funktioner. Mer information finns i Ändra arbetsbelastningar eller enskilda komponenter.

Skapa ett projekt

Först skapar du ett ASP.NET Core-projekt. Projekttypen levereras med alla mallfiler som du behöver för att skapa en fullt fungerande webbplats.

1. I startfönstret väljer du Skapa ett nytt projekt.

   

2. I fönstret Skapa ett nytt projekt väljer du C# i listan Språk. Välj sedan Windows i listan Alla plattformar och Web från listan Alla projekttyper.

   När du har tillämpat filter för språk, plattform och projekttyp väljer du mallen ASP.NET Core Web App (Razor Pages) och väljer sedan Nästa.

   

3. I fönstret Konfigurera ditt nya projekt anger du MyCoreApp i fältet Project name . Välj sedan Nästa.

   

4. I fönstret Ytterligare information kontrollerar du att .NET 8.0 visas i fältet Target Framework.

   Från det här fönstret kan du aktivera containerstöd och lägga till autentiseringsstöd. Den nedrullningsbara menyn för autentiseringstyp har följande fyra alternativ:

   • Ingen: Ingen autentisering.
   • Enskilda konton: Dessa autentiseringar lagras i en lokal eller Azure-baserad databas.
   • Microsoft identity platform: Det här alternativet använder Microsoft Entra-ID eller Microsoft 365 för autentisering.
   • Windows: Lämplig för intranätprogram.

   Låt rutan Aktivera containerstöd vara avmarkerad och välj Ingen för autentiseringstyp.

   

5. Välj Skapa.

Visual Studio öppnar det nya projektet.

Om din lösning

Den här lösningen följer designmönstret Razor Page. Det skiljer sig från Modell–View-Controller (MVC) designmönstret eftersom modellen och styrenhetskoden är integrerade i själva Razor-sidan.

Gå igenom din lösning

1. Projektmallen skapar en lösning med ett enda ASP.NET Core-projekt med namnet MyCoreApp. Välj fliken Solution Explorer för att visa innehållet.

   

2. Expandera mappen Pages.

   

3. Välj filen Index.cshtml och visa i kodredigeraren.

   

4. Varje .cshtml-fil har en associerad kodfil. Om du vill öppna kodfilen i redigeraren expanderar du noden Index.cshtml i Solution Explorer och väljer filen Index.cshtml.cs.

   

5. Visa filen Index.cshtml.cs i kodredigeraren.

   

6. Projektet innehåller en wwwroot- mapp, som är roten för din webbplats. Expandera mappen för att visa dess innehåll.

   

   Du kan placera statiskt webbplatsinnehåll som CSS, bilder och JavaScript-bibliotek direkt i sökvägarna där du vill ha dem.

7. Projektet innehåller även konfigurationsfiler som hanterar webbapplikationen under körning. Standardprogrammet konfiguration lagras i appsettings.json. Du kan dock åsidosätta de här inställningarna med hjälp av appsettings.Development.json. Expandera filen appsettings.json för att visa filen appsettings.Development.json.

   

Köra, felsöka och göra ändringar

1. I verktygsfältet väljer du knappen https för att skapa och köra appen i felsökningsläge. Du kan också trycka på F5eller gå till Felsök>Starta felsökning från menyraden.

   

   Not

   Du kan också få ett meddelande som frågar om du vill godkänna ett ASP.NET Core SSL-certifikat. Om du vill visa koden i en webbläsare väljer du Jaoch väljer sedan Ja om du får ett varningsmeddelande om uppföljningssäkerhet. Läs mer om tvinga fram SSL i ASP.NET Core.

2. Visual Studio startar ett webbläsarfönster. Du bör sedan se Hem och Sekretess sidor i menyraden.

3. Välj Sekretess i menyraden. Sidan Sekretess i webbläsaren återger texten som anges i filen Privacy.cshtml.

   

4. Gå tillbaka till Visual Studio och tryck sedan på Skift+F5- för att sluta felsöka. Den här åtgärden stänger projektet i webbläsarfönstret.

5. Öppna Privacy.cshtml för redigering i Visual Studio. Ta sedan bort meningen Använd den här sidan för att beskriva webbplatsens sekretesspolicy och ersätta den med Sidan är under uppbyggnad från och med @ViewData["TimeStamp"].

   

6. Nu ska vi göra en kodändring. Välj Privacy.cshtml.cs. Rensa sedan using-direktiven överst i filen genom att välja följande genväg:

   För muspekaren över eller välj ett nedtonat using-direktiv. En Snabbåtgärder glödlampa visas under caret eller i vänstermarginalen. Välj glödlampan och välj sedan expandera pilen bredvid Ta bort onödiga användningar.

   

   Välj nu Förhandsgranska ändringar för att se vad som ändrats.

   

   Välj Använd. Visual Studio tar bort onödiga using direktiv från filen.

7. Skapa sedan en sträng för det aktuella datumet som är formaterat för din kultur eller region med hjälp av metoden DateTime.ToString.

   • Det första argumentet för metoden anger hur datumet ska visas. I det här exemplet används formatspecificeraren (d) som anger det korta datumformatet.
   • Det andra argumentet är objektet CultureInfo som anger kultur eller region för datumet. Det andra argumentet avgör bland annat språket för alla ord i datumet och vilken typ av avgränsare som används.

   Ändra brödtexten för metoden OnGet() i Privacy.cshtml.cs till följande kod:

   public void OnGet()
   {
      string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
      ViewData["TimeStamp"] = dateTime;
   }
   

8. Observera att följande using direktiv automatiskt läggs till överst i filen:

   using System.Globalization;
   

   System.Globalization innehåller klassen CultureInfo.

9. Tryck på F5 för att öppna projektet i webbläsaren.

10. Längst upp på webbplatsen väljer du Sekretess för att visa dina ändringar.

    

11. Stäng webbläsaren, tryck på Skift+F5 för att sluta felsöka.

Ändra startsidan

1. I Solution Explorerexpanderar du mappen Pages och väljer sedan Index.cshtml.

   

   Filen Index.cshtml motsvarar din startsida i webbappen, som körs via en webbläsare.

   

   I kodredigeraren visas HTML-kod för texten som visas på sidan Start.

   

2. Ersätt texten Välkommen med Hello World!

   

3. Välj https eller tryck på Ctrl+F5 för att köra appen och öppna den i en webbläsare.

   

4. I webbläsaren ser du dina nya ändringar på sidan Start.

   

5. Stäng webbläsaren, tryck på Skift+F5 för att sluta felsöka och spara projektet. Nu kan du stänga Visual Studio.

Nästa steg

Grattis till att du har slutfört den här handledningen! Vi hoppas att du har lärt dig mer om C#, ASP.NET Core och Visual Studio IDE. Om du vill veta mer om hur du skapar en webbapp eller webbplats med C# och ASP.NET fortsätter du med följande självstudie:

Skapa en Razor Pages-webbapp med ASP.NET Core

Eller lär dig hur du containeriserar din webbapp med Docker:

Container Tools i Visual Studio

Relaterade länkar

• Publicera din webbapp till Azure App Service med hjälp av Visual Studio
• Anpassa Visual Studio IDE och Redigeraren