Film Modeline Doğrulama Mantığı Ekleme

tarafından Rick Anderson

Not

Bu öğreticinin ASP.NET MVC 5 ve Visual Studio 2013 kullanan güncelleştirilmiş bir sürümü burada sağlanır. Daha güvenlidir, takip etmek çok daha kolaydır ve daha fazla özellik gösterir.

Bu bölümde modele Movie doğrulama mantığı ekleyeceksiniz ve kullanıcı uygulamayı kullanarak film oluşturmaya veya düzenlemeye çalıştığında doğrulama kurallarının zorunlu kılındığından emin olacaksınız.

Öğeleri KURU Tutma

ASP.NET MVC'nin temel tasarım kümelerinden biri DRY 'dur ("Kendinizi Tekrar etmeyin"). ASP.NET MVC, işlevselliği veya davranışı yalnızca bir kez belirtmenizi ve ardından uygulamanın her yerine yansıtılmanızı sağlar. Bu, yazmanız gereken kod miktarını azaltır ve yaptığınız kodun daha az hataya açık olmasını ve bakımının daha kolay olmasını sağlar.

ASP.NET MVC ve Entity Framework Code First tarafından sağlanan doğrulama desteği, DRY ilkesinin nasıl çalıştığının harika bir örneğidir. Doğrulama kurallarını tek bir yerde (model sınıfında) bildirimli olarak belirtebilirsiniz ve kurallar uygulamanın her yerinde uygulanır.

Şimdi film uygulamasında bu doğrulama desteğinden nasıl yararlanabileceğinize bakalım.

Film Modeline Doğrulama Kuralları Ekleme

Sınıfına doğrulama mantığı Movie ekleyerek başlayacaksınız.

Movie.cs dosyasını açın. Dosyanın en üstüne ad alanına başvuran System.ComponentModel.DataAnnotations bir using deyim ekleyin:

using System.ComponentModel.DataAnnotations;

Ad alanının içermediğini System.Webfark edin. DataAnnotations, herhangi bir sınıfa veya özelliğe bildirim temelli olarak uygulayabileceğiniz yerleşik bir doğrulama öznitelikleri kümesi sağlar.

Şimdi yerleşik Required, StringLengthve Range doğrulama özniteliklerinden yararlanmak için sınıfını güncelleştirinMovie. Özniteliklerin nereye uygulanacağını gösteren bir örnek olarak aşağıdaki kodu kullanın.

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

    [Required]
    public string Title { get; set; }

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

    [Required]
    public string Genre { get; set; }

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Uygulamayı çalıştırdığınızda aşağıdaki çalışma zamanı hatasını tekrar alırsınız:

Veritabanı oluşturulduktan sonra 'MovieDBContext' bağlamını arkalayan model değişti. Veritabanını (https://go.microsoft.com/fwlink/?LinkId=238269) güncelleştirmek için Code First Migrations kullanmayı göz önünde bulundurun.

Şemayı güncelleştirmek için geçişleri kullanacağız. Çözümü derleyin ve Paket Yöneticisi Konsolu penceresini açın ve aşağıdaki komutları girin:

add-migration AddDataAnnotationsMig
update-database

Bu komut tamamlandığında Visual Studio, belirtilen ada (AddDataAnnotationsMig) sahip yeni DbMigration türetilmiş sınıfı tanımlayan sınıf dosyasını açar ve yönteminde Up şema kısıtlamalarını güncelleştiren kodu görebilirsiniz. Title ve Genre alanları artık null değer atanamaz (başka bir ifadeyle bir değer girmeniz gerekir) ve Rating alanın uzunluğu en fazla 5 olur.

Doğrulama öznitelikleri, uygulandıkları model özelliklerinde zorlamak istediğiniz davranışı belirtir. Required özniteliği, bir özelliğin bir değere sahip olması gerektiğini belirtir; bu örnekte, bir filmin geçerli olması için Title, ReleaseDate, Genreve Price özellikleri için değerlere sahip olması gerekir. Range özniteliği, bir değeri belirtilen bir aralık içinde kısıtlar. StringLength özniteliği, bir dize özelliğinin uzunluk üst sınırını ve isteğe bağlı olarak en düşük uzunluğunu ayarlamanıza olanak tanır. İç türler (örneğin decimal, int, float, DateTime) varsayılan olarak gereklidir ve özniteliği gerekmez Required .

Code First, bir model sınıfında belirttiğiniz doğrulama kurallarının uygulama değişiklikleri veritabanına kaydetmeden önce uygulanmasını sağlar. Örneğin, aşağıdaki kod yöntem çağrıldığında SaveChanges bir özel durum oluşturur, çünkü gerekli Movie birkaç özellik değeri eksiktir ve fiyat sıfırdır (geçerli aralığın dışındadır).

MovieDBContext db = new MovieDBContext();

Movie movie = new Movie();
movie.Title = "Gone with the Wind";
movie.Price = 0.0M;

db.Movies.Add(movie);  
db.SaveChanges();        // <= Will throw server side validation exception  

Doğrulama kurallarının .NET Framework tarafından otomatik olarak zorlanması, uygulamanızın daha sağlam olmasına yardımcı olur. Ayrıca, bir şeyi doğrulamayı unutamamanızı ve yanlışlıkla hatalı verilerin veritabanına girişine izin vermenizi sağlar.

Güncelleştirilmiş Movie.cs dosyası için tam bir kod listesi aşağıdadır:

using System;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;

namespace MvcMovie.Models {
    public class Movie {
        public int ID { get; set; }

        [Required]
        public string Title { get; set; }

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

        [Required]
        public string Genre { get; set; }

        [Range(1, 100)]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [StringLength(5)]
        public string Rating { get; set; }
    }

    public class MovieDBContext : DbContext {
        public DbSet<Movie> Movies { get; set; }
    }
}

ASP.NET MVC'de Doğrulama Hatası Kullanıcı Arabirimi

Uygulamayı yeniden çalıştırın ve /Movies URL'sine gidin.

Yeni bir film eklemek için Yeni Oluştur bağlantısına tıklayın. Formu bazı geçersiz değerlerle doldurun ve oluştur düğmesine tıklayın.

Not

ondalık ayırıcı için virgül (",") kullanan İngilizce olmayan yerel ayarlar için jQuery doğrulamasını desteklemek için, kullanmak Globalize.parseFloatüzere globalize.js ve belirli kültürlerinizi/globalize.cultures.js dosyanızı(kimden https://github.com/jquery/globalize ) ve JavaScript'i eklemeniz gerekir. Aşağıdaki kod, Views\Movies\Edit.cshtml dosyasında "fr-FR" kültürüyle çalışacak değişiklikleri gösterir:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/globalize.js"></script>
    <script src="~/Scripts/globalize.culture.fr-FR.js"></script>
    <script>
        $.validator.methods.number = function (value, element) {
            return this.optional(element) ||
                !isNaN(Globalize.parseFloat(value));
        }
        $(document).ready(function () {
            Globalize.culture('fr-FR');
        });
    </script>
    <script>
        jQuery.extend(jQuery.validator.methods, {    
            range: function (value, element, param) {        
                //Use the Globalization plugin to parse the value        
                var val = $.global.parseFloat(value);
                return this.optional(element) || (
                    val >= param[0] && val <= param[1]);
            }
        });

    </script>
}

Formun, geçersiz veri içeren metin kutularını vurgulamak için otomatik olarak kırmızı kenarlık rengi kullandığına ve her birinin yanına uygun bir doğrulama hata iletisi yaydığına dikkat edin. Hatalar hem istemci tarafı (JavaScript ve jQuery kullanılarak) hem de sunucu tarafı (kullanıcının JavaScript'in devre dışı bırakılması durumunda) zorlanır.

Gerçek bir avantaj, bu doğrulama kullanıcı arabirimini etkinleştirmek için sınıfta veya Create.cshtml görünümünde tek bir kod MoviesController satırını değiştirmeniz gerekmesidir. Bu öğreticide daha önce oluşturduğunuz denetleyici ve görünümler, model sınıfının özelliklerinde Movie doğrulama özniteliklerini kullanarak belirttiğiniz doğrulama kurallarını otomatik olarak aldı.

ve Genreözellikleri Title için gerekli özniteliğin, formu gönderene (Oluştur düğmesine basana) veya giriş alanına metin girip kaldırana kadar zorlanmadığını fark etmiş olabilirsiniz. Başlangıçta boş olan (Oluşturma görünümündeki alanlar gibi) ve yalnızca gerekli özniteliği olan ve başka doğrulama özniteliği olmayan bir alan için, doğrulamayı tetikmek için aşağıdakileri yapabilirsiniz:

1. Sekme tuşuyla alana gidin.
2. Metin girin.
3. Sekme tuşuyla çıkın.
4. Alana geri dönün.
5. Metni kaldırın.
6. Sekme tuşuyla çıkın.

Yukarıdaki sıra, gönder düğmesine basmadan gerekli doğrulamayı tetikler. Herhangi bir alana girmeden gönder düğmesine basmanız istemci tarafı doğrulamasını tetikler. Form verileri, istemci tarafı doğrulama hataları olmadan sunucuya gönderilmez. HTTP Post yöntemine bir kesme noktası koyarak veya fiddler aracını veya IE 9 F12 geliştirici araçlarını kullanarak bunu test edebilirsiniz.

Oluşturma Görünümü ve Oluşturma Eylem Yönteminde Doğrulama Nasıl Gerçekleşir?

Denetleyicideki veya görünümlerdeki kodda herhangi bir güncelleştirme olmadan doğrulama kullanıcı arabiriminin nasıl oluşturulduğunu merak edebilirsiniz. Sonraki liste, sınıftaki yöntemlerin Create MovieController nasıl göründüğünü gösterir. Bunlar, bu öğreticinin önceki bölümlerinde oluşturduğunuz şekilde değiştirilmez.

//
// GET: /Movies/Create

public ActionResult Create()
{
    return View();
}

//
// POST: /Movies/Create

[HttpPost]
public ActionResult Create(Movie movie)
{
    if (ModelState.IsValid)
    {
        db.Movies.Add(movie);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(movie);
}

İlk (HTTP GET) Create eylem yöntemi ilk Oluşturma formunu görüntüler. İkinci ([HttpPost]) sürüm, form gönderisini işler. İkinci Create yöntem ( HttpPost Sürüm), filmin herhangi bir doğrulama hatası olup olmadığını denetlemek için çağırır ModelState.IsValid . Bu yöntemin çağrılması, nesneye uygulanmış olan tüm doğrulama özniteliklerini değerlendirir. Nesnede doğrulama hataları varsa, Create yöntemi formu yeniden görüntüler. Hata yoksa yöntemi yeni filmi veritabanına kaydeder. Kullanmakta olduğumuz film örneğimizde, istemci tarafında doğrulama hataları algılandığında form sunucuya gönderilmez; ikinci Createyöntem hiçbir zaman çağrılmaz. Tarayıcınızda JavaScript'i devre dışı bırakırsanız istemci doğrulaması devre dışı bırakılır ve HTTP POST Create yöntemi filmin doğrulama hataları olup olmadığını denetlemek için çağırır ModelState.IsValid .

yönteminde bir kesme noktası ayarlayabilir ve yöntemin HttpPost Create hiçbir zaman çağrılmadığını doğrulayabilirsiniz; doğrulama hataları algılandığında istemci tarafı doğrulaması form verilerini göndermez. Tarayıcınızda JavaScript'i devre dışı bırakırsanız, formu hatalarla gönderirseniz kesme noktasına isabet eder. JavaScript olmadan da tam doğrulama elde edersiniz. Aşağıdaki görüntüde, Internet Explorer'da JavaScript'in nasıl devre dışı bırakılası gösterilmektedir.

Aşağıdaki görüntüde FireFox tarayıcısında JavaScript'i devre dışı bırakma gösterilmektedir.

Aşağıdaki görüntüde, JavaScript'in Chrome tarayıcısıyla nasıl devre dışı bırakılası gösterilmektedir.

Aşağıda, öğreticinin önceki bölümlerinde iskelesini oluşturduğunuz Create.cshtml görünüm şablonu yer almaktadır. Hem ilk formu görüntülemek hem de hata durumunda yeniden görüntülemek için yukarıda gösterilen eylem yöntemleri tarafından kullanılır.

@model MvcMovie.Models.Movie

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Movie</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ReleaseDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ReleaseDate)
            @Html.ValidationMessageFor(model => model.ReleaseDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Genre)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Genre)
            @Html.ValidationMessageFor(model => model.Genre)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price)
        </div>
        <div class="editor-label">
    @Html.LabelFor(model => model.Rating)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Rating)
    @Html.ValidationMessageFor(model => model.Rating)
</div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Kodun her Movie özelliğin öğesinin çıktısını almak için nasıl bir Html.EditorFor yardımcı kullandığına <input> dikkat edin. Bu yardımcının yanında yardımcı yöntemine yapılan Html.ValidationMessageFor bir çağrı bulunur. Bu iki yardımcı yöntem, denetleyici tarafından görünüme geçirilen model nesnesiyle (bu örnekte bir Movie nesne) çalışır. Modelde belirtilen doğrulama özniteliklerini otomatik olarak arar ve hata iletilerini uygun şekilde görüntüler.

Bu yaklaşımda gerçekten hoş olan şey, denetleyicinin veya Görünüm oluştur şablonunun, uygulanan gerçek doğrulama kuralları veya görüntülenen belirli hata iletileri hakkında bir şey bilmesi değildir. Doğrulama kuralları ve hata dizeleri yalnızca sınıfında Movie belirtilir. Bu doğrulama kuralları, Düzenleme görünümüne ve modelinizi düzenleyen oluşturabileceğiniz diğer görünüm şablonlarına otomatik olarak uygulanır.

Doğrulama mantığını daha sonra değiştirmek isterseniz, modele doğrulama öznitelikleri ekleyerek (bu örnekte movie sınıfı) bunu tam olarak tek bir yerde yapabilirsiniz. Uygulamanın farklı bölümlerinin kuralların nasıl uygulandığıyla tutarsız olması konusunda endişelenmeniz gerekmez; tüm doğrulama mantığı tek bir yerde tanımlanır ve her yerde kullanılır. Bu, kodu çok temiz tutar ve bakımını ve gelişmesini kolaylaştırır. Bu da DRY prensibini tamamen yerine getiren bir şey olacağı anlamına geliyor.

Film Modeline Biçimlendirme Ekleme

Movie.cs dosyasını açın ve sınıfını Movie inceleyin. Ad alanı, System.ComponentModel.DataAnnotations yerleşik doğrulama öznitelikleri kümesine ek olarak biçimlendirme öznitelikleri sağlar. Yayın tarihine ve fiyat alanlarına zaten bir DataType numaralandırma değeri uyguladık. Aşağıdaki kod, ReleaseDate uygun DisplayFormat öznitelikle ve Price özelliklerini gösterir.

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

[DataType(DataType.Currency)] 
public decimal Price { get; set; }

DataType Öznitelikler doğrulama öznitelikleri değildir, görünüm altyapısına HTML'nin nasıl işlenip işlenmediğini söylemek için kullanılır. Yukarıdaki örnekte özniteliği, DataType.Date film tarihlerini zaman olmadan yalnızca tarih olarak görüntüler. Örneğin, aşağıdaki DataType öznitelikler verilerin biçimini doğrulamaz:

[DataType(DataType.EmailAddress)]
[DataType(DataType.PhoneNumber)]
[DataType(DataType.Url)]

Yukarıda listelenen öznitelikler yalnızca görünüm altyapısına verileri biçimlendirmek için ipuçları sağlar (ve URL'ler <için ve> e-posta için href="mailto:EmailAddress.com"> gibi <öznitelikler sağlar. Verilerin biçimini doğrulamak için RegularExpression özniteliğini kullanabilirsiniz.

Öznitelikleri kullanmaya DataType alternatif bir yaklaşım olarak açıkça bir DataFormatString değer ayarlayabilirsiniz. Aşağıdaki kod, bir tarih biçimi dizesi (yani "d") ile yayın tarihi özelliğini gösterir. Bunu, yayın tarihinin bir parçası olarak zamanlamak istemediğinizi belirtmek için kullanırsınız.

[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime ReleaseDate { get; set; }

Sınıfın tamamı Movie aşağıda gösterilmiştir.

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

    [Required]
    public string Title { get; set; }

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

    [Required]
    public string Genre { get; set; }

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Uygulamayı çalıştırın ve denetleyiciye Movies göz atın. Sürüm tarihi ve fiyatı güzel bir şekilde biçimlendirilmiştir. Aşağıdaki görüntüde, kültür olarak "fr-FR" kullanan sürüm tarihi ve fiyatı gösterilmektedir.

Aşağıdaki görüntüde, varsayılan kültürle (İngilizce ABD) görüntülenen aynı veriler gösterilmektedir.

Serinin bir sonraki bölümünde uygulamayı gözden geçirecek ve otomatik olarak oluşturulan Details ve Delete yöntemlerinde bazı iyileştirmeler yapacağız.

Geriİleri