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

ASP.NET MVC – View

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

Html Özellikleri

Form elemanlarını belli bir html özelliği ile oluşturmak için htmlAttributes isimli parametresini belirlememiz gerekiyor. Şu örneğe bakalım:



		

Bu metodun çıktısı şu şekilde olacaktır:



		

Burada tek dikkat etmemiz gereken nokta class gibi C# için ayrılmış bir kelimenin başına @ işaretini koymamız gerektiğidir.

Liste Oluşturma

Oluşturduğumuız modelde henüz kullanmadığımız bir özellik mevcut. Bu özellik Dictionary<int, string> tipinde tanımlanmış bir kolleksiyon nesnesidir. Diyelimki bir açılır liste(dropdown) oluşturacağız ve bu dictionary’ye ait Key değerini listenin value değerine ve dictionary’nin Value değerini ise etiket olarak atamak istiyoruz. Bunun için ilk başta action metodumuzda şu değişikliği yapalım:



		

Bu değişiklik ile view dosyamıza içinde 3 adet eleman bulunan bir listeyi göndermiş oluyoruz. Şimdi view dosyamızda oluşturduğumuz tablo içine bir satır daha ekleyip listemiz şu şekilde ekleyelim:



		

Liste oluşturuken ilk parametre, model kullandığımız için, modeldeki bir özellik, ikinci parametre ise listenin içindeki elemanlar olmaktadır. Listenin elemanlarını oluştururken SelectList sınıfından yeni bir nesne üretiyoruz. Constructor’a girdiğimiz parametrelerden birincisi liste elemanları, ikincisi bu listeden çekilecek olan value özelliği diğeri de text özelliğidir. Son parametre ise seçili olacak olan değeri ifade etmektedir. Liste oluşturmak için illaki Dictionary tipinde bir nesneye ihtiyacınız yok. IEnumerable olarak tanımlanmış herhangi bir nesne bu işi görecektir. Sadece bu nesneden hangi özellik ile value değerini, hangi özellik ile de text yani etiketini alacağımızı belirtmemiz kafi.

Link Oluşturma

Bir önceki makalede de gördüğümüz gibi, link oluşturmak için Html.ActionLink yardımcı metodundan faydalanıyor idik.



		

Sadece url üretmek için ise Url.Action() metodunu kullanıyorduk. Hatırlamak için bir önceki makaleye dönebilirsiniz.

Diğer Yardımcı Metodlar

Burada yeterince yerimiz ve zamanımız olmadğından diğer metodları sizin araştırmanıza bırakıyorum:

  • WebGrid: Bu metod ile kendi grid tablolarınızı oluşturabilirsiniz.
  • Chart: Grafik eklemek için bu yardımcıdan faydalanabilrisiniz.
  • Crypto: Şifreleme ve hashleme fonksiyonları sunar.
  • WebMail: SMTP olarak mail yollamak için metodlar sunar.
  • Json: Javascript ile iletişim kurmak için kullanılan Json metodları sunar.
  • ServerInfo: Sunucu hakkında bilgi almanıza yarar.
  • WebImage: Image yükleme ve üzerlerinde düzenleme yapmanızı sağlar.

Kendi Yardımcı Metodlarımız

Yardımcı metodlara ek olarak kendi metodlarımızı da yardımcı metod olarak sisteme tanıtabiliriz. Bunun için ik yöntemimiz mevcut.

İlk olarak View içinde bir yardımcı metod oluşturalım:



		

Gördüğünüz gibi metod tanımlamasının başına helper terimini ekliyoruz. Ardından metodun çıktısını bloklar arasına yerleştiriyoruz.

İkinci yöntem ise birinci yöntem gibi view içinde değil, view dışında bir sınıf tanımlamasına yerleştiriyoruz. Normalde view içinde en başta @using ekleyerek belli sınıfları view içinde kullanabiliriz. Fakat bu ekstradan bir iş demek ve pek de pratik değil. Bu yüzden view içinde hazır olarak kullanılan statik sınıflar altına kendi metodlarımızı yerleştirebiliriz. Mesela çokca kullandığımız Html statik sınıfının altına kendi metodumuzu yerleştirelim.

Proje içinde Helpers isminde yeni bir klasör açalım ve altında yeni bir sınıf ekleyelim. İsim olarak HtmlHelpers ismini verirseniz daha sonra baktığınızda hangi statik sınıf altına metodu eklediğinizi bilebilirsiniz. Namespace’i System.Web.Mvc yapalım ve bu sınıfı static yapıp, altına aşağıdaki gibi metodu yerleştirelim:



		

Gördüğünüz gibi parametrede this terimini kullanarak System.Web.Mvc.HtmlHelper statik sınıfına yeni bir ek yaptık. Bu özellik C#’ın extension method özelliğidir. Namespace’i System.Web.Mvc yaparak view içinde ekstradan @using terimini kullanmak zorunda kalmadık. Bu metodu çağırıken view içinde istediğiniz bir yerde:



		

Burada kullandığımız TagBuilder sınıfı html stringleri oluşturmak için bize kolaylık sağlıyor ve burada bundan bahsetmeyeceğiz. Burada dikkat etmemiz gereken diğer bir konu metodun çıktısının MvcHtmlString tipinde olmasıdır. Normalde view içindeki herhangi bir string çıktısı render edilirken Html Encode yapılır. Yani “<” karakteri “&lt;” ve “>” karakteri “&gt;” olarak ve diğer html karakterleri de encode edilecek şekilde ekrana basılır. Bu yüzden görünüm motoruna bu string’in bir html olduğunu ve bu şekilde ekrana basılması gerektiğini belirtmek için stringi, MvcHtmlString cinsinden çıktı veriyoruz. Aynı şeyi view içinde yapabilmek için, yani ekrana bir string’i html olarak basmak için Html.Raw yardımcı metodundan faydalanıyoruz. Mesela:



		

Birincisi çıktı olarak encode edilmiş bir string üretecekken, Html.Raw yardımcı metodu:



		

şeklinde html üretecektir. Denemek bedava.

Layout ve Section

Eğer Asp.Net WebForm ile daha önce uğraşmış iseniz Master Page‘in ne olduğunu biliyorsunuzdur. Kısaca bahsedecek olursak; benzer html çıktısı üretecek olan sayfalar için benzer kısımlarını bir sayfada topladığımız sayfalara master page diyoruz. Böylece master page sayesinde her sayfada tekrarlanan benzer kısımları her sayfada tekrar tekrar girmek yerine tek bir dosyaya ile muhatap oluyoruz.

WebForms görünüm motorunda Master Page olarak tanımladığımız bu yöntem, Razor görünüm motorunda Layout olarak geçmektedir. Projeyi ilk oluşturduğunuzda Views klasöründe Shared klasöründe “_Layout.cshtml” isimindeki view dosyası varsayılan layout dosyasıdır. Aslında “_Layout.cshtml” dosyası Razor tarafından zorunlu bir yapı değildir. Fakat bir üst klasörde “_ViewStart.cshtml” ismindeki dosya Razor tarafından zorunludur. Eğer bir view’de Layout tanımlı değilse, varsayılan layout uygulanacaktır. Razor, varsayılan layout’u getirmek için ilk olarak Views klasöründeki “_ViewStart.cshtml” dosyasına bakacaktır. Eğer bu dosyayı açarsanız burada “_Layout.cshtml” dosyasının ayarlı olduğunu görürsünüz. İsterseniz burada başka bir dosyayı varsayılan layout olarak belirleyebilirsiniz.

Şimdi _Layout.cshtml dosyasını açalım. Burada iki şey dikkatimizi çekecektir. İlki ViewBag.Title ve diğeri RenderBody() metodudur. Hatırlarsanız ilk örnekte oluşturduğumuz Index.cshtml dosyasının başında ViewBag.Title değişkenine bir değer atamıştık. İşte bu değişken burada yani layout’da <title> tag’ı içine girilmekte. RenderBody kısmı ise yine bu başlık altında göreceğimiz varsayılan section ‘ı render edip ekrana basıyor. Yani Index.cshtml gibi bu layout’u kullanan bütün view’ler RenderBody() metodunun bulunduğu yere render ediliyorlar.

Bu varsayılan layout’u kullanmak için herhangi bir şey yapmamıza lüzum yok. Peki bu layout’u kullanmak istemezsek ne yapacağız? View dosyasının baş tarafına:



		

Tabi bu iki satır kodu ard arda kullanmak akıllıca değil. Sadece burada örnek olsun diye böyle yaptık. Birinci satır ile BirLayout.cshtml dosyası bu view için layout olacaktır. İkinci satır ise hiç bir layout kullanılmamasını belirtmektedir. Bu durumda layout olmadığından, tüm html, head, body taglarını bu dosyada barındırmamız gerekecektir.

Section Tanımlama

Section (kelime manası ile bölüm,kesit), layout içinde belli bölgeler atamamıza yaramaktadır. Böylece layout’un istediğimiz yerine istediğimiz kodların yerleşmesini sağlamış oluyoruz. Normalde alt sayfalarda hiç bir tanımlama yapılmadığında, varsayılan section body‘dir. Bu yüzden varsayılan layout dosyasındaki RenderBody() metodu section olarak tanımlanmamış her şeyi body section’ı olarak tanımlayacaktır.

Alt sayfalarda section tanımlamak için section teriminden faydalanıyoruz. Aşağıdaki kodları Index.cshtml dosyasında en sona yerleştirebilirsiniz.



		

Tabi ki layout dosyasında Header ve Footer section’ları için herhangi bir render işlemi yapmadığımız için bu view şimdilik hata verecektir. Layout dosyasında bu section’ları render etmek için RenderSection() metodundan yararlanıyoruz. Şimdi _Layout dosyasını açalım ve aşağıdaki değişikliği yapalım.



		

Şimdi bu dosyayı çalıştırdığınızda section olarak tanımlı olmayan her şeyin toplanıp alt alta toplandığını göreceksiniz. Ve section nerede render edilmiş ise oraya yerleşecektir.

Normalde RenderSection() metodu ile tanımlı olan section, bu layout’u kullanan bütün view dosyalarında girilmesi zorunludur. Böylece her dosyada bu section’ın var olduğundan emin olabiliriz. Fakat eğer bu zorunluluğu istemiyorsak RenderSection(“Header”, false) şeklinde ikinci parametreyi false girmeliyiz.

Partial View

Partial View dosyaları, herhangi bir view içinde kullanılabilen, view parçalarıdır. Yine normal View’lerde olduğu gibi model tanımlaması yapılabilmektedir.

Bunu test etmek için projemizde Models klasöründe bir sınıf oluşturalım ve isim olarak MenuData girelim. Ve içeriğin aşağıdaki gibi değiştirelim:



		

Projemizi derleyelim ve hata olmadığından emin olalım. Views/Shared klasöründe sağ tuşla tıklayıp Add View ile view ekleme formunu açalım. Burada bu sefer “Create as a partial view” ve “Create as a strongly-typed view” seçeneklerini seçelim. Model listesinden az önce oluşturduğumuz MenuData modelini seçelim. Eğer MenuData‘yı burada göremiyorsanız derleme başarısız olmuş demektir. İsim olarak Menu girelim ve view dosyamızı oluşturalım.

Bu bir partial view olduğundan dolayı herhangi bir layout tanımlaması da yapmıyoruz. Bu partial view dosyasında aşağıdaki değişikliği yapalım:



		

Partial view dosyamız kullanılmaya hazır. Bunu herhangi bir view içinde kullanmak için Html.Partial yardımcı metodundan faydalanacağız. Index.cshtml dosyamızda istediğimiz bir yere aşağıdaki satırları ekleyelim:



		

Partial metodunda ilk parametre ile partial view adını, ikinci parametre ile de bu partial view’e geçirilecek olan modeldir. Tabi normalde buradaki gibi view içinde model nesnesini oluşturmak akıllıca değil. Genelde bu partial view’e ait model’i, ana view dosyasının model’i içine yerleştirerek, controller tarafında oluştururuz.

Buna ek olarak partial view’ler, controller içinden de çağırılabilir. Yani View() metodu ile ana view dosyasını çağırmak yerine PartialView() ile belli bir partial view dosyasını kullanabilirsiniz.

Child Action

Partial View’e benzer olarak view içinde başka action’ları çağırıp istediğimiz yerde render edebiliriz. Bu şekilde kendi başına değil de başka bir view içinde çağrılacak olan actionlara child action diyoruz. Child action olarak view içine renderleyeceğimiz action metodlar normal çalışan action metodlar olabileceği gibi sadece child action olarak çalışan metodlar da olabilir. Yani:



		

gibi ChildActionOnly özniteliği ile tanımlayabiliriz. Tabi bu durumda bu action metod url’den direk olarak çalıştırılamıyacaktır. Eğer action metod sadece child action olarak iş görecekse, güvenlik açısından bu tarz bir tanımlama yapmanız daha iyi olacaktır. Yukarıdaki örnekte bir string dönderdik. Ama bunun yerine bu action metoda ait bir view oluşturup onu da dönderebilirsiniz.

Kullanım açısından her ne kadar View() metodunu kullansanız da, bir child action için PartialView metodunu tercih etmeniz daha akıllıca olacaktır. Çünkü child action kendi başına çalışmayacağı için, layout’larla felan uğraşmak yerine direk ilgili partial view’i kullanabilirsiniz.

Bu child action metodunu view’de renderlemek için herhangi bir yere şunu yazabiliriz:



		

Bu kod ile aynı controller sınıfı içindeki SiteAdi action metodu çağırılacaktır. Eğer başka bir controller altındaki bir action metodu çağırmak istersek:



		

Eğer bu action metoda parametre geçirmek istersek:



		

şeklinde yazmalıyız.

Sonuç

Bu makalede MVC’nin üç temel unsurundan birisi olan viewleri incelemeye çalıştık. Burada anlatıığımız bütün her şeyin Razor görünüm motoruna göre olduğunu da ekleyelim. Başka bir görünüm motorunda durum daha da değişik olabilir.

Bu makaleden sonra model’leri inceleyen bir makale de yazmak istiyorum. Ayrıca hafiften MVVM ve ViewModel mimarisine de değinmek istiyorum.

Hataları ve eleştirilerinizi buradan yorum kısmından atabilirsiniz. Hadi şimdi gidin biraz MVC’inin tadını çıkarın 🙂

Fatih Tolga Ata © Diyezon 2012

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)