Övning – Skapa ett ASP.NET Core-webbappsprojekt från en mall

Slutförd

I den här övningen kommer du att:

  • Skapa ett ASP.NET Core-webbappsprojekt från en mall.
  • Granska strukturen för det skapade projektet.

Skapa en ASP.NET Core-webbapp med hjälp av en mall

Skapa ett nytt projekt i Visual Studio Code:

  1. Välj utforskarvyn:

    Skärmbild av att välja utforskarvyn.

  2. Välj knappen Skapa .NET-projekt . Du kan också ta upp kommandopaletten med Ctrl och sedan skriva "" för att hitta och välja +

    Skärmbild av att välja Skapa .NET-projekt.

  3. Välj projektmallen ASP.NET Core Empty i listan.

  4. I dialogrutan Projektplats skapar du en mapp med namnet MyWebApp som ska innehålla projektet.

  5. Öppna kommandopaletten och namnge projektet MyWebApp, där du ser till att använda samma versaler. Det är viktigt att du använder det här exakta projektnamnet för att se till att namnrymderna för kod i den här instruktionen matchar dina.

  6. Välj Skapa projekt från kommandopaletten.

Granska projektets struktur

Innehållet i projektmappen MyWebApp visas i Visual Studio Code Explorer:

Skärmbild av projektfilerna i Visual Studio Code Explorer.

Skapa ett nytt projekt från en terminal eller kommandoraden:

  1. Ändra till katalogen (cd) som ska innehålla projektet.

  2. Skapa en ASP.NET Core-webbapp i en katalog med namnet MyWebApp genom att köra .NET CLI-kommandot dotnet new:

    dotnet new web -o MyWebApp
    

    Ett nytt ASP.NET Core-tomt webbprojekt skapas i en katalog med namnet MyWebApp.

    Följande beskriver kommandosyntaxen:

    • dotnet new: Ett .NET CLI-kommando för att skapa olika .NET-utvecklingsartefakter baserat på mallar som projekt, lösningar, bibliotek, konfiguration och andra specialiserade filer.
    • web: En projektmall som används för att skapa ett tomt ASP.NET Core-webbprojekt som inte innehåller något exempelinnehåll. web är en av de många inbyggda projektmallar som är tillgängliga i .NET SDK.
    • -o: Utdataalternativet anger katalogen där det nya projektet skapas:
      • Om katalogen inte finns skapar .NET CLI den.
      • Katalogen där projektet skapas fungerar som standardprojektnamn, namnområde och sammansättningsnamn (namnet på de kompilerade utdata).
      • Om utdataalternativet -o <directory> inte används används den aktuella katalogen.
  3. Öppna projektmappen MyWebApp .

Granska projektets struktur

Innehållet i projektmappen MyWebApp visas i Visual Studio Code Explorer:

Skärmbild av projektfilerna i Visual Studio Code Explorer.

Följande avsnitt innehåller en översikt över huvudprojektmapparna och filerna för det tomma ASP.NET Core-projektet:

Projektfilen MyWebApp.csproj

.csproj-projektfilen används för att:

  • Konfigurera hur du skapar projektet
  • Ange vilken version av .NET som ska riktas
  • Hantera projektberoenden

.sln-lösningsfilen

När ett ASP.NET Core-projekt skapas eller öppnas i Visual Studio Code (med tillägget C# Dev Kit) skapas en [projektnamn].sln lösningsfil. [projektnamn].sln lösningsfil innehåller information för ett eller flera relaterade projekt, inklusive bygginformation, inställningar och eventuella andra filer som inte är associerade med bara ett visst projekt.

Mappen obj

Mappen obj innehåller mellanliggande filer som används av byggsystemet, inklusive kompilerade objektfiler som genereras från källfilerna. De slutliga byggutdata placeras i en bin mapp som skapades under byggprocessen.

Filen Properties/launchSettings.json

Filen Properties/launchSettings.json innehåller konfigurationsdata för hur appen startas under utvecklingen. De här inställningarna innehåller applicationUrl egenskapen som anger den rot-URL som appen använder, till exempel https://localhost:{port}, där {port} är ett slumpmässigt lokalt portnummer som tilldelades när projektet skapades.

Filen launchSettings.json innehåller följande konfiguration:

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5218",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7140;http://localhost:5218",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Filen Program.cs

Filen Program.cs fungerar som startpunkt för en ASP.NET Core-app och har flera viktiga syften, bland annat:

  • Värdkonfiguration: Konfigurerar värden, inklusive konfiguration av webbservern.
  • Tjänstregistrering: Lägger till tjänster i appens funktioner, till exempel databaskontexter, loggning och specialiserade tjänster för specifika ramverk.
  • Pipelinekonfiguration för mellanprogram: Definierar appens pipeline för hantering av begäranden som en serie mellanprogramsinstanser.
  • Miljökonfiguration: Konfigurerar miljöspecifika inställningar för utveckling, mellanlagring och produktion.

I det nya tomma ASP.NET Core-projektet som du skapade innehåller filen Program.cs följande minimala kod:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () => "Hello World!");

app.Run();

Följande kodrader i den här filen skapar en WebApplicationBuilder med förkonfigurerade standardvärden och skapar appen:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

Metoden app.MapGet() definierar direkt en slutpunkt som hanterar HTTP GET-begäranden:

app.MapGet("/", () => "Hello World!");

app.MapGet("/"): Definierar en väg för HTTP GET-begäran. / Anger att den här vägen svarar på begäranden som görs till appens rot-URL. Till exempel http://localhost:{port}/, där {port} är ett slumpmässigt tilldelat portnummer som tilldelats i filen Egenskaper/launchSettings.json när projektet skapas.

() => "Hello World!": Ett lambda-uttryck som fungerar som begärandehanterare. När en GET-begäran görs till rot-URL:en körs det här lambda-uttrycket och det returnerar strängen "Hello World!"