Udostępnij przez

Dodawanie walidacji do modelu — jak zaimplementować obsługę niezbędną do włączenia walidacji danych wejściowych

  • Artykuł

Autor : Scott Hanselman

Jest to samouczek dla początkujących, który wprowadza podstawy ASP.NET MVC. Utworzysz prostą aplikację internetową, która odczytuje i zapisuje dane z bazy danych. Odwiedź centrum szkoleniowe ASP.NET MVC , aby znaleźć inne ASP.NET samouczki i przykłady mvc.

W tej sekcji wdrożymy obsługę niezbędną do włączenia walidacji danych wejściowych w naszej aplikacji. Upewnimy się, że zawartość bazy danych jest zawsze poprawna i udostępnimy użytkownikom końcowym przydatne komunikaty o błędach podczas próby wprowadzenia nieprawidłowych danych filmu. Zaczniemy od dodania logiki weryfikacji do klasy Movie.

Kliknij prawym przyciskiem myszy folder Model i wybierz polecenie Dodaj klasę. Nadaj klasie nazwę Movie.

Po utworzeniu modelu jednostki Movie środowisko IDE utworzyło klasę Movie. W rzeczywistości część klasy Movie może znajdować się w jednym pliku i być częścią innej. Jest to nazywane klasą częściową. Rozszerzymy klasę Movie z innego pliku.

Utworzymy częściową klasę filmową, która wskazuje na "klasę buddy" z pewnymi atrybutami, które dadzą wskazówek weryfikacji systemowi. Oznaczymy pola Tytuł i Cena jako Wymagane, a także nalegamy, aby cena mieściła się w określonym zakresie. Kliknij prawym przyciskiem myszy folder Models i wybierz polecenie Dodaj klasę. Nadaj klasie nazwę Movie i kliknij przycisk OK. Oto, jak wygląda nasza częściowa klasa Movie.

using System.ComponentModel.DataAnnotations;

namespace Movies.Models
{
    [MetadataType(typeof(MovieMetadata))]
    public partial class Movie
    {
        class MovieMetadata
        {
            [Required(ErrorMessage="Titles are required")]
            public string Title { get; set; }

            [Range(5,100,ErrorMessage ="Movies cost between $5 and $100.")]
            public decimal Price { get; set; }
        }
    }
}

Re-Run aplikacji i spróbuj wprowadzić film z ceną powyżej 100. Po przesłaniu formularza wystąpi błąd. Błąd jest przechwycony po stronie serwera i występuje po wykonaniu operacji POSTed formularza. Zwróć uwagę, że wbudowane pomocniki HTML ASP.NET MVC były wystarczająco inteligentne, aby wyświetlić komunikat o błędzie i zachować wartości dla nas w elementach pola tekstowego:

CreateWithValidation

To działa świetnie, ale byłoby miło, gdybyśmy mogli powiedzieć użytkownikowi po stronie klienta, natychmiast, zanim serwer się zaangażuje.

Włączmy weryfikację po stronie klienta przy użyciu języka JavaScript.

Dodawanie weryfikacji Client-Side

Ponieważ nasza klasa Movie ma już pewne atrybuty weryfikacji, wystarczy dodać kilka plików JavaScript do szablonu Create.aspx View i dodać wiersz kodu, aby umożliwić weryfikację po stronie klienta.

Z poziomu usługi VWD przejdź do folderu Views/Movie i otwórz plik Create.aspx.

Otwórz folder Scripts w Eksplorator rozwiązań i przeciągnij następujące trzy skrypty do tagu <head>.

  • MicrosoftAjax.js
  • MicrosoftMvcValidation.js

Te pliki skryptów mają być wyświetlane w tej kolejności.

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

Ponadto dodaj ten pojedynczy wiersz powyżej kontrolki Html.BeginForm:

<% Html.EnableClientValidation(); %>

Oto kod wyświetlany w środowisku IDE.

Filmy — Microsoft Visual Web Developer 2010 Express (10)

Uruchom aplikację i ponownie odwiedź stronę /Filmy/Utwórz, a następnie kliknij przycisk Utwórz bez wprowadzania żadnych danych. Komunikaty o błędach są wyświetlane natychmiast bez flash strony, którą kojarzymy z wysyłaniem danych do serwera. Dzieje się tak, ponieważ ASP.NET MVC sprawdza teraz poprawek danych wejściowych zarówno na kliencie (przy użyciu języka JavaScript), jak i na serwerze.

Tworzenie — Windows Internet Explorer

To wygląda dobrze! Teraz dodajmy do bazy danych jedną dodatkową kolumnę.

WsteczDalej