2454

Asp.Net Core 7.0 ile Sıfırdan İleri Seviye Web Geliştirme

Asp.Net Views

Asp.net dersleri serimizin bu bölümünde asp.net views nedir ve nasıl oluşturulur, öğrenelim.

Asp.net Views

Controller' in gönderdiği bilgiyi dinamik bir şekilde işleyerek sayfada gösteren yapıya asp.net view denir.

Örneğin, controller' dan gelen bir ürün listesini bir döngü yardımıyla dolaşıp gelen bilgiyi istenilen html etiketleriyle birleştirip dinamik bir görüntüyü view ile kolaylıkla oluşturabiliriz. Asp.net view ile for, if bloğu gibi dinamik programlama komutlarını rahatlıkla kullanabiliriz. 

Controller' a gelen talep yazılan url şemasına göre belirtilen controller altındaki action metoduna iletilir. Action metodu ise controller' dan gelen bilgiyi alır işler ve sonuç olarak kullanıcıya bir Http Response döndürür. Bir önceki dersimizde bu http response içerisinde sadece yalın bir string bilgi vardı ancak şimdi geriye bir view döndürelim. Geriye view döndüreceğimizden dolayı action metotlarının geri dönüş tipini IActionResult olarak güncelliyorum.

 public class HomeController : Controller
 {
     public IActionResult Index()
     {
         return View();
     }

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

Controller' daki bu güncellemeyi yaptıktan sonra uygulamayı F5 ile çalıştıralım.

asp.net views

Gördüğünüz gibi localhost:5041' e yapılan talep bizi homecontroller altındaki index action metoduna yönlendirir ve action metodu ise geriye bir view döndürür ancak projemize henüz bu action metoduyla ilişkili bir view eklemediğimizden dolayı bulunamadı hatası alırız.

Zaten hata mesajlarından kontrol edersek view sayfalarını nereye eklememiz gerektiğini anlarız. Aranılan konumlar "Views/Home/Index.cshtml" ve "Views/Shared/Index.cshtml" şeklindedir.

Biz view dosyalarını ilk konuma ekleyeceğiz. İlk olarak projemize Views klasörü ve altına ise controller ismiyle bir klasör daha ekleyeceğiz.

Örneğin, HomeController için Views/Home ve ProductsController için Views/Products klasörlerini eklemeliyiz.

asp.net views

Views/Home klasörüne Index.cshtml dosyasını ekleyelim.

asp.net views

asp.net views

asp.net views

Artık HomeController altındaki Index action metoduna gelen talep bize Index.cshtml ismindeki dinamik view sayfasını geriye gönderir. O halde sayfamıza bir html içeriği ekleyelim.

Index.cshtml

<h1>Asp.net Dersleri</h1>
<p>asp.net ile web programlama dersleri</p>

Uygulama çalıştığında aşağıdaki görüntüyü alırız.

asp.net views

 

Artık geriye bir view sayfası döndürüyoruz. Aynı adımları diğer action metotları içinde tekrarlayabilirsiniz.

List action metodu geriyr bir View() döndürür bu view ismi ise action metot ismiyle aynı olmalıdır. Dolayısıyla gene aynı klasör içerisine List.cshtml isminde bir dosya eklemeliyiz.

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

Peki her zaman action metot ismini mi kullanmak zorundayız? Hayır. 

public IActionResult List()
{
      return View("ProductList");
}

Bu durumda List.cshtml ismi yerine ProductList.cshtml ismini kullanıyoruz. Dolayısıyla klasörde ProductList.cshtml isminde bir dosya ekleyip aşağıdaki bilgileri giriniz.

<h1>Ürün Listesi</h1>
<p>Tüm ürün bilgileri listeleniyor.</p>

asp.net views

Peki view dosyalarımızda dinamik bir içeriği nasıl yazacağız. Örneğin controller view' e bir ürün listesi göndersin ve bu ürün listesini sayfada bir döngü yardımıyla gösterelim.