Bu yazımda sizlerle Client Side Validation kavramının ne olduğunu ve nasıl kullanıldığını inceleyeceğiz.
Client Side Validation Nedir?
MVC uygulamasında model yapısında Javascript kütüphanesi yükleyerek tarayıcı tabanlı yapılan validasyon işlemlerine denir.
Resim-1
Visual Studio geliştirme ortamını açalım, File>New>Project yolunu izleyerek MVC projemizi oluşturmaya başlayalım.
Resim-2
Templates>Visual C#>Web şablonlarından ASP.NET Web Application seçeneğini seçelim, projemize Name kısmından isim verelim. OK tuşuna tıklayarak devam edelim.
Resim-3
Empty şablonunu seçtikten sonra MVC seçeneğini de seçelim ve OK tuşuna tıklayıp projemizi oluşturalım.
Resim-4
Tools>Nuget Package Manager>Manage Nuget Package For Solution seçeneğini tıklayalım ve Jquery Validation ve Unobtrusive Validation kütüphanesini yükleme işlemlerine başlayalım.
Resim-5
Jquery Validation ve Unobtrusive Validation kütüphanesini projemize yükleyelim.
Resim-6
Jquery Validation yükledikten sonra MVC sürümümüze uygun olan kütüphaneyi de projemize ekleyelim.
Resim-7
Controller dosyamıza bir isim verelim ve Add seçeneği ile ekleme işlemini gerçekleştirelim.
Resim-8
Views klasörüne sağ tıklayalım Add>View seçeneğini seçelim.
Resim-9
View adımızı _Layout olarak verelim ve sayfalarımız için bir adet Master Page oluşturalım.
Resim-10
ActionResult metodumuza sağ tıklayalım Add View seçeneği ile projemize View ekleyelim.
Resim-11
Index adı metot adı ile aynı olarak gelmektedir. Add seçeneğine tıklayalım ve Layout dosyamızın yolunu belirterek View ekleme işlemini gerçekleştirelim.
Resim-12
Models klasörüne sağ tıklayalım Add>Class seçeneğini seçelim.
Resim-13
Class dosyamıza isim verip Add seçeneği ile ekleme işlemini gerçekleştirelim.
Resim-14
Class dosyamızda değişkenlerimizi atayalım ve sınıfımızı değişken olarak tanıtalım.
Resim-15
Context Class dosyamızı da Models klasörümüzün altına ekleyelim.
Resim-16
Models klasörümüzü validasyon işlemlerini yapacağımız Class dosyamızı da ekleyelim ve kurallarımızı belirtelim.
Resim-17
Model olarak kullanacağımız Class içerisine validasyon Attribute tanıtımını yapalım.
Resim-18
Layout dosyamızı düzenleyelim ve Jquery ile Css dosyalarımızı ekleyelim.
Resim-19
Validasyon işlemi için kullanacağımız sayfa içerisinde Model sınıfımızdan gelen verileri aktaralım ve Model sınıfımızı tanıtalım. Validasyon işlemleri için Html Helper ile Enable işlemlerini gerçekleştirelim.
Resim-20
Controller dosyamızda validasyon işlemini kontrol ederek eğer validasyon sağlanmamış ise sayfaya yeni bir model tanımlayarak gönderelim.
Resim-21
Global.asax dosyamız içerisinde yazmış olduğumuz validasyon sınıfımızı sistemimize tanıtalım ve projemizi çalıştıralım.
Resim-22
Formumuza validasyonlarımızı çalıştıracak şekilde verilerimizi yazalım tarayıcı tabanlı Validate işlemi yaptığımız için uyarılar karşımıza hemen çıkmaktadır.
Resim-23
Client Side Validasyon işlemlerimizi çalıştırmış olduk.
Bir sonra ki yazıda görüşmek dileğiyle.
Bu konuyla ilgili sorularınızı alt kısımda bulunan yorumlar alanını kullanarak sorabilirsiniz.
Referanslar
TAGs: mvc, mvc nedir,asp.net mvc,microsoft,mvc html,html helpers, validation,validation data,data anotations,mvc annotations,context,mvc context,mvc validation,validation message,validation nedir,model state,model state nedir,model binder,jquery,mvc jquery,jquery validation,client validation nedir,client side validation
