Deel 8 van de reeks zelfstudies op Razor Pagina's

Door Rick Anderson

In deze sectie wordt validatielogica toegevoegd aan het Movie model. De validatieregels worden afgedwongen wanneer een gebruiker een film maakt of bewerkt.

Validering

Een belangrijk tenet van softwareontwikkeling wordt DRY ("Dniet Repeat Yzelf") genoemd. Razor Pages moedigt de ontwikkeling aan waarbij de functionaliteit eenmaal wordt opgegeven en wordt weerspiegeld in de hele app. DRY kan helpen:

• Verminder de hoeveelheid code in een app.
• Maak de code minder foutgevoelig en eenvoudiger te testen en te onderhouden.

De validatieondersteuning van Razor Pages en Entity Framework is een goed voorbeeld van het DRY-principe:

• Validatieregels worden declaratief opgegeven op één plaats, in de modelklasse.
• Regels worden overal in de app toegepast.

Validatie in .NET 10

In .NET 10 zijn de geïntegreerde validatie-API's verplaatst naar het Microsoft.Extensions.Validation NuGet-pakket. Deze wijziging maakt de validatie-API's beschikbaar buiten ASP.NET Core HTTP-scenario's.

Om de API's te gebruiken Microsoft.Extensions.Validation :

• Voeg de volgende pakketreferentie toe:

  <PackageReference Include="Microsoft.Extensions.Validation" Version="10.0.0" />
  

  De functionaliteit blijft hetzelfde, maar vereist nu een expliciete pakketreferentie.

• Validatieservices registreren met afhankelijkheidsinjectie:

  builder.Services.AddValidation();
  

Validatieregels toevoegen aan het filmmodel

De System.ComponentModel.DataAnnotations-naamruimte biedt:

• Een set ingebouwde validatiekenmerken die declaratief worden toegepast op een klasse of eigenschap.
• Opmaakkenmerken zoals [DataType] die helpen bij het opmaken en geen validatie bieden.

Werk de Movie-klasse bij om te profiteren van de ingebouwde [Required], [StringLength], [RegularExpression]en [Range] validatiekenmerken.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace RazorPagesMovie.Models;

public class Movie
{
    public int Id { get; set; }

    [StringLength(60, MinimumLength = 3)]
    [Required]
    public string Title { get; set; } = string.Empty;

    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z\s]*$")]
    [Required]
    [StringLength(30)]
    public string Genre { get; set; } = string.Empty;

    [RegularExpression(@"^[A-Z]+[a-zA-Z0-9""'\s-]*$")]
    [StringLength(5)]
    [Required]
    public string Rating { get; set; } = string.Empty;
}

De validatiekenmerken geven gedrag op voor het afdwingen van de modeleigenschappen waarop ze worden toegepast:

• De kenmerken [Required] en [MinimumLength] geven aan dat een eigenschap een waarde moet hebben. Niets voorkomt dat een gebruiker witruimte invoert om aan deze validatie te voldoen.

• Het kenmerk [RegularExpression] wordt gebruikt om te beperken welke tekens kunnen worden ingevoerd. In de voorgaande code Genre:

  • Mag alleen letters gebruiken.
  • De eerste letter moet een hoofdletter zijn. Spaties zijn toegestaan, maar getallen en speciale tekens zijn niet toegestaan.

• De RegularExpressionRating:

  • Vereist dat het eerste teken een hoofdletter is.
  • Hiermee worden speciale tekens en nummers toegestaan in achtereenvolgende spaties. "PG-13" is geschikt als beoordeling, maar is niet geldig voor een Genre.

• Het [Range] kenmerk beperkt een waarde tot binnen een opgegeven bereik.

• Het kenmerk [StringLength] kan een maximale lengte van een tekenreekseigenschap en eventueel de minimale lengte instellen.

• Waardetypen, zoals decimal, int, float, DateTime, zijn inherent vereist en hebben het kenmerk [Required] niet nodig.

De voorgaande validatieregels worden gebruikt voor demonstratie, ze zijn niet optimaal voor een productiesysteem. Het voorgaande voorkomt bijvoorbeeld dat u een filmnaam met slechts twee tekens invoert en speciale tekens niet toestaat in Genre.

Het automatisch afdwingen van validatieregels door ASP.NET Core helpt het volgende:

• Maak de app robuuster.
• Verminder de kans op het opslaan van ongeldige gegevens in de database.

Validatiefout Gebruikersinterface in Razor Pagina's

Voer de app uit en navigeer naar Pagina's/films.

Selecteer de koppeling Nieuwe maken. Vul het formulier in met een aantal ongeldige waarden. Wanneer de validatie aan de clientzijde van jQuery de fout detecteert, wordt er een foutbericht weergegeven.

Notitie

Mogelijk kunt u geen decimale komma's invoeren in decimale velden. Als u ondersteuning wilt bieden voor jQuery-validatie voor niet-Engelstalige landinstellingen die een komma (",") gebruiken voor een decimaalteken en niet-US-English datumnotaties, moet u stappen uitvoeren om uw app te globaliseren. Zie deze GitHub-opmerking 4076 voor instructies over het toevoegen van komma's.

U ziet hoe in het formulier automatisch een validatiefout wordt weergegeven in elk veld met een ongeldige waarde. De fouten worden afgedwongen aan de clientzijde, met behulp van JavaScript en jQuery en aan de serverzijde, wanneer een gebruiker JavaScript heeft uitgeschakeld.

Een belangrijk voordeel is dat geen codewijzigingen nodig waren op de pagina's Maken of Bewerken. Zodra gegevensaantekeningen op het model zijn toegepast, is de validatiegebruikersinterface ingeschakeld. De Razor pagina's die in deze tutorial zijn gemaakt, hebben automatisch de validatieregels opgehaald door gebruik te maken van validatie-attributen voor de eigenschappen van de Movie modelklasse. Testvalidatie met behulp van de pagina Bewerken, dezelfde validatie wordt toegepast.

De formuliergegevens worden pas op de server geplaatst als er geen validatiefouten aan de clientzijde zijn. Controleer of formuliergegevens niet worden gepost door een of meer van de volgende methoden:

• Plaats een onderbrekingspunt in de methode OnPostAsync. Verzend het formulier door Maken of Opslaante selecteren. Het onderbrekingspunt wordt nooit bereikt.
• Gebruik het hulpprogramma Fiddler.
• Gebruik de ontwikkelhulpprogramma's van de browser om netwerkverkeer te bewaken.

Validatie aan serverzijde

Wanneer JavaScript in de browser is uitgeschakeld, zal het formulier met fouten naar de server worden verzonden.

Optioneel, validatie aan serverzijde testen:

1. Schakel JavaScript uit in de browser. JavaScript kan worden uitgeschakeld met de ontwikkelhulpprogramma's van de browser. Als JavaScript niet kan worden uitgeschakeld in de browser, kunt u een andere browser proberen.

2. Stel een onderbrekingspunt in de OnPostAsync methode van de pagina Maken of Bewerken in.

3. Verzend een formulier met ongeldige gegevens.

4. Controleer of de status van het model ongeldig is:

    if (!ModelState.IsValid)
    {
       return Page();
    }
   

U kunt ook validatie aan de clientzijde uitschakelen op de server.

De volgende code toont een gedeelte van de Create.cshtml-pagina die eerder in de zelfstudie is opgezet. Het wordt gebruikt door de pagina's 'Maken' en 'Bewerken' om:

• Het oorspronkelijke formulier weergeven.
• Het formulier opnieuw weergeven in het geval van een fout.

<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Movie.Title" class="control-label"></label>
        <input asp-for="Movie.Title" class="form-control" />
        <span asp-validation-for="Movie.Title" class="text-danger"></span>
    </div>

De Helper voor invoertags maakt gebruik van de DataAnnotations kenmerken en produceert HTML-kenmerken die nodig zijn voor jQuery-validatie aan de clientzijde. In de Helper voor validatietags worden validatiefouten weergegeven. Zie Validatie voor meer informatie.

De pagina's Maken en bewerken bevatten geen validatieregels. De validatieregels en de foutreeksen worden alleen opgegeven in de klasse Movie. Deze validatieregels worden automatisch toegepast op Razor Pagina's die het Movie model bewerken.

Wanneer validatielogica moet worden gewijzigd, wordt deze alleen uitgevoerd in het model. Validatie wordt consistent toegepast in de app. Validatielogica wordt op één plaats gedefinieerd. Validatie op één plaats helpt de code schoon te houden en maakt het eenvoudiger om de code te onderhouden en bij te werken.

DataType-kenmerken gebruiken

Bekijk de Movie klasse. De System.ComponentModel.DataAnnotations naamruimte biedt naast de ingebouwde set validatiekenmerken opmaakkenmerken. Het kenmerk [DataType] wordt toegepast op de eigenschappen ReleaseDate en Price.

[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

[Range(1, 100)]
[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal Price { get; set; }

De [DataType] kenmerken bieden:

• Indicaties voor de rendering-engine om de gegevens op te maken.
• Levert kenmerken zoals <a> voor URL's en <a href="mailto:EmailAddress.com"> voor e-mail.

Gebruik het kenmerk [RegularExpression] om de indeling van de gegevens te valideren. Het kenmerk [DataType] wordt gebruikt om een gegevenstype op te geven dat specifieker is dan het intrinsieke type database. [DataType] kenmerken zijn geen validatiekenmerken. In de voorbeeld-app wordt alleen de datum weergegeven, zonder tijd.

De opsomming DataType biedt veel gegevenstypen, zoals Date, Time, PhoneNumber, Currency, EmailAddressen meer.

De [DataType] kenmerken:

• Kan de app inschakelen om automatisch typespecifieke functies te bieden. U kunt bijvoorbeeld een mailto: koppeling maken voor DataType.EmailAddress.
• Kan in browsers die HTML5 ondersteunen een datumselector bieden DataType.Date.
• HTML 5-data-verzenden, uitgesproken als 'data dash', kenmerken die HTML 5-browsers gebruiken.
• Zorg ervoor dat geen validatie wordt gegeven.

DataType.Date geeft het formaat van de weergegeven datum niet op. Normaal gesproken wordt het gegevensveld weergegeven met behulp van de standaardindelingen, gebaseerd op de CultureInfovan de server.

De [Column(TypeName = "decimal(18, 2)")] gegevensaantekening is vereist, zodat Entity Framework Core Price correct kan toewijzen aan valuta's in de database. Zie gegevenstypenvoor meer informatie.

Het kenmerk [DisplayFormat] wordt gebruikt om expliciet de datumnotatie op te geven:

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime ReleaseDate { get; set; }

De instelling ApplyFormatInEditMode geeft aan dat de opmaak wordt toegepast wanneer de waarde wordt weergegeven voor bewerking. Dit gedrag is mogelijk niet gewenst voor sommige velden. In valutawaarden is het valutasymbool bijvoorbeeld meestal niet gewenst in de gebruikersinterface voor bewerken.

Het kenmerk [DisplayFormat] kan op zichzelf worden gebruikt, maar het is over het algemeen een goed idee om het kenmerk [DataType] te gebruiken. Het kenmerk [DataType] geeft de semantiek van de gegevens weer in plaats van hoe deze op een scherm worden weergegeven. Het kenmerk [DataType] biedt de volgende voordelen die niet beschikbaar zijn voor [DisplayFormat]:

• De browser kan HTML5-functies inschakelen, bijvoorbeeld om een agendabesturingselement, het valutasymbool, e-mailkoppelingen, enzovoort weer te geven.
• De browser geeft standaard gegevens weer met de juiste indeling op basis van de landinstelling.
• Met het kenmerk [DataType] kan het ASP.NET Core-framework de juiste veldsjabloon kiezen om de gegevens weer te geven. De DisplayFormat, als het op zichzelf wordt gebruikt, gebruikt de tekenreekssjabloon.

Opmerking: jQuery-validatie werkt niet met het kenmerk [Range] en DateTime. Met de volgende code wordt bijvoorbeeld altijd een validatiefout aan de clientzijde weergegeven, zelfs wanneer de datum zich in het opgegeven bereik bevindt:

[Range(typeof(DateTime), "1/1/1966", "1/1/2020")]

Het is een best practice om het compileren van harde datums in modellen te voorkomen, dus het gebruik van het kenmerk [Range] en DateTime wordt afgeraden. Gebruik Configuration voor datumbereiken en andere waarden die regelmatig worden gewijzigd in plaats van deze in code op te geven.

De volgende code toont het combineren van kenmerken op één regel:

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace RazorPagesMovie.Models;

public class Movie
{
    public int Id { get; set; }

    [StringLength(60, MinimumLength = 3)]
    public string Title { get; set; } = string.Empty;

    [Display(Name = "Release Date"), DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z\s]*$"), Required, StringLength(30)]
    public string Genre { get; set; } = string.Empty;

    [Range(1, 100), DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z0-9""'\s-]*$"), StringLength(5)]
    public string Rating { get; set; } = string.Empty;
}

Aan de slag met Razor Pages en EF Core toont geavanceerde EF Core bewerkingen met Razor Pages.

Migraties toepassen

De DataAnnotations die zijn toegepast op de klasse, veranderen het schema. De DataAnnotations worden bijvoorbeeld toegepast op het veld Title:

[StringLength(60, MinimumLength = 3)]
[Required]
public string Title { get; set; } = string.Empty;

• Beperkt de tekens tot 60.
• Staat een null-waarde niet toe.

De Movie tabel heeft momenteel het volgende schema:

CREATE TABLE [dbo].[Movie] (
    [ID]          INT             IDENTITY (1, 1) NOT NULL,
    [Title]       NVARCHAR (MAX)  NULL,
    [ReleaseDate] DATETIME2 (7)   NOT NULL,
    [Genre]       NVARCHAR (MAX)  NULL,
    [Price]       DECIMAL (18, 2) NOT NULL,
    [Rating]      NVARCHAR (MAX)  NULL,
    CONSTRAINT [PK_Movie] PRIMARY KEY CLUSTERED ([ID] ASC)
);

De voorgaande schemawijzigingen zorgen er niet voor dat EF een uitzondering genereert. Maak echter een migratie zodat het schema consistent is met het model.

Visual Studio

Selecteer in het menu ToolsNuGet Package Manager > Package Manager Console. Voer in de PMC de volgende opdrachten in:

Add-Migration New_DataAnnotations
Update-Database

Update-Database voert de Up methode van de klasse New_DataAnnotations uit.

Visual Studio Code

Gebruik de volgende opdrachten om een migratie toe te voegen voor de nieuwe DataAnnotations:

dotnet ef migrations add New_DataAnnotations
dotnet ef database update

dotnet ef database update voert de Up methode van de klasse New_DataAnnotations uit.

Bekijk de Up methode:

public partial class New_DataAnnotations : Migration
{
    /// <inheritdoc />
    protected override void Up(MigrationBuilder migrationBuilder)
    {
        migrationBuilder.AlterColumn<string>(
            name: "Title",
            table: "Movie",
            type: "nvarchar(60)",
            maxLength: 60,
            nullable: false,
            oldClrType: typeof(string),
            oldType: "nvarchar(max)");

        migrationBuilder.AlterColumn<string>(
            name: "Rating",
            table: "Movie",
            type: "nvarchar(5)",
            maxLength: 5,
            nullable: false,
            oldClrType: typeof(string),
            oldType: "nvarchar(max)");

        migrationBuilder.AlterColumn<string>(
            name: "Genre",
            table: "Movie",
            type: "nvarchar(30)",
            maxLength: 30,
            nullable: false,
            oldClrType: typeof(string),
            oldType: "nvarchar(max)");
    }

De bijgewerkte Movie tabel heeft het volgende schema:

CREATE TABLE [dbo].[Movie] (
    [ID]          INT             IDENTITY (1, 1) NOT NULL,
    [Title]       NVARCHAR (60)   NOT NULL,
    [ReleaseDate] DATETIME2 (7)   NOT NULL,
    [Genre]       NVARCHAR (30)   NOT NULL,
    [Price]       DECIMAL (18, 2) NOT NULL,
    [Rating]      NVARCHAR (5)    NOT NULL,
    CONSTRAINT [PK_Movie] PRIMARY KEY CLUSTERED ([ID] ASC)
);

Publiceren naar Azure

Zie zelfstudie: Een ASP.NET Core-app bouwen in Azure met SQL Databasevoor meer informatie over het implementeren in Azure.

Bedankt voor het voltooien van deze inleiding tot Razor Pages. Aan de slag met Razor Pages en EF Core is een uitstekend vervolg op deze zelfstudie.

Aanvullende informatiebronnen

• Tag Helpers in formulieren in ASP.NET Core
• globalisatie en lokalisatie in ASP.NET Core
• Tag Helpers in ASP.NET Core (Taghelpers in ASP.NET Core zijn hulpmiddelen die ontwikkeld zijn om het werken met HTML-tags eenvoudiger te maken binnen de .NET-omgeving)
• Tag Helpers maken in ASP.NET Core-

Volgende stappen

Vorige: Een nieuw veld toevoegen