Övning – Lägga till dataverifiering på serversidan och klientsidan i adressformuläret

  • 8 minuter

Blazor kan binda formulär till modeller i ditt program. Om du dekorerar dessa modeller med dataanteckningar kan du få valideringar på klient- och serversidan utan att skriva mer kod.

Appen lägger inte order korrekt när en klient inte anger ett namn och några adressfält. Teamet vill att du förbättrar valideringarna så att fler av fälten inkluderas. De vill också ha några minsta längder och teckenvalidering.

I den här övningen ersätter du den aktuella verifieringen på serversidan för att använda dataanteckningar. Sedan ser du hur du hanterar valideringsmeddelanden och förbättrar det färdiga valideringsstödet. I det sista steget styr du hur formuläret skickas och skickar bara ett formulär när alla fält är giltiga.

Lägga till dataanteckningar i en Blazor-modell

  1. I Visual Studio Code går du till utforskaren och expanderar Modell och väljer sedan Address.cs.

  2. Lägg till en referens överst System.ComponentModel.DataAnnotations i klassen.

    using System.ComponentModel.DataAnnotations;

  3. Lägg till en dataanteckning för varje obligatoriskt fält.

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

    [Required, MinLength(3), MaxLength(100)]
    public string Name { get; set; }

    [Required, MinLength(5), MaxLength(100)]
    public string Line1 { get; set; }

    [MaxLength(100)]
    public string Line2 { get; set; }

    [Required, MinLength(3), MaxLength(50)]
    public string City { get; set; }

    [Required, MinLength(3), MaxLength(20)]
    public string Region { get; set; }

    [Required, RegularExpression(@"^([0-9]{5})$")]
    public string PostalCode { get; set; }
}

  4. I utforskaren expanderar du Sidor och väljer sedan Checkout.razor.

  5. Lägg till valideringssammanfattningen och valideringsanteckningen ovanför den avslutande </EditForm> taggen.

        <ValidationSummary />
    <DataAnnotationsValidator />
  </EditForm>
</div>

  6. I taggen EditForm ersätter du parametern OnSubmit för att använda den giltiga sändningen.

      <EditForm Model=Order.DeliveryAddress OnValidSubmit=PlaceOrder>

  7. Nu kan du ta bort den anpassade logiken på serversidan för att testa om adressen är giltig. CheckSubmission Ta bort metoden i @code blocket.

Testa validering av nya dataanteckningar

  1. Tryck på F5

    Försök att beställa några pizzor utan att ange någon information, sedan med ofullständig information. Observera de detaljerade felmeddelandena för varje fält.

    Skärmbild av felmeddelandena för varje fält.

    Den här interaktionen förbättrar felkontrollerna för varje fält, men felet för varje fält skulle vara bättre bredvid det fält som det relaterar till.

  2. Tryck på Skift + F5 för att stoppa appen från att köras.

Förbättra EditFrom-felmeddelanden

  1. I utforskaren expanderar du Sidor och väljer sedan Checkout.razor.

  2. Ta bort Blazor-komponenten <ValidationSummary /> .

            <DataAnnotationsValidator />
  </EditForm>
</div>

  3. I utforskaren expanderar du Delat och väljer sedan AddressEditor.razor.

  4. Lägg till ett anpassat valideringsmeddelande under varje fält.

    <div class="form-field">
    <label>Name:</label>
    <div>
        <InputText @bind-Value="Address.Name" />
        <ValidationMessage For="@(() => Address.Name)" />
    </div>
</div>

<div class="form-field">
    <label>Line 1:</label>
    <div>
        <InputText @bind-Value="Address.Line1" />
        <ValidationMessage For="@(() => Address.Line1)" />
    </div>
</div>

<div class="form-field">
    <label>Line 2:</label>
    <div>
        <InputText @bind-Value="Address.Line2" />
        <ValidationMessage For="@(() => Address.Line2)" />
    </div>
</div>

<div class="form-field">
    <label>City:</label>
    <div>
        <InputText @bind-Value="Address.City" />
        <ValidationMessage For="@(() => Address.City)" />
    </div>
</div>

<div class="form-field">
    <label>Region:</label>
    <div>
        <InputText @bind-Value="Address.Region" />
        <ValidationMessage For="@(() => Address.Region)" />
    </div>
</div>

<div class="form-field">
    <label>Postal code:</label>
    <div>
        <InputText @bind-Value="Address.PostalCode" />
        <ValidationMessage For="@(() => Address.PostalCode)" />
    </div>
</div>

  5. I utforskaren expanderar du Modell och väljer sedan Address.cs.

  6. Lägg till ett anpassat felmeddelande för varje fälts dataanteckning.

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

    [Required, MinLength(3, ErrorMessage = "Please use a Name bigger than 3 letters."), MaxLength(100, ErrorMessage = "Please use a Name less than 100 letters.")]
    public string Name { get; set; }

    [Required, MinLength(5, ErrorMessage = "Please use an Address bigger than 5 letters."), MaxLength(100, ErrorMessage = "Please use an Address less than 100 letters.")]
    public string Line1 { get; set; }

    [MaxLength(100)]
    public string Line2 { get; set; }

    [Required, MinLength(3, ErrorMessage = "Please use a City bigger than 3 letters."), MaxLength(50, ErrorMessage = "Please use a City less than 50 letters.")]
    public string City { get; set; }

    [Required, MinLength(3, ErrorMessage = "Please use a Region bigger than 3 letters."), MaxLength(20, ErrorMessage = "Please use a Region less than 20 letters.")]
    public string Region { get; set; }

    [Required, RegularExpression(@"^([0-9]{5})$", ErrorMessage = "Please use a valid Postal Code with five numbers.")]
    public string PostalCode { get; set; }
}

Testa validering av nya dataanteckningar

  1. Tryck på F5

    Animerad gif som visar felmeddelandena för varje fält som visas när data är ogiltiga.

    Adressformuläret visar dynamiskt felmeddelande under ett fält som har ogiltiga data. Den här interaktionen sker på klientsidan och förhindrar att kunder anger felaktiga adresser.

  2. Tryck på Skift + F5 för att stoppa appen från att köras.

Återställ det övergripande felmeddelandet och inaktivera skicka-knappen

  1. I utforskaren expanderar du Sidor och väljer sedan Checkout.razor.

  2. Lägg till en OnInvalidSubmit parameter som anropar en ShowError metod för komponenten EditForm .

    <EditForm Model=Order.DeliveryAddress OnValidSubmit=PlaceOrder OnInvalidSubmit=ShowError>

  3. Lägg till en ShowError-metod som uppdaterar egenskapen isError .

    protected void ShowError()
{
    isError = true;
}

  4. PlaceOrder Ändra metoden för att uppdatera isError egenskaperna ochisSubmitting.

    async Task PlaceOrder()
{
    isError = false;
    isSubmitting = true;
    var response = await HttpClient.PostAsJsonAsync(
        $"{NavigationManager.BaseUri}orders", OrderState.Order);
    var newOrderId= await response.Content.ReadFromJsonAsync<int>();
    OrderState.ResetOrder();
    NavigationManager.NavigateTo($"myorders/{newOrderId}");
}

  5. Tryck på F5

    Skärmbild av det övergripande felmeddelandet som visas.

    Felmeddelandet visas om kunden försöker skicka ett ogiltigt formulär.

  6. Tryck på Skift + F5 för att stoppa appen från att köras.

Aktivera skicka-knappen när alla fält är korrekta

Skulle en bättre användarupplevelse vara att en kund inte kan skicka sin beställning förrän de har slutfört alla fält? Nu ska vi ändra utcheckningssidan så att den stöder det här kravet. EditForm Ändra till att använda en EditContext i stället för en modell.

  1. I utforskaren expanderar du Sidor och väljer sedan Checkout.razor.

  2. Uppdatera EditForm element.

    <EditForm EditContext=editContext OnValidSubmit=PlaceOrder>

  3. Ändra knappelementet så att parametern isError används.

    <button class="checkout-button btn btn-warning" type="Submit" disabled=@isError>

  4. I blocket @code lägger du till en deklaration för den nya EditContext.

    private EditContext editContext;

  5. Initiera kontexten med orderleveransadressen.

    protected override void OnInitialized()
{
    editContext = new(Order.DeliveryAddress);
    editContext.OnFieldChanged += HandleFieldChanged;
}

    Den här koden gör det också möjligt att länka en händelsehanterare till när ett fält ändras. I den nya hanteraren kan du kontrollera om modellen är giltig och ange den isError på rätt sätt.

        private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
    {
        isError = !editContext.Validate();
        StateHasChanged();
    }

  6. Nu när vi har skapat en händelsehanterare bör vi ta bort den när utcheckningskomponenten inte längre behöver den.

    public void Dispose()
{
    editContext.OnFieldChanged -= HandleFieldChanged;
}

  7. För att implementera Dispose funktionen måste du också meddela Blazor. Lägg till den här koden överst på sidan under instruktionerna @inject .

    @implements IDisposable

  8. Ta bort alla referenser till isSubmitting och uppdatera PlaceOrder metoden.

    async Task PlaceOrder()
{
  var response = await HttpClient.PostAsJsonAsync(NavigationManager.BaseUri + "orders", OrderState.Order);
  var newOrderId= await response.Content.ReadFromJsonAsync<int>();
  OrderState.ResetOrder();
  NavigationManager.NavigateTo($"myorders/{newOrderId}");
}

  9. Tryck på F5

    Animerad gif som visar att knappen Placera ordning är inaktiverad tills alla fält har rätt värden.

    En kund uppmanas nu att ange information och att börja med knappen Förbeställning är inaktiverad. Först när alla obligatoriska fält har data blir knappen klickbar.

  10. Tryck på Skift + F5 för att stoppa appen från att köras.