Zelfstudie: Aan de slag met C# en ASP.NET Core in Visual Studio

In deze zelfstudie voor C#-ontwikkeling met ASP.NET Core maakt u een C#-ASP.NET Core-web-app in Visual Studio.

In deze zelfstudie leert u het volgende:

• Een Visual Studio-project maken
• Een C# ASP.NET Core-web-app maken
• Wijzigingen aanbrengen in de web-app
• IDE-functies verkennen
• De web-app uitvoeren

Voorwaarden

U hebt het volgende nodig om deze zelfstudie te voltooien:

• Visual Studio is geïnstalleerd. Ga naar de downloadpagina van Visual Studio voor een gratis versie. Zie Visual Studio-updatesvoor meer informatie over het upgraden naar de nieuwste Versie van Visual Studio.
• De ASP.NET en webontwikkeling workload is geïnstalleerd. Als u deze workload in Visual Studio wilt verifiëren of installeren, selecteert u Tools>Hulpprogramma's en Functies ophalen. Voor meer informatie, zie Workloads of afzonderlijke onderdelen wijzigen.

Een project maken

Eerst maakt u een ASP.NET Core-project. Het projecttype wordt geleverd met alle sjabloonbestanden die u nodig hebt om een volledig functionele website te bouwen.

1. Selecteer in het startvenster Een nieuw project maken.

   

2. Selecteer in het venster Een nieuw project maken de optie C# uit de lijst met talen. Selecteer vervolgens Windows- in de lijst Alle platforms en Web in de lijst Alle projecttypen.

   Nadat u de filters voor taal, platform en projecttype hebt toegepast, selecteert u de ASP.NET Core Web App (Razor Pages) sjabloon en selecteert u vervolgens Volgende.

   

3. In het Configureren van uw nieuwe project venster, voert u MyCoreApp in het Projectnaam veld in. Selecteer vervolgens Volgende.

   

4. Controleer in het venster Aanvullende informatie of .NET 8.0- wordt weergegeven in het veld Target Framework.

   In dit venster kunt u ondersteuning voor containers inschakelen en verificatieondersteuning toevoegen. De vervolgkeuzelijst voor verificatietype heeft de volgende vier opties:

   • Geen: Geen verificatie.
   • afzonderlijke accounts: Deze authenticaties worden opgeslagen in een lokale of Azure-database.
   • Microsoft Identity Platform: deze optie maakt gebruik van Microsoft Entra-id of Microsoft 365 voor verificatie.
   • Windows: geschikt voor intranettoepassingen.

   Laat het selectievakje Containerondersteuning inschakelen ongevinkt en selecteer Geen voor authenticatietype.

   

5. Selecteer maken.

Visual Studio opent uw nieuwe project.

Over uw oplossing

Deze oplossing volgt het Razor Page ontwerppatroon. Het is anders dan het Model-View-Controller (MVC) ontwerppatroon omdat het is gestroomlijnd om het model en de controllercode in de Razor Page zelf op te nemen.

Rondleiding door uw oplossing

1. De projectsjabloon maakt een oplossing met één ASP.NET Core-project met de naam MyCoreApp. Selecteer het tabblad Solution Explorer om de inhoud ervan weer te geven.

   

2. Vouw de map Pagina's uit.

   

3. Selecteer het bestand Index.cshtml en bekijk deze in de code-editor.

   

4. Elk .cshtml-bestand heeft een gekoppeld codebestand. Als u het codebestand in de editor wilt openen, vouwt u het knooppunt Index.cshtml uit in Solution Explorer en selecteert u het bestand Index.cshtml.cs.

   

5. Bekijk het Index.cshtml.cs-bestand in de code-editor.

   

6. Het project bevat een map wwwroot, die de hoofddirectory voor uw website is. Vouw de map uit om de inhoud ervan weer te geven.

   

   U kunt statische site-inhoud zoals CSS, afbeeldingen en JavaScript-bibliotheken rechtstreeks in de paden plaatsen waar u ze wilt.

7. Het project bevat ook configuratiebestanden die de web-app tijdens runtime beheren. De standaardtoepassing configuratie wordt opgeslagen in appsettings.json. U kunt deze instellingen echter overschrijven met behulp van appsettings.Development.json. Vouw het appsettings.json bestand uit om het appsettings.Development.json bestand weer te geven.

   

Uitvoeren, fouten opsporen en wijzigingen aanbrengen

1. Selecteer op de werkbalk de knop https om de app te bouwen en uit te voeren in de foutopsporingsmodus. U kunt ook op F5drukken of vanuit de menubalk naar Foutopsporing>Foutopsporing starten gaan.

   

   Notitie

   Mogelijk krijgt u ook een bericht met de vraag of u een ASP.NET Core SSL-certificaat wilt accepteren. Als u de code in een webbrowser wilt weergeven, selecteert u Jaen selecteert u vervolgens Ja als u een beveiligingswaarschuwingsbericht voor opvolgen ontvangt. Meer informatie over het afdwingen van SSL in ASP.NET Core.

2. Visual Studio start een browservenster. Vervolgens zou u de pagina's Startpagina en Privacy in de menubalk moeten zien.

3. Selecteer Privacy- in de menubalk. De pagina Privacy in de browser geeft de tekst weer die is ingesteld in het bestand Privacy.cshtml.

   

4. Ga terug naar Visual Studio en druk op Shift+F5- om de foutopsporing te stoppen. Met deze actie wordt het project gesloten in het browservenster.

5. Open in Visual Studio Privacy.cshtml om te bewerken. Verwijder vervolgens de zin Gebruik deze pagina om het privacybeleid van uw site te beschrijven en vervang deze door Deze pagina staat in aanbouw vanaf @ViewData["TimeStamp"].

   

6. Nu gaan we een codewijziging aanbrengen. Selecteer Privacy.cshtml.cs. Schoon vervolgens de using instructies bovenaan in het bestand op door de volgende snelkoppeling te selecteren:

   Beweeg de muis over of selecteer een grijs weergegeven using-instructie. Een Snelle Acties-icoontje verschijnt onder de caret of in de linkermarge. Selecteer de gloeilamp en selecteer vervolgens de uitvouwpijl naast Onnodig gebruik vanverwijderen.

   

   Selecteer nu Voorvertoning van wijzigingen om te zien welke wijzigingen zijn aangebracht.

   

   Selecteer Toepassen. Visual Studio verwijdert de overbodige using instructies uit het bestand.

7. Maak vervolgens een tekenreeks voor de huidige datum die is opgemaakt voor uw cultuur of regio met behulp van de methode DateTime.ToString.

   • Het eerste argument voor de methode geeft aan hoe de datum moet worden weergegeven. In dit voorbeeld wordt de notatieaanduiding (d) gebruikt die de korte datumnotatie aangeeft.
   • Het tweede argument is het CultureInfo object waarmee de cultuur of regio voor de datum wordt opgegeven. Het tweede argument bepaalt onder andere de taal van woorden in de datum en het type scheidingsteken dat wordt gebruikt.

   Wijzig de hoofdtekst van de methode OnGet() in Privacy.cshtml.cs in de volgende code:

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

8. U ziet dat de volgende using instructie automatisch wordt toegevoegd aan het begin van het bestand:

   using System.Globalization;
   

   System.Globalization bevat de klasse CultureInfo.

9. Druk op F5- om uw project in de webbrowser te openen.

10. Selecteer boven aan de website Privacy- om uw wijzigingen weer te geven.

    

11. Sluit de webbrowser en druk op Shift+F5- om de foutopsporing te stoppen.

De startpagina wijzigen

1. Vouw in Solution Explorerde map Pagina's uit en selecteer Index.cshtml.

   

   Het bestand Index.cshtml komt overeen met uw startpagina in de web-app, die in een webbrowser wordt uitgevoerd.

   

   In de code-editor ziet u HTML-code voor de tekst die wordt weergegeven op de startpagina.

   

2. Vervang de welkom tekst door Hallo wereld!

   

3. Selecteer https- of druk op Ctrl+F5- om de app uit te voeren en te openen in een webbrowser.

   

4. In de webbrowser ziet u uw nieuwe wijzigingen op de Startpagina.

   

5. Sluit de webbrowser, druk op Shift+F5- om de foutopsporing te stoppen en uw project op te slaan. U kunt Visual Studio nu sluiten.

Volgende stappen

Gefeliciteerd met het voltooien van deze zelfstudie. We hopen dat u genoten hebt van het leren over C#, ASP.NET Core en de Visual Studio IDE. Ga verder met de volgende zelfstudie voor meer informatie over het maken van een web-app of website met C# en ASP.NET:

Een Razor Pages-web-app maken met ASP.NET Core-

U kunt ook leren hoe u uw web-app in een container kunt opslaan met Docker:

Containerhulpmiddelen in Visual Studio

Verwante koppelingen

• uw web-app publiceren naar Azure App Service met behulp van Visual Studio
• Visual Studio IDE en Editor aanpassen