ASP.NET MVC Framework ve Razor View Engine ile teoride tanıştık şimdi ise pratikte tanışmak için ilk adımımızı atıyoruz. Adım adım Razor View Engine kullanarak basit bir ASP.NET MVC örneği yapacağız.
Not : Bu örneğin kaynak kodlarını ve proje dosyasını yazının en altında verilen linkten indirebilirsiniz.
1. Adım : Visual Studio 2012’yi açıyoruz ve üst menüden File > New > Project seçimlerini yapıyoruz. Karşımıza çıkan pencerenin sol kolonunda Visual C# ve altında bulunan Web seçeneğini seçiyoruz ardından ana pencereden ASP.NET MVC 4 Web Application seçeneğini seçiyoruz. Proje ismi olarak istediğiniz bir isim verebilirsiniz ben mvc_tanisma adını verdim. Ok butonuna tıklıyoruz ve ikinci adıma geçiyoruz.
2. Adım : Bu sefer karşımıza aşağıdaki gibi
Project Template (proje kalıbı) seçmemiz için başka bir pencere açılıyor. Biz
Empty seçeneğini seçiyoruz çünkü diğer proje kalıplarında kullanmayacağımız dosya ve klasörler eklenebiliyor. Şu durumda kafa karışıklığına sebep olmamak adına
Empty (boş) kalıbını seçiyoruz ve
Ok butonuna tıklıyoruz.
Bilgi :
View engine olarak
Razor kullanacağız. İlerleyen adımlarda view engine’lar hakkında ufak bilgiler yer alıyor ve ileride yazacağım yazılarımda Razor ve ASPX view engine’ları hakkında daha detaylı paylaşımlarda bulunacağım. Şimdilik kafanıza fazla takmayın bunları.
3. Adım : Projemizi çalıştıralım. (F5) Üst menüden Debug > Start Debugging seçimini yapalım. Aşağıdaki 404 hatasını alacağız. Client (kullanıcı) tarafından gelen request (istek) MVC mimarisinde controller’lar tarafından yakalanır. Henüz bir controller nesnemiz olmadığından gelen request’i yakalayıp işleme koyamadık dolayısı ile aşağıdaki hatayı aldık.
İlk Controller Nesnemizi Oluşturalım
4. Adım : Solution Explorer penceremizden projemiz içerisinde bulunan Controllers klasörüne sağ tıklıyoruz ve Add > Controller… seçimini yapıyoruz. Aşağıdaki gibi.
5. Adım : Karşımıza aşağıdaki pencere çıkacak. Burada controller name alanına HomeController yazıyoruz. İstediğimiz adı verebilirdik fakat HomeController ASP.NET’teki Default.aspx gibi varsayılan olarak atanmış bir yapı eğer başka bir isim verecek olsaydık bunu yapılandırma ayarlarından değiştirmek zorunda kalacaktık ileride bu konuya da değineceğiz. Pencerede Template olarak Empty MVC Controller ‘un seçili olduğundan emin olun.
6. Adım : HomeController nesnemizin kod kısımına baktığımızda geriye ActionResult gönderen Index() metodunu görürüz bunu diğer adımlarda inceleyeceğiz. Şimdi bir değişiklik yapalım.
|
|
public ActionResult Index()
{
return View();
}
|
Yukarıdaki kodları aşağıdaki gibi değiştirelim. Index() metodumuz geriye ActionResult değil string göndersin ve bu string “Naber Dünya?” olsun.
|
|
public string Index()
{
return "Naber Dünya?";
}
|
6. Adım : Projemizi debug yapalım (F5) Debug > Start Debugging Aşağıdaki görüntüyü almış olmamız gerekiyor.
Önemli : Biz sadece controller nesnesi oluşturduk ve geriye string gönderen bir Index() metodunu kullandık ama ne view tanımladık, ne model. Peki bu“Naber Dünya?” yazısı view olmadan nasıl tarayıcı tarafından görüntülendi? MVC mimarisine göre bunu view nesnesinin yapması gerekiyordu değil mi?
Kritik Bilgi : Eğer yukarıdaki elde ettiğimiz tarayıcı çıktısının kaynak kodlarına bakarsanız (Sağ Tık Menü > Kaynağı Görüntüle) hiçbir şekilde HTML etiketlerinin olmadığını sadece “Naber Dünya?” yazdığını göreceksiniz.
Kaynak kodlarımızda HTML kodları görmüyor olmamızın sebebi HomeController nesnesinin Index() metodunun geriye saf string verisi göndermesi bunu herhangi bir view aracılığı olmadan yapması. Bizim elde ettiğimiz görüntü aslında not defterinde yazan bir yazıdan farkı yok kısaca bir web sayfası görüntüsü değil bir metinden ibaret. Diğer bir tanımla: MVC mimarisinde görüntü oluşturma görevi view bölümüne aittir ve view görüntüyü HTML çıktısı olarak bize verir fakat bizim view nesnemiz olmadığından böyle bir tablo çıktı karşımıza.
View Nesnemizi Ekliyoruz
7. Adım : Öncelikle 6. adımda değiştirdiğimiz kodlar üzerinde tekrar değişiklik yapıyoruz. HomeController nesnemize çift tıklıyor ve kod kısmına gidiyoruz. Index() metodunu aşağıdaki gibi değiştiriyoruz. string olan geridönüş tipini ViewResult yapıyoruz ve “Naber Dünya?” yazısını silip View()metodunu yazıyoruz.
|
|
public ViewResult Index()
{
return View();
}
|
Kritik Bilgi : Şu durumda projeyi çalıştırırsanız, controller geriye ViewResult gönderecek fakat bu ViewResult‘ı herhangi bir view nesnesi alıp işleyemeyeceğinden hata alacaksınız.
8. Adım : HomeController nesnemizin Index() metodu sınırları içerisinde olmak şartıyla sağ tık yapıyoruz (1) ve açılan menüden Add View… seçeneğini seçiyoruz (2) karşımıza yeni bir pencere açılacaktır. 9. adıma geçelim.
9. Adım : Add View… seçiminden sonra aşağıdaki pencere açılacaktır. Burada View name, View engine kısımlarına dokunmuyoruz ama “Use a layout or master page” yazan seçim kutucuğunun seçimini kaldırıyoruz çünkü şu an belirlediğimiz bir sayfa panellerimiz veya master page’imiz yok. Addbutonuna tıklıyoruz ve Index adında view nesnemiz Views klasörünün içerisindeki yerini alıyor ve projemize ekleniyor.
Index adlı view nesnemizin uzantısına dikkat ettiyseniz .cshtml bu uzantı view engine olarak Razor seçtiğimiz içindir. Eğer view engine olarak ASPXseçmiş olsaydık view nesnemizin uzantısı .aspx olacaktı. Derleme sırasında .cshtml uzantısı bu nesnenin Razor View Engine tarafından işleneceği anlamına gelir.
10. Adım : Eklediğimiz Index.cshtml view nesnemizi çift tıklayarak açıyoruz. Aşağıdaki kodları göreceksiniz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
|
Yukarıdaki div kodları arasına aşağıdaki gibi “Naber Dünya? Ben bir View nesnesiyim” yazalım ve projemizi çalıştıralım.
|
|
<div>
Naber Dünya? Ben bir View nesnesiyim
</div>
|
Aşağıdaki ekran görüntüsünü alacağız.
Önemli : Yukarıdaki ekranı gördüğünüzde sayfa üzerinde sağ tık yapıp menüden “Kaynağı Göster” seçeneğini seçtiğimizde bu sefer HTML etiketlerini göreceksiniz çünkü bu görüntüyü bize view bölümü işledi ve MVC mimarisine uygun olarak HTML çıktısı verdi.
Nasıl Oldu?
Bu örneğimizde statik olarak içerik ürettik yani view nesnesi içerisine kendimiz veri girdik. Tarayıcımızı açıp bu sayfaya girdiğimizde ilk request (istek) Controller bölümünde HomeController tarafından yakalandı hiçbir işlem yapmadan yani view’a herhangi bir içerik bilgisi göndermeden direktIndex.cshtml adlı view nesnesine gitti. Razor view engine tarafından bu nesne HTML olarak işlendi (rendering) edildi ve response olarak bize gönderildi.
Bir sonraki örneğimizde daha gelişmiş bir ASP.NET MVC örneği yapacağız ve controller’da dinamik olarak içerik üretip view aracılığı ile işleyip HTML çıktısı olarak alacağız. Bu örnekte model bölümüne hiç uğramadık çünkü veri işlemi yoktu fakat daha sonraki örneklerde aramıza model bölümüde katılacak.
Bir sonraki yazıda görüşmek üzere.
