> ASP.NET | MVC > ASP.NET MVC – View

ASP.NET MVC – View

Posted on 24 Ocak 2012 | ASP.NET MVC – View için 10 yorum

ASP.NET MVC yazı dizimize başladığımız buradaki makale ile mvc mantığını anladık ve View’in ne olduğunu yüzeysel olarak öğrendik. ASP.NET MVC kullanarak bir web sitesi yapmak istiyorsanız View’ler öğrenmeniz gereken en önemli konulardan birisidir.

Bu yazımızda MVC mimarisinin sunum kısmı olan View’leri inceleyeceğiz.

View

İlk makalemizde bahsettiğimiz gibi View, MVC mimarisinin sunum kısmıdır. Controller bir action metodu işletikten sonra, kullanıcı tarafına bir şeyler göstermesi gerekmektedir. Tabi View kullanması zorunlu olmasa da genelde Controller, o action metoda ait bir View, yine zorunlu olmasa da bir model aracılığı ile verileri alarak kullanıcıya iletir. Burada bilmemiz gereken en önemli nokta View’ler Controller ve Model’ler gibi önceden derlenmiş bir dll içinde değillerdir ve dinamik olarak derlenirler. Kısaca şematize edecek olursak:

MVC Çalışma Diyagramı

MVC Çalışma Diyagramı

Tabi gerçek bir sitede durumlar daha da karmaşık olabilir. Diyagrama bakacak olursak, gelen kulanıcı isteğinin nasıl işlenip View’lere iletildiğini görmüş olacağız. Her action metod farklı biçimlerde View’lere erişmektedir. Kimisi herhangi bir model yapısı kullanmadan direk olarak, kimisi model kullanarak, kimisi de entity ya da başka bir veritabanı sınıfını model olarak kullanarak View’ler ile kullanıcının karşısına çıkmaktadır.

Önceden de bahsettiğimiz gibi, View’e kadar olan bütün kısımlar önceden derlenmiş assembly dll dosyaları içinde bulunmakta ve View kısmı ise kullanıcı istekte bulunduğunda dinamik olarak derlenmektedir. Bu yüzden siteniz sunucuya atılırken View dosyaları (Razor için cshtml ya da vbhtml) olduğu gibi atılırlar. Bununla birlikte dinamik derleme olduğundan dolayı, View dosyaları içinde sunucu kodlarına ait çok fazla kod bulunmaması iyi olur. Genelde View dosyalarında kontrol yapıları(switch case, if..) ve döngüler(for, while) gibi basit kodlar bulunmalı. Daha karmaşık işlemleri Controller içinde halletmeli ve sonucu View’e yollamalıyız. Burası önemli bir nokta idi. Ayrıca her ne kadar View içinden veritabanına da erişbilseniz de bu yapmamanız gereken bir işlem olacaktır. Veritabanı işlemlerinizi de Controller içinde yapmalısınız.

MVC’de bir action metoda ait view’i çağırmak için metod sonundan şu şekilde çıkış sağlarız:



		


Eğer bu action metod’a ait herhangi bir View dosyası oluşturmaz ve bu kodu çalıştırırsanız, MVC sistemi size bu action’a ait View’ı nerelerde arayıp da bulamadığına dair bir hata mesajı gösterecektir. Bu hata mesajına dikkat ederseniz varsayılan konumlar ilk başta View klasöründe Controller ile aynı isimde bir klasör içindeki bir cshtml dosyasıdır. Bu dosya, view’ı çağırdığımız action metod ile aynı isme sahiptir. Yukarıdaki örnek için bu dosya ActionMehod1.cshtml olacaktır.

View() metoduile başka başka view’ler de çağrılabilir. Mesela BaskaBirView gibi bir View dosyasını çağırmak için View(“BaskaBirView”) şeklinde parametre vermeliyiz.

Şimdi basit bir view dosyasını incelemek için ufak bir örnek yapalım. VS ya da VWD’de yeni bir MVC projesi açalım. View engine olarak Razor’u seçelim. Template olarak Empty seçelim ve formu onaylayıp kapatalım. Karşımıza boş bir MVC projesi gelecektir. Solution Explorer’dan Controller klasörüne sağ tuşla tıklayıp Add alt menüsünden Controller seçeneğini seçelim. İsim olarak HomeController girelim.  Karşımıza HomeController içindeki önceden eklenmiş bir bir action metod gelecektir. Şimdilik ismini Index olarak bırakalım ve değiştirmeyelim. Bu metodun herhangi bir yerinde(içinde, isminin üzerinde, vs..) sağ tuşla tıklayıp Add View seçeneğini seçelim. Karşımıza gelecek olan pencere bir MVC projesinde çokca karşılaşacağımız bir penceredir. Kısaca buradaki seçeneklerden bahsedecek olursak;

“View engine”: Bu seçenek, varsayılan olarak proje için belirlediğiniz görünüm motoru ayarlı olarak gelecektir. Bizim için bu seçenek tabi ki Razor olacaktır.

“Create a strongly typed view”: Bu seçenek ile önceden projeye dahil etmiş olduğumuz bir modeli, View’e model olarak tanıtıyoruz. Yani view nesnemize bir modeli dayatmış oluyoruz. Yalnız unutmamanız gereken şey, bu listede yeni eklediğiniz modellerinizin görünmesini istiyorsanız projeyi bir kez derlemeyi unutmamanız gerekmektedir.

“Scaffold template”: Bir proejde, özellik yönetim kısmında ekleme, silme, düzenleme gibi bir işlemler için elimizle tek tek view oluşturmak yerine, buradaki template’leri seçerek daha hızlı bir çekilde bu viewleri oluşturabiliriz.

“Create as a partial view”: Bu seçenek ile view dosyamızın bir partial view olduğunu belirtmiş oluyoruz. Bu konu bir kaç başlık sonra karşınıza gelecek. Bu yüzden bu ksımı geçiyoruz ve boş bırakıyoruz.

“Use a layout or master page”: Buradan Layout dosyamızı belirliyoruz. Bu konuya da daha sonra değineceğiz. Burayı seçili ama boş bırakın.

Bu formu onaylayıp kapattığınızda boş bir view dosyası ile karşı karşıya geleceğiz. View dosyamızı incelemeden önce Solution Explorer’dan Models klasörü altına yeni bir sınıf ekleyelim ve ismine BirModel girelim. Ardından aşağıdaki gibi kodlarını değiştirelim:



		

Şimdi projemizi bir kez derleyelim ve View dosyamızı da şu şekilde değiştirelim:



		

Şimdi bir sonraki adıma geçmeden önce buradaki kodlara bir göz atalım.

İlk satırda view dosyamıza bir model dayatmış olduk. View oluştururken karşımıza gelen form’da “Strongly typed view” ile de seçebileceğimiz bir model ile view dosyamızın kullanacağı model’i belirlemiş oluyoruz. Burada model belirlenirken, model’in tam yolunu belirtmemiz gerekiyor. Ben projeye MvcArticle3_1 gibi garip bir isim verdiğimden dolayı ana namespace olarak bu gözüküyor. Ama siz buraya kendi projenize göre bir namespace’i giremlisiniz. Yani kısacası, model’in namespace’i ile beraber tam yolunu belirtmeniz gerekmetkedir.

Daha sonraki gelen, 3 satırdan oluşan blok ile sayfamızın başlığı belirleniyor. Buradaki ViewBag ve ViewBag.Title ayrıntısına sonra değineceğiz. Sonrasında gelen foreach döngüsü ile BirModel isimli modelimizde bulunan Liste ismindeki List<int> dizisini kullanıyoruz. Dikkat ederseniz bir view’e ait modeli kullanabilmek içni Model değişkenini kullanıyoruz.

Buraya kadar her şey güzel. Şimdi bu view dosyamızı çalışır hale getirmek için Controller sınıfımızda bir kaç satırı dğiştireceğiz. Index action metodunu aşağıdaki gibi değiştirelim:



		

Projeyi derleyip çalıştırdığımızda <ul> , <li> ‘den oluşan çıktımızı görebilirsiniz.

Şimdi farklı bir şey yapacağız ve bu view dosyamızın derlenmiş haline göz atacağız. “C:\Windows\Microsoft.NET\Framework” klasörüne girelim ve buradan kullandığımız .net versiyonunun klasörüne girelim(makale yazılırken 4.0* idi). Bu klasörde “Temporary ASP.NET Files” isminde bir klasör göreceksiniz. Bu klasör altında bulunan root klasörüne girelim ve explorer’dan dosyaları değiştirme tarihine göre sıralayalım. En üsteki klasöre girelim ve “App_Web_index.cshtml.*.cs” ismindeki dosyayı bir editör ile açalım. Buradaki * değişken bir hash değeridir.

View dosyamız ile (Index.cshtml) derlenme esnasında oluşturulmuş olan bu dosyayı karşılaştıralım. Önceden de bahsettiğimiz gibi ASP.NET MVC, view dosyalarını dinamik olarak derler. Fakat view dosyası değiştirilmemiş ise önceden derlenmiş olan halini kullanır ve tekrar derleme gafletinde bulunmaz. Buradaki dosyada da gördüğünüz gibi bütün html bilgileri WriteLiteral fonksiyonu ile sarılmış durumdalar. Razor’un @ işareti ile belirttiğiniz c# kodları ise direk olarak bu dosyaya dahil edilmiştir. View’in çalışma mantığını anlamak için bu karşılaştırmayı yapmanız önemli. Özellikle başka Razor gramerleri ile üretilen sonuca da göz atabilirsiniz. Aynı klasörde “App_Web_*.dll” gibi bir kaç derlenmiş assembly dosyası bulacaksınız. Bu dosyayı reflector ya da VWD içindeki object browser ile açabilirsiniz. Bu assembly’de göreceğiniz gibi Index.cshtml dosyamız, dinamik olarak derlenerek bu dll altına bir sınıf olarak yerleşmiştir. Bir dahaki Index.cshtml dosyası çağrıldığında, view dosyası eğer değiştirilmemişse, direk olarak bu derlenmiş dll kullanılacaktır. Bu yüzden view’in ilk çalıştırılmasından sonra büyük bir performans artışı da olacaktır.

Burada dikkat etmemiz gereken diğer bir husus ise bu üretilmiş olan dosyada view dosyamız bir sınıf haline dönüştürülmüş ve WebViewPage<*.BirModel> gibi bir sınıftan türetilmiştir. İşte “strongly typed” değimi buradan geliyor. View dosyamız, dosyanın başında model belirteci ile belirttiğimiz modeli generic parametre olarak alan bir sınıftan türetilmekte.

Tabi ki bu üretilen dosyanın çok da ayrıntısına inmemize lüzum yok. Fakat View’in çalışma mantığını anlama açısından bu kısım önemliydi.

ViewBag ve ViewData

ViewBag ve ViewData aslında aynı işi yapan ve view ile model’e alternatif olarak controller arasında iletişimi sağlayan iki yöntemdir. ViewBag, C#’ın dinamik nesne özelliğini kullanan bir nesnedir. ViewData ise indeksli bir Dictionary nesnesidir. Dinamik nesne desteklemeyen eski sürüm .net’lerde ViewData kullanılmaktadır. Yeni versiyonlarda hem ViewBag hem de ViewData kullanılabilir. Aşağıdaki kod hem controller’da hem de view dosyasında aynı şekilde kullanılabilir:



		

View dosyası içinde ise:



		

Normalde ViewBag ve ViewData içinde çok fazla kompleks olmayan ve miktarı az verileri barındırmanız performans açısından daha iyi olacaktır. Bir kaç başlık sonra da görebilceğiniz gibi bu nesneleri aşırı derecede kullanmak performansı düşürecektir. Bu nesnler genelde, model’de değişiklik yapamadığınız ya da yapmak istemediğiniz durumlarda kullanılırlar. View içine göndereceğimiz veriler için ilk önce model yapısını düşünmeliyiz.

Html Yardımcı Metodları(Html Helpers)

İlk makalede de bahsettiğimiz gibi MVC, WebForms’daki gibi tut taşı mantığı yerine her bir elemanın elle girilmesini ister. İlk başta bu zor gibi görünse de projenin ilerleyen aşamalarında, tut taşı ve viewstate mantığından çok daha verimli olduğunu göreceksiniz. Özellikle üretilen html kodu, WebForms’daki gibi istemediğiniz bir çok ıvır zıvır html kodları ile sarılı olmayacaktır. Bunun ayrıntısını ilk makalenin başlarında bahsetmiştik. Farkında iseniz “üretilen” html kodundan bahsettim. Evet her ne kadar MVC her şeyi bizim belirlememizi istese de bize yardımcı olacak bir çok metodu da hizmetimize sunmaktadır.

Html yardımcı metodları, System.Mvc.HtmlHelpers ismindeki statik bir sınıfta bulunan metodlardan oluşmaktadır. Bu metodlar ile dinamik olarak oluşturulması gereken bir çok işi gerçekleştirebiliriz. Şimdi ilk başta hazır yardımcı metodlardan en çok kullanacağımız bir kaç tanesini görelim ve ardından kendi yardımcı metodlarımızı nasıl oluşturacağımızı görelim.

Form Oluşturma

Form oluşturmak için biri çirkin ve uzun diğeri kısa ve pratik iki yöntemimiz var. Uzun yöntem:



		

Bu iki kod arasına yazacağınız her şey form içinde olacaktır. Fakat bunun daha pratik yolu ise:



		

olacaktır. Bu blok içine yazacağınız bütün kodlar form içinde bulunacaktır. BeginForm metodu normalde IDisposable arayüzünü tanımlayan MvcForm tipinde bir sınıf üretecektir. IDisposable olduğundan dolayı using terimi ile sardığımızda, .Net using bloğunun bitiminde bu sınıfın Dispose() metodunu çağıracaktır. Bu da EndForm metodunu tetikleyecektir.

Burada verdiğimiz örnekte form onaylandığı zaman sonucu bu view’i çağıran action metoduna gönderecektir. Eğer başka bir action’a gönderim yapmak istersek:



		

yazmalıyız. BeginForm metodunun diğer parametrelerini yardım dosyasında bakabilirsiniz.

Form Elemanlarını Oluşturma

Form elemanlarını oluşturmak için iki farklı metod grubumuz var. Bu gruplardan birisi zorunlu olarak modeli kullanan diğeri ise model kullanmayan metodlardır.

Model Zorunlu Olmayanlar

İlk başta model zorunlu olmayan metodları görelim:



		

(Buradaki açıklama satırları tabiki Razor için uygun bir açıklama satırı değil. Fakat sitede kullandığım syntax renklendirici için böyle yazmak zorunda kaldım.)

Farkında iseniz CheckBox ile iki adet kod üretildi. Normalde browser checkbox seçili olmadığında sunucuya bu değeri yollamaz. Bu yüzden MVC bu durumu düşünerek buraya değeri false olan bir hidden form elemanı ekleyerek checkbox seçilmediğinde değer olarak false yollanması sağlanmaktadır.

Farkında iseniz ilk değer olarak eleman adını ve ikinci değer olarak da elemanın değerini yazıyoruz. Eğer elemanın değerini girmezsek ve sadece adını verirsek:



		

bu durumda değer olarak MVC otomatik olarak bir kaç yere bakacaktır:



		

Tabi burada bakılan değerin tipi ile Html yardımcı metodunun değer tipi aynı olacaktır. Yani CheckBox metodu için boolean tipinde bir değer aranacaktır.

Şimdi daha ilginç bir şey yapalım ve isim olarak şöyle bir şey girelim:



		

Bu durumda bakılacak kısımlar daha da uzayacaktır:



		

Tabi bu liste uzunca bir liste olacaktır. Gördüğünüz gibi girdiğiniz isimler MVC için önemli bir değer arzediyor. Bu yöntemde her ne kadar performans düşüşü olacak gibi görünse de ViewBag ve ViewData içinde sadece bir kaçtane değer olacağı için performans düşüşü de beklenmez. Tabi önceden de bahsettiğimiz gibi ViewBag ve ViewData’da çok az miktarda veri bulundurmalısınız.

Model Zorunlu Olanlar

Html yardımcı metodlarında adı  “For” ile biten metodlar, modeller için özel olarak tasarlanmıştır. Hem performans hem de kolay kullanım açısından mümkün olduğunca bu tarz metodları kullanmanızı tavsiye ediyorum.

Bir önceki başlıkta verdiğimiz metodların tek tek buradaki karşılıklarını vermek yerine, basit bir örnek yapalım. Makalenin başında yaptığımız örnekte bir model oluşturmuştuk. Bu modeli aşağıdaki gibi değiştirelim:



		

Buradaki kullanılan DisplayName, DataType gibi öznitelikleri şimdilik görmezden gelin. Çünkü bu kısım gelecek makalenin konusu. Ama ne işe yaradıklarını View dosyasını gördükten sonra tahmin edersiniz herhalde. Şimdi View dosyamızı açalım ve aşağıdaki gibi değiştirelim:



		

Önceki örnekte dediğim gibi model tanımlamasındaki namespace sizde farklı olabilir, bunu değiştirebilirsiniz.

Şimdi de son olarak Index action metodumuzu aşağıdaki gibi değiştirelim:



		

Derleyip çalıştırdığımızda hazırladığımız modele uygun bir form ile karşılaşacağız. Şimdilik model’deki öznitelik tanımlamaları ve bu form gönderildikten sonra işlenecek kısmı daha sonraki makaleye havale ederek burada sadece View dosyasındaki eklediğimiz metodlara göz atalım.

Farkındaysanız sadece EditorFor metodunu kullanarak üç farklı form elemanı oluşturduk. EditorFor metodu, belirtilen modeldeki özelliğin tipini tespit ederek uygun bir form elemanını sayfaya render etti.

Parametre olarak girilen delegate ile model içinden herhangi bir özelliği seçebiliyoruz. Gerisini metod hallediyor. Tabi ki, bir önceki başlıkta verdiğimiz CheckBox, TextBox gibi metodların CheckBoxFor, TextBoxFor metod karşılıkları da mevcut. Bunların EditorFor‘dan tek farkı, form elemanının tipinin seçimini size bırakmasıdır. Ama model üzerinde bu seçimi yapmak, projenin ilerleyen aşamasında da fark edeceksiniz, daha az kullanışlıdır. Çünkü belli bir süre sonra, bir veri tipinde değişiklik yaptığınızda tüm view’leri araştırıp bu tipe ait metodu da değiştirmeniz gerekebilir. Bu yüzden tüm etiket ve tip tanımlamalarını model altında merkezi bir yerde toplamış olduk. Bu konunun ayrıntısını kısmetse gelecek makalede göreceğiz.

Aynı şekilde EditorFor yerine DisplayFor metodunu kullanarak, form elemanı yerine sadece okunabilir formatta, modellin değerini kullanıcıya gösterebiliriz.

Bu metodların haricinde bir de EditorForModel gibi “ForModel” ile biten metodlar da vardır. Bu metodlar belli bir template, şema ile model’e ait tüm özellikleri ekrana basacaktır. İlerleyen makalelerde bu metodlar için template hazırlamayı da göreceğiz, fakat şimdilik bu konuyu es geçelim.

Devam etmek için diğer sayfaya geçiniz.

Sayfalar: 1 2

» Tags: , , , , , , , , ,

10 Comments

  • At 2012.02.09 16:19, yemliha said:

    Makale dediğin böyle olur 🙂 şukunu verdim

    • At 2012.05.07 18:53, Serkan Topkan said:

      Merhaba, makale için gerçekten çok teşekkürler.

      • At 2012.09.04 15:40, Tolga TOSUN said:

        Kralsın sen Gerçekten çok güzel anlatmışsın tebrikler kardeşim. Mvc ile ilgili zamanın oldukça makale yazarsan takip etmeye devam edicem. 🙂

        • At 2012.10.29 11:48, endoplazmik bi kulum said:

          makaleleriniz gerçekten çok güzel olmuş teşekkürler 🙂

          • At 2012.11.06 23:53, arif emre said:

            maşallah fatih çok güzel olmuş. eline sağlık…

            • At 2013.08.13 06:57, arif mehmet said:

              Çok güzel makale teşekkürler. benim bir sorum olacak:
              razor sayfalarını(.cshtml) çalıştırmak için ille de visualstudio veya webmatrix yüklü mü olmalıdır.
              aspx sayfalarını localhostta çalıştırdığım gibi cshtml dosyalarını da çalıştıramam mı..

              • At 2017.02.25 22:49, çorum çilingir said:

                emeğinize sağlık

                • At 2017.02.25 22:51, ziyaretci0 said:

                  karabağlar çilingir servisimiz 24 saat hizmetinizdedir.aradığınız çilingir ustasını karabağlar çilingir de bulabilirsiniz.http://karabaglar.cilingiri.org oto anahtarcı sevisi 24 saat arabanızın kapısını açtırabilirsiniz.arabanızın hasar görmesini istemiyor iseniz bizi arayın.karabağlar çilingir aynı zamanda kasa çilingir hizmetide vermektedir

                  • At 2017.02.25 23:02, karabağlar çilingir said:

                    n.karabağlar çilingir aynı zamanda kasa çilingir hizmetide vermektedir

                    • At 2017.04.12 18:35, emek çilingir said:

                      http://emekcilingir.biz/
                      Emek çilingir ,Emek anahtarcı, Emek kale kilit servisi, Ankara Emek çilingir,
                      Ankara Emekte anahtarcı, Emek çilingir ustası, Emekte çilingir, Emekte anahtarcı,
                      Emek çelik kasa açma , Emek kasa çilingir , Emek akıllı kilit , Emek kapı tamiri ,
                      Emek çelik kapı tamiri,

                      (Required)
                      (Required, will not be published)