ASP.NET Core Kitap Listeleme Projesi Ders 07

Client Side Validasyon İşleminin Gerçekleştirilmesi

Şimdi validasyon kontrol işlemimiz bizim server tarafında gerçekleştirilmekte, bu tercih edilen bir yöntem değil, güvensiz bir yöntem. Kullanıcının tarayıcısında javascript kapalı olsun veya tarayıcı dışında başka bir mekaniza ile bilgileri göndermek istesin bu sefer validasyon işlemi çalışmayacak ve benim istediğim durum oluşmayacaktır. Ben bunu kesinlikle istemiyorum. Benim bu kontrolümün client side tarafında yapılmasını istiyorum. Bunu yapabilmek için ben solution explorer’da shared klasörü altında yer alan _ValidationScriptPartial.cshtml dosyama geliyorum. Bakın burada benim ihtiyacım olan referans scriptler tanımlanmış, eklenmiş durumda.

Dersin Video eğitimini izlemenizi de öneririm:

_ValidationScriptPartial.cshtml içeriği:




Şimdi buradan Olustur.cshtml dosyamıza gidelim. Bu sayfamda yeni bir bölüm açıyorum ve kodlarımı yazıyorum.

@page
@model KitapListesiProjesi.Pages.KitapListesi.OlusturModel


Yeni Kitap Ekle


@section Scripts { }

Burada partial tag helper kullandım. Buraya da _ValidationScriptPartial dosyam yani validasyon scriptlerimin yer aldığı partial dosyamın adını ekledim. Burada dikkat edin isim hatalı olmasın. Daha sonra uygulamayı çalıştıralım ve görelim.

Video da da görüleceği üzere herhangi bir hatamız yok, artık benim validasyon hem server tarafında hemde client tarafında kontrol ediliyor. Debugger kullanarak bunu test edebilirsiniz. Aynı zamanda sayfa postback olmuyor görüldüğü üzere. Çift taraflı kontrol sağladık.

Hata Mesajının Özelleştirilmesi:

Şimdi gelelim hata mesajının Türkçe verilmesine bunu yapabilmek için benim Models klasörü altında yer alan Kitap model sınıfımdaki KitapAd propertysi üzerinde yer alan Required attribute’ü üzerinde bir değişiklik yapmam gerek. Buraya geliyorum ve kodlarımı değiştiriyorum.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace KitapListesiProjesi.Models
{
    public class Kitap
    {
        [Key]
        public int Id { get; set; }

        [Required(ErrorMessage ="Kitap adı boş geçilemez!")]
        public string KitapAd { get; set; }
        public string Yazar { get; set; }
        public string ISBN { get; set; }
    }
}

ErrorMessage ile ben kendime ait özel hata mesajları oluşturabiliyorum, burada bu işlemi gerçekleştirdim. Daha farklı yöntemler de mevcut. Şimdi uygulma çalıştıralım ve ekran görüntüsünü görelim:

Bir sonraki derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir