ASP.NET Core Basit Uygulama Örneği 3.Bölüm

Validasyonların Eklenmesi

Yazıya başlamadan hemen önce belirteyim, arzu ederseniz bu yazıya ilişkin olarak aşağıdaki videoyu da izleyebilirsiniz.

Verileri doğrulama için artık uygulamama validasyonları ekleyebilirim. Validasyon uygulamalarımızda özellikle kullanıcılardan bilgi isterken form uygulamalarında mutlaka kullanılması gereken özelliklerdendir. Validasyon olmadığı durumlarda kullanıcılar alakasız verileri girebilirler, telefon no alanına isim girme gibi veya ilgili alanları boş geçebilirler, belki de biz boş geçilsin istemediğimiz alan vardır. Tabi validasyon şartları eklemek herşeyi hatasız yapacağız anlamına gelmiyor ama bir nebze kullanıcıdan daha doğru verilerin gelmesini sağladığımız yapıyı oluşturuyoruz.

ASP.NET Core’da validasyon kurallarını model içinde tanımlamış olduğumuz classlara ait propertylere yeni nitelikler ekleyerek gerçekleştiririz. Böylelikle bu classların her kullanıldığı yerde bu validasyon kuralları da geçerli olur. Validasyon kuralları ASP.NET Core’da System.ComponentModel.DataAnnotations kütüphanesi vasıtası ile kullanılır. Şimdi uygulamamıza geri dönersek; Cevap classımdaki kodları aşağıdaki şekilde değiştiriyorum:

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

namespace Dugun_Davet.Models
{
    public class Cevap
    {
        [Required(ErrorMessage = "Lütfen ad alanını boş geçmeyiniz!")]
        public string Ad { get; set; }

        [Required(ErrorMessage = "Lütfen soyad alanını boş geçmeyiniz!")]
        public string Soyad { get; set; }

        [Required(ErrorMessage = "Lütfen email alanını boş geçmeyiniz!")]
        [EmailAddress]
        public string Email { get; set; }

        [Required(ErrorMessage = "Lütfen telefon alanını boş geçmeyiniz!")]        
        public string Telefon { get; set; }

        [Required(ErrorMessage = "Lütfen davete katılma alanını cevaplandırınız!")]
        public bool? DuguneGelecekmi { get; set; }

    }
}

Burada yer alan validasyonlar içinde Required ilgili alanın boş geçilmesini önlemek için kullanılır. Kullanıcı mutlaka bu alana veri girmelidir. EmailAddress ise girilen email verisinin doğru formatta olup olmadığını kontrol eder. Tipik bir email nasıldır öncesinde kişinin adresi yazar akabinde @ işareti gelir ve sonrasında domain adı gelir, a.com gibi. Burada bu yapıyı kontrol eder. Email adresinin doğruluğu değil, formatı kontrol edilir.

Dikkat ederseniz classımda DuguneGelecekmi property’si için bool? Şeklinde tanımlama yapmıştım. Bunun anlamı buradaki değişken tipi bool olacak ama boş bırakma ihtimali de olabilir demek. Yani kullanıcı buraya True,False veya null değer gönderebilir. İşte veri içinde null değer gelmesin diye de yine Required validasyon kontrol özelliğini kullanıyorum. Ben burada eğer standrt bir bool kullansa idim gelen değer ya true ya da false olacaktı, dolayısı ile burada Required validasyon kontrolüne de ihtiyaç olmayacaktı.

Tekrar HomeController’a geri dönüyor ve kodlarımı aşağıdaki şekilde düzenliyorum:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Dugun_Davet.Models;

namespace Dugun_Davet.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger< HomeController> _logger;

        public HomeController(ILogger< HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ViewResult CevapFormu()
        {
            return View();
        }

        [HttpPost]
        public ViewResult CevapFormu(Cevap KatilimciCevabi)
        {
            if(ModelState.IsValid)
            {
                Repository.CevapEkle(KatilimciCevabi);
                
                return View("Tesekkurler", KatilimciCevabi);
            }
            else
            {
                return View();
            }
            
        }

        public ViewResult CevaplariListele()
        {
            return View(Repository.Cevaplar.Where(x => x.DuguneGelecekmi == true));
        }


        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}


Controller sınıfında ModelState özelliği bulunmaktadır. Burada eğer ModelState.isValid özelliği True ise Model Binding işlevi ile bağladığımız KatilimciCevabi ve Teşekkürler sayfası geriye döndürülür. Validasyonlar doğru demektir.

Eğer ModelState.isValid özelliği false dönerse o zaman validasyon hataları var demektir. ModelState özelliği tarafından döndürülen her nesne sorunların ayrıntılarını sağlayabilir.

Şimdi benim HomeControllerda yer alan CevapFormu actionana bağlı olan view yani CevapFormu.cshtml üzerinde de kodlarımda düzenleme yapmam gerek. Kodları aşağıdaki şekilde değiştiriyorum.

@model Dugun_Davet.Models.Cevap
@{
    Layout = null;
}

< !DOCTYPE html>

< html>
< head>
    
    CevapFormu
< /head>
< body>
    < form asp-action="CevapFormu" method="post">
        
< /body> < /html>

Bu sayfaya bir asp-validation-summary özelliği ekledim. Bu özellik div etiketine uygulanır ve ilgili View oluşturulduğunda var ise var olan validasyon hatalarının gösterilmesi için olanak sağlar.

Şimdi uygulamayı çalıştıralım ve ilgili formda bazı yerleri boş geçelim, nasıl bir sonuçla karşılaşıyoruz görelim:

Bakın sadece isim alanını girdim, diğer alanların hepsi için validasyon hata mesajlarım çıktı. Validasyonlarım çalışıyor yani. Dolayısı ile artık tüm veriler girilmedikte formum gönderilmeyecek ve teşekkürler sayfamız yüklenmeyecek. Tüm ilgili alanların doldurulması gerekecek.

Şimdi biraz görselleştirmeye başlayalım.

Uygulamaya artık CSS ve JavaScript dosyaları ekleyebiliriz. Böylelikle şu üst imageda gördüğünüz iğrenç durumdan kurtulalım 😊

ASP.NET Core projelerinde temel kurallardan biri de eğer statik bir sayfa ekleyecekseniz bu sayfaların mutlaka wwwroot klasörü içinde yer alması gerektiğidir. CSS dosyaları için wwwroot/CSS oluşturabilirsiniz veya JavaScript dokümanlarınız için wwwroot/JS oluşturabilirsiniz. Ana kural tüm hepsi wwwroot kök dizini içinde yer almalıdır.

Bu arada proje oluşturulurken sistem tarafından wwwroot/css klasörü altında site.css dokümanı oluşuturuldu. O dokümanı sildim, sizlerde silebilirsiniz ihtiyacımız yok ona.

Şimdi wwwroot klasörü altında yer alan css klasörüne sağ tıklayın, Add>New Item deyin buraya bir StyleSheet dosyası ekleyeceğiz. Adını styles.css verdim ve add tuşuna basarak ekledim.

Oluşturulan dokümandaki kodları siliyor ve aşağıdaki kodları yazıyorum.

.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}


Bu stylesheet’i uygulamak için Views>Home klasörü altında yer alan CevapFormu.cshtml dokümanını açıyorum ve buradaki head etiketleri arasını aşağıdaki şekilde düzenliyorum.

< head>
    
    CevapFormu
    
< /head>

Burada Link ile ve Linke ait olan href özelliği ile css dokümanınım yerini gösteriyorum. Dikkat ederseniz adreste wwwroot klasörünün adı yazmıyor. Bunun sebebi şu, ASP.NET Core kullanılacak server bu tarzdaki statik sayfaların, CSS dokümanları, JavaScript dokümanları, görseller, site haritaları gibi dokümanların wwwroot altında olduğunu biliyor ve varsayılan olarak bunu kabul ediyor. Dolayısı ile üstte belirttiğimiz gibi bu gibi statik sayfalarınızı mutlaka wwwroot sayfası altına yerleştiriniz.

Şimdi uygulamayı tekrar çalıştırıp, yine sadece isim alanını dolduruyorum.

Bakın artık validasyon kontrolü sonucu hata mesajlarım artık kırmızı renkli. Ve sayfada yer alan giriş komponentlerimde de iç renk kırmızı, çizgiler kırmızı.

Bizim fonksiyonel tüm işlemlerimiz bitti ama görünüm hala kötü. Görünüm iyileştirme ile devam edelim. Biz projemizi oluşturken MVC seçerek oluşturduk. Dolayısı ile bazı paketler hali hazırda bu proje için yüklü durumda. Bunların içinde BootStrap’de var. En sık kullanılan tematik yapılardan olan ve twitter tarafından geliştirilmiş olan BootStrap’i ele alalım. ASP.NET Core ve bir çok web geliştirme uygulamalarında çok sık başvurulan bir açık kaynak kodlu bir yapı BootStrap.  Güçlü bir CSS yapısına sahip aynı zamanda.

Şimdi açılış sayfası ile başlayalım. Bootstrap ile ilgili dokümanları da wwwroot>lib altında saklıyoruz. Bootstrap hakkında detaylı bilgi almak için http://getbootstrap.com adresini inceleyebilirsiniz.

Açılış sayfasına tekrar dönelim, Views/Home klasörü içinde yer alan Index sayfasında kodlarımı aşağıdaki gibi düzenliyorum.

@{
    Layout = null;
}

< html>
< head>
    
    
    Index
< /head>
< body>
    

Merhaba


Düğün Davet Uygulaması



İsmail GÜRSOY

Cevap Formu

< /body> < /html>

Yukarıdaki kodda görüleceği üzere öncelikle Link ile href özelliğini kullanarak BootStrap dosyamın yolunu verdim. Bootstrap.css dosyam wwwroot/lib/bootstrap/dist/css adresinin altında. Yine ASP.NET Core’da bu bir kuraldır, bu şekilde third party CSS ve JS dosyaları wwwroot/lib klasörünün altında yer alırlar.

BootStrap.css dokümanımı Index sayfama bağladıktan sonra kullanmış olduğum öğelere stil verebilirim. Üstteki kodda da class özelliği ile bunları gerçekleştirdik. Yazıları ortalamak için text-center kullandım. Buton için btn btn-primary kullandım.

Yazıları ortalamak için text-center kullandım dedim ama aslında doğrusu şu, hem yazıları hemde text-center’a bağlı olan etiket içinde yer alan tüm öğeleri ortalama işlemi için text-center kullandım diyelim.

btn btn-primary ile sayfamda yer alan butonu daha güzel bir hale getirdim. Bunların hepsi BootStrap.css dosyasında tanımlı özellikleri almakta. Sonuç olarak açılış sayfası artık aşağıdaki gibi:

Şimdilik yazımıza ara verelim, son bölümde de görselleştirmeye diğer sayfalar üzerinde devam edelim. Görüşmek üzere..

Bir cevap yazın

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