Web Tasarımı, Programlama, Eğitim Meslekler ve Rehberlik

Boş zaman yoktur, boşa geçen zaman vardır.

ASP.NET MVC 4 giriş ve genel bilgiler

Merhabalar,

Bu yazıda Visual Studio 2012’nin de içinde barındırdığı ASP.NET MVC serisinin 4. versiyonunu ele alacağım. Konu anlatımını MVC’yi daha önceden kullanmamış kişilerin de anlayabileceği şeklinde sürdürürken, MVC3 üzerinde projeler geliştirmiş kişilere de MVC4’ün 3. versiyona göre farklılıklarına dikkat çekeceğim.

MVC’den kasıt, model – view – controller ‘dır. MVC sadece ASP.NET’e veya Microsoft’a veya .NET teknolojilerine özgü bir kavram değildir. Java, php gibi kütüphaneler de MVC yapıları bulunmaktadır. MVC bir teknolojiden çok proje planlama biçimidir. Buna göre MVC’de adı üstünde 3 temel unsur bulunmaktadır. Model olarak belirtilen bölüm, üzerinde işlem yapılacak birimlerle ilgili sınıfların, nesnelerin, modellerin bulunduğu yapıdır. Nesnel programlama mantalitesine göre, Model kısmı nesneleri temsil eder. View olarak belirtilen bölüm, projenin presentation, sunum kısmıdır. View bölümünde kullanıcıyla etkileşim esastır. Bir web projesi için View kısmı, html kodlarının olduğu kısımdır. Controller ise, ASP.NET MVC projelerinde, girilen URL’lerin, yönlendirmelerin, hangi işlemleri yaparak hangi View’e yönlendirmelerin yapılacağını belirleyen kısımdır.

ASP.NET MVC projelerinde her bir bölüm için birer klasör bulunmaktadır. Buna göre modellemelerinizi Model, html dosyalarınızı View klasörlerine eklerken, Controller birimlerinizi de Controller klasörü altına ekleyeceksiniz. Buradaki Controller ve Model klasörü altındaki dosyalarınız c# veya vb.net dosyaları olacaktır. Kısacası bu iki birim altında code behind işlemleri yapacaksınız. View için de C# kodu yazmanız tabi ki mümkündür.

MVC yapısını görmek için hemen şimdi visual studio’dan, new project’den web sekmesini seçerek oradan MVC4 projesi oluşturabilirsiniz. Projeyi oluştururken Razor sözdizimini seçin. Size örnek olması için Internet Application seçeneğini seçin, ben de konuyu Internet Application seçeneği üzerinden anlatacağım. Bu seçenekte küçük çaplı bir proje hazır olarak gelir. MVC konusunda yeterli bilgiye sahip olduktan sonra projeler geliştirirken Empty Project’i seçerek sıfırdan bir projeye başlayabilirsiniz.

Yeni proje oluşturduğunuzda Controllers, Models, Views klasörlerinin yanında App_Data, Content, Scripts klasörleri başta olmak üzere birkaç klasörün daha bulunduğunu göreceksiniz. Burada saydığım 3 klasör, MVC3 yapısında da bulunan klasörlerdir. Hatta App_Data klasik ASP.NET projelerinde de bulunan bir klasördür. Bu yüzden bu klasörü burada anlatmayarak es geçiyorum. Content klasörü ise, projenizde kullanacağınız kaynakları içine yerleştirmeniz için size ayrılmış bir klasördür. Adını değiştirebilir veya olduğu gibi kullanabilirsiniz. Bu klasörün içine genellikle resim dosyalarınızı, css dosyalarınızı koyabilirsiniz. Genel kullanımı zaten bu şekildedir. Script klasörü javascript dosyalarınız için oluşturulmuş içinde bazı javascript dosyaları da orjinalinde gelmiştir.

MVC4 yenilikleri

[ads11]

App_Start ve Filters klasörleri ise MVC4 ile gelen klasörlerdir. Images klasörünün üzerinde durmayın, content’in ayrılmış halidir, ister kullanın ister kullanmayın size kalmıştır. Buradaki App_Start ve Filters klasörleri içinde, eski MVC3 versiyonlarında genellikle global.asax içinde yapılan, başlangıç noktası global.asax olan işlemlerin global.asax tarafından parçalara bölünerek yönlendirilmiş halidir. Demek istediğim MVC3’de global.asax içinde bulunan RegisterRoutes methodu, MVC4 ile App_Start altındaki RouteConfig dosyası içine alınmıştır. Ancak olayın çıkış noktası değişmemiş, global.asax içindeki Application_Start metodu içinden bu dosya içindeki RegisterRoutes metodu çağrılmıştır. Bu metod çağrımlarıyla ilgili filtreleme işlemleri de Filters klasörü altındaki prosedürler aracılığıyla ayarlanmaktadır. Filtreleme prosedürlerini de Filters klasörü altındaki dosyalardan düzenleyebilirsiniz.

MVC4 ile birlikte gelen web api işlemleri App_Start klasörü altındaki WebApiConfig altında yapılmaktadır. Web Api, başka bir yazının konusu olacak kadar uzun olduğundan dolayı bu konu hakkında daha fazla bilgi vermeden geçiyorum.

MVC4’te seveceğiniz başka bir yapı da App_Start altındaki BundleConfig sınıfının içinde olan olaylardır. BundleConfig altında sitenizde kullandığınız css, javascript gibi dosyaları bildirebilirsiniz. Projenizi publish ettiğinizde visual studio bu dosyaların içindeki değişkenlerin, isimlendirmelerin vs isimlerini kısaltarak dosyalarınızı sıkıştırır ve sıkıştırılan birden fazla olan bu dosyalar tek bir dosya haline getirilir ve sizin publish’ine özel bir versiyon ile querystring ekleme işlemi yapılır. Böylelikle bir publish’de yaptığınız css, js değişiklikleri sonraki publishlerde querystring’lerle dosya adı değişikliği sayesinde ziyaretçilerin cache belleğinde kalmaz ve tüm ziyaretçileriniz yeni javascript ve css bilgilerini tekrar yükler. BundleConfig sayesinde, artık javascript ve css üzerindeki çalışmalarınızı tek bir dosya içinde yapmaya çalışmak yerine, gruplandırabilir, daha okunabilir şekilde çalışabilirsiniz.

MVC4 yenilikleri hakkında söyleyebileceklerim bunlardan ibaret. Şimdi genel MVC yapısnın nasıl işlediğine bakalım.

MVC’de url istekleri ve sayfa yönlendirmeleri

Projenizi F5’e basarak çalıştırıp kısa bir inceleme yapın. URL’lere dikkat edin.

MVC’de her yeni sayfa açma isteğinde bu istek öncelikle RouteConfig’de belirtilen ayarlara bakar. Burada şu konuya dikkatinizi çekmek istiyorum. Her sayfa açma isteğinde RegisterRoutes metodu çalışmaz. Bu metod, IIS ilk yüklenmede çalıştırılır ve hangi tip URL’lerin hangi Controller ve Action’a yönlendirileceğini belirler. Daha sonraki tüm istekler, IIS’in ilk yüklenmesinde çalıştırılan bu metodun oluşturduğu kayıtlara göre çalıştırılır. Daha sonra istenen URL’ye göre hangi Controller ve Action’a yönlendirilmesi gerektiği kararı burada verildikten sonra ilgili Controller ve Action’a gönderme yapılır. Controller içindeki Action içinde C# kodlaması yapıldıktan sonra işlemler bir View’e doldurulup kullanıcıya bir html dökümanı döndürülür. Olayları tekrardan ele alıp madde madde sıralarsak işlemler şu şekildedir.

1- kullanıcı bir url’ye erişmek için tarayıcıda url’nin yolunu yazar ve enter’a basar
2- gelen bu istekle projedeki RegisterRoutes ile belirlenmiş link yönlendirme kriterlerine bakılır
3- bu kriterlerden eşleşen ilk kriter yazılmış bulunur.
4- bulunan kritere göre geçerli Controller altındaki ilgili metoda gidilir.
5- bu metod içindeki C# kodlama işlemleri yapılır
6- bu metod bir View döndürür.
7- View içindeki html, C# kodlarıyla düzenlenilir ve bir http çıktısı oluşturulur.
8- bu çıktı kullanıcıya gönderilir.

Evet 8 maddede sıraladım ancak burada 8 madde olması işlemlerin yavaş olacağı anlamına gelmez:) MVC gerçekten çok performanslı bir yapıdır.

Şimdi burada sürekli bahsettiğimiz Controller ve Action yapılarını inceleyelim.

Controller, Controllers klasörü altında tanımlanmış, “Controller” sınıfından türeyen sınıflardır. Burada gerek ve yeter koşul, sınıfın Controller sınıfından türemesidir. Controller isimleri genellikle IsimController şeklinde belirtilir. Örnek projemizdeki HomeController, bir Controller örneğidir. Controller’lar, Views içindeki, kendi adındaki klasörleri temsil eden sınıflardır. Demek istediğim şudur; HomeController içindeki metodlar Views içindeki Home klasörü içindeki html dosyalarını temsil eder. Controller içindeki her bir metod bir View’i temsil etmek zorunda değildir ancak Views içindeki dosyalar, Controller içindeki bir ActionResult dönüş tipli, kendisiyle aynı isimde bir metod tarafından temsil edilmek zorundadır. Zira bir url isteği geldiğinde, istek controller içindeki uygun action’a iletilemiyorsa Views’in içinde belirtilen sayfa olsa bile sayfa bulunamadı hatası alırsınız. Özetle, controller içinde action var ise link vardır, yoksa yoktur.

Örneğimizdei HomeController altında ActionResult tipinden değer döndüren Index adlı metodumuz bulunuyor. Bu metod bize Views altında Home klasörü içindeki Index.cshtml dosyasını işler. Belirtilen cshtml dosyası bir Action olarak tanımlanır. Konuyu daha iyi anlamak için Home klasörü içine yeni bir View ekleyin ve HomeController içinde aynı isimde, ActionResult dönüş tipli bir metod oluşturun ve metod içine “return View();” yazın.

Az önce Controller içindeki her bir metodun mutlaka bir View döndürmesi gibi bir zorunluluğa sahip olmadığını belirtmiştim. Bunu daha iyi anlamak için bir de şöyle bir örnek yapalım. HomeController altında string dönüş tipi olan “Test” adında bir metod oluşturun. Bu metodun gövdesine de return “helvacikoylu”; yazın. Projeyi çalıştırın ve URL’yi /Home/Test olarak değiştirin. Ekrana metodun döndürdüğü string’in yazıldığını göreceksiniz. Yukarıda 8 maddede saydığım işleyiş, View döndürmeyen metodlarda 6. maddeden sonra daha farklı bir yol izler. Zaten nasıl bir yol izlediğini de bu örnekle görmüş oldunuz. Bu özellik, özellikle çok fazla Ajax yapısı kullandığınız zamanlarda çok büyük avantaj sağlar. Bu sayede her bir link için ayrı bir ajax dosyası veya her bir link için ayrı birer html dosyası hazırlamak zorunda kalmamış olursunuz. Sanki C# içindeki bir metoddan başka bir metoda veri gönderir gibi, URL yazarak metod çağırabilirsiniz. Bu URL’ler javascript ile de çağrılmış olabilir.

MVC’de razor sözdizimi

Projeyi oluştururken sizden söz dizimi olarak Razor’u seçmenizi istemiştim. Klasik asp veya aspx ile çalıştıysanız, asp veya aspx kodlarını, html içinde <% ile %> taglarını kullanarak yazdığınızı hatırlıyorsunuzdur. Razor sözdizimi, bu yazımın daha kolaylaştırılmış bir halidir. Klasik yönteme göre daha akıllıdır ve yazdığınız kodların c# mı yoksa html mi olduğunu, hangisinin nerede başladığını bittiğini daha iyi anlayabilir. Razor’da kodlarınızı <% ile %> arasında değil, @ işaretçi ile başlayarak yazarsınız. Bunun nasıl bir şey olduğunu görmek için örneğimizde Views içinde Home klasörü içinde About.cshtml dosyasını açın. Sayfanın üstünde @ ile başlayan ve küme parantezleri içinde belirtilen kısım C# kodudur. Razor sözdizimi ile yazılmıştır. Razor sözdizimine göre kodlamayı yapacağınız kısımlar şu şekillerde belirtilebilinir.

html kodları … @{ kod } .. html kodları
html kodları … @if (kosul) { kod } … html kodları
html kodları … @while (kosul) { kod } … html kodları

Şeklinde belirmelerle, kodu ya direkt küme parantezleri içinde yazarsınız ya da @if ile başladığınızda if bloğu içinde yazarsınız. Siz bunu daha çok for veya foreach ile kullanacaksınız.

Ayrıca değer döndüren Razor sözdizimlerini şu şekilde kullanabilirsiniz.

@{ string deneme = “helvacikoylu”; }

<h1>@deneme</h1>
<h1>@(deneme)</h1>

h1 taglarındaki iki kulanım da aynıdır. Bazı durumlarda parantez belirlemek durumu daha okunaklı yapar. Bazı html tagları içindeki öznitelikler içine yazacağınız C# kodlarında parantezleri belirtmeniz intellisense’in size yardımcı olabilmesini sağlayacaktır.

Bununla birlikte bir razor bloğu içine direkt olarak html yazmanız da mümkündür. Bu gerçekten kullanışlı bir özelliktir. Ancak html kodunu yazmaya başladıktan sonra C# kodu yazmak için tekrar @ işaretçi kullanmanız gerekecektir. Bir örnekle bunu inceleyeim.

@for (int i = 0; i < 10; i++) {
    string c = “test – ” + i;
    <div>@i</div>
}

Örneğini inceledikten sonra kendiniz benzer sözdizime ait kodlamalar yapmayı da deneyebilirsiniz. Razorla ilgili başlangıç için bu kadar bilginin yeterli olacağını düşünüyorum. Zamanla alıştıkça çok daha rahat kullanabilirsiniz.

MVC’de C# tarafındaki veriyi html içine aktarmak

Örneğimizden devam ederek, Controller içindeki bir metod içinde tanımladığımız bir değişkeni html dosyası içinde yazdıralım. Bunun için kullanabileceğimiz iki yapı bulunmaktadır. Bu yapılardan birincisi, Dictionary, Hastable mantığında çalışan key ve value’dan oluşan yapı olan ViewData’dır. Diğer yapı ise dynamic veritipi olan ViewBag’dir. Ikisi de temelinde aynı şeydir. Ben ViewBag’i kullanan biri olarak örnekleri sürekli onunla vereceğim.

Controller içinde oluşturduğunuz değişkenleri html’e aktarırken ilgili metod içinden ViewBag’e doldurduğunuz verilere o metodun döndürdüğü View içinden de ulaşabilirsiniz. Demek istediğim, HomeController’daki Index metodu içinde ViewBag.test = “helvacikoylu”; yazdığınızda, Views klasörü içindeki Home klasörü içindeki Index.html dosyasında

@(ViewBag.test)

Yazdığınız yere “helvacıköylü” yazılacaktır. Bunu ViewData’yı kullanarak ViewData[“test”] = “helvacikoylu”; olarak da yapabilirsiniz. ViewBag daha iyidir ama ViewBag kullanın:)

Burada yapacağınız atamalarda tip uyumluluğuna dikkat etmelisiniz. Controller içinde ViewBag’deki bir değişkene Tuple tipinden atama yapıp daha sonra cshtml’den bunu DateTime tipinden çekmek istediğinizde çalışma zamanlı hata alırsınız. Bu durum sizin sorumluluğunuzdadır.

Bu kullanımla Controller içindeki tüm değişkenleri View’e aktarabilirsiniz. Bu yüzden, View’in mantığı sonuçların kullanıcıya gösterilmesi üzerinedir. Size tavsiyem, veritabanı bağlantısını veya başka hesaplamaları View içinde @ ile blok açarak yazmayın. Tüm işlemlerinizi Controller içinde yapın. Yani eğer veritabanı yapısında, veri çekmede, hesaplamada bir problem var ise nereye bakacağınızı bilirsiniz.

View’ler içinde using sekmesi kullanmazsanız, ulaşmak istediğiniz yapılara namespace’ler dahil tam adı yazmanız gerekir. Bu yüzden View üzerine

@using Mvc4Test.Models;

şeklinde atamalar yapabilirsiniz.

MVC’de Models klasörünün kullanımına, MVC’de model kullanma konusuyla birlikte değineceğim. Bir sonraki MVC konulu yazıda bunu incelemek üzere şimdilik hoşçakalın.

Please follow and like us:
0

Benzer Yazılar

Bir cevap yazın

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

Web Tasarımı, Asp.Net, PHP Eğitim Dersleri, Teknoloji Haberleri Frontier Theme