Del 2, lägg till en kontrollant i en ASP.NET Core MVC-app

Av Rick Anderson

Arkitekturmönstret Model-View-Controller (MVC) separerar en app i tre huvudkomponenter: Model, View och Controller. MVC-mönstret hjälper dig att skapa appar som är mer testbara och enklare att uppdatera än traditionella monolitiska appar.

MVC-baserade appar innehåller:

• Models: Klasser som representerar appens data. Modellklasserna använder valideringslogik för att framtvinga affärsregler för dessa data. Vanligtvis hämtar och lagrar modellobjekt modelltillstånd i en databas. I denna handledning hämtar en Movie-modell filmdata från en databas och tillhandahåller den till visningen eller uppdaterar den. Uppdaterade data skrivs till en databas.
• Views: Vyer är de komponenter som visar appens användargränssnitt (UI). I allmänhet visar det här användargränssnittet modelldata.
• Controllers: Klasser som:
  • Hantera webbläsarbegäranden.
  • Hämta modelldata.
  • Samtalsvymallar som returnerar ett svar.

I en MVC-app visar vyn endast information. Kontrollanten hanterar och svarar på användarindata och interaktion. Kontrollanten hanterar till exempel URL-segment och frågesträngsvärden och skickar dessa värden till modellen. Modellen kan använda dessa värden för att fråga databasen. Till exempel:

• https://localhost:5001/Home/Privacy: specificerar kontrollern Home och åtgärden Privacy.
• https://localhost:5001/Movies/Edit/5: är en begäran om att redigera filmen med ID=5 med hjälp av Movies kontrollanten och åtgärden Edit, som beskrivs senare i självstudien.

Routningsdata förklaras senare i handledningen.

MVC-arkitekturmönstret separerar en app i tre huvudgrupper med komponenter: modeller, vyer och styrenheter. Det här mönstret hjälper till att få en uppdelning av problem: Användargränssnittslogik hör hemma i vyn. Indatalogik hör hemma i kontrollanten. Affärslogik hör hemma i modellen. Den här separationen hjälper till att hantera komplexiteten när du skapar en app, eftersom den möjliggör arbete på en aspekt av implementeringen i taget utan att påverka koden för en annan. Du kan till exempel arbeta med visningskoden utan att vara beroende av affärslogiken.

De här begreppen introduceras och demonstreras i den här självstudieserien när du skapar en filmapp. MVC-projektet innehåller mappar för Controllers och Views.

Lägga till en kontrollant

Visual Studio

I Solution Explorer, högerklicka på Controllers > , Lägg till > Controller.

I dialogrutan Lägg till nytt byggnadsgenererat objekt , välj MVC-styrenhet – tom>Lägg till.

I dialogrutan Lägg till nytt objekt – MvcMovie anger du HelloWorldController.cs och väljer Lägg till.

Visual Studio Code

Välj ikonen EXPLORER och kontrollera sedan (högerklicka) Kontrollanter > Ny fil och ge den nya filen namnet HelloWorldController.cs.

Ersätt innehållet i Controllers/HelloWorldController.cs med följande kod:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    // 
    // GET: /HelloWorld/
    public string Index()
    {
        return "This is my default action...";
    }
    // 
    // GET: /HelloWorld/Welcome/ 
    public string Welcome()
    {
        return "This is the Welcome action method...";
    }
}

Varje public-metod i en kontrollant kan anropas som en HTTP-slutpunkt. I exemplet ovan returnerar båda metoderna en sträng. Observera kommentarerna som föregår varje metod.

En HTTP-slutpunkt:

• Är en målbar URL i webbprogrammet, till exempel https://localhost:5001/HelloWorld.
• Kombinerar:
  • Protokollet som används: HTTPS.
  • Nätverksplatsen för webbservern, inklusive TCP-porten: localhost:5001.
  • Mål-URI: HelloWorld.

Den första kommentaren anger att detta är en HTTP GET-metod som anropas genom att lägga till /HelloWorld/ till bas-URL:en.

Den andra kommentaren anger en HTTP GET--metod som anropas genom att lägga till /HelloWorld/Welcome/ till URL:en. Senare i självstudien används scaffoldmotor för att generera HTTP POST-metoder som uppdaterar data.

Kör appen utan felsökningsprogrammet genom att trycka på Ctrl+F5.

Lägg till /HelloWorld till sökvägen i adressfältet. Metoden Index returnerar en sträng.

MVC anropar kontrollantklasser och åtgärdsmetoderna i dem, beroende på den inkommande URL:en. Standardlogik för URL-routning som används av MVC använder ett format som det här för att avgöra vilken kod som ska anropas:

/[Controller]/[ActionName]/[Parameters]

Routningsformatet anges i filen Program.cs.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

När du bläddrar till appen och inte anger några URL-segment, används som standard kontrollanten "Home" och "Index"-metoden som anges på mallraden som är markerad ovan. I föregående URL-segment:

• Det första URL-segmentet avgör vilken kontrollantklass som ska köras. Så localhost:5001/HelloWorld mappar till klassen HelloWorld Controller.
• Den andra delen av URL-segmentet avgör åtgärdsmetoden för klassen. Så localhost:5001/HelloWorld/Index gör att Index-metoden i klassen HelloWorldController körs. Observera att du bara behövde bläddra till localhost:5001/HelloWorld och att metoden Index anropades som standard. Index är standardmetoden som anropas på en kontrollant om ett metodnamn inte uttryckligen anges.
• Den tredje delen av URL-segmentet ( id) är för routningsdata. Routedata förklaras senare i handledningen.

Bläddra till: https://localhost:{PORT}/HelloWorld/Welcome. Ersätt {PORT} med portnumret.

Metoden Welcome kör och returnerar strängen This is the Welcome action method.... För den här URL:en är kontrollanten HelloWorld och Welcome är åtgärdsmetoden. Du har inte använt [Parameters] del av URL:en ännu.

Ändra koden för att skicka viss parameterinformation från URL:en till kontrollanten. Till exempel /HelloWorld/Welcome?name=Rick&numtimes=4.

Ändra metoden Welcome så att den innehåller två parametrar som visas i följande kod.

// GET: /HelloWorld/Welcome/ 
// Requires using System.Text.Encodings.Web;
public string Welcome(string name, int numTimes = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}");
}

Föregående kod:

• Använder funktionen C# optional-parameter för att ange att parametern numTimes som standard är 1 om inget värde skickas för parametern.
• Använder HtmlEncoder.Default.Encode för att skydda appen mot skadliga indata, till exempel via JavaScript.
• Använder interpolerade strängar i $"Hello {name}, NumTimes is: {numTimes}".

Kör appen och bläddra till: https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4. Ersätt {PORT} med portnumret.

Prova olika värden för name och numtimes i URL:en. MVC-modellbindningen systemet mappar automatiskt de namngivna parametrarna från frågesträngen till parametrar i metoden. Mer information finns i avsnittet Modellbindning.

I föregående bild:

• URL-segmentet Parameters används inte.
• Parametrarna name och numTimes skickas i frågesträngen.
• ? (frågetecken) i ovanstående URL är en avgränsare och frågesträngen följer.
• Tecknet & separerar fält/värde-par.

Ersätt metoden Welcome med följande kod:

public string Welcome(string name, int ID = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, ID: {ID}");
}

Kör appen och ange följande URL: https://localhost:{PORT}/HelloWorld/Welcome/3?name=Rick

I föregående URL:

• Det tredje URL-segmentet matchade routningsparametern id.
• Metoden Welcome innehåller en parameter id som matchade URL-mallen i metoden MapControllerRoute.
• Den avslutande ? startar frågesträngen.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

I föregående exempel:

• Det tredje URL-segmentet matchade routningsparametern id.
• Metoden Welcome innehåller en parameter id som matchade URL-mallen i metoden MapControllerRoute.
• Den avslutande ? (i id?) anger att parametern id är valfri.

Föregående: Kom igångNästa: Lägg till en vy