Ahmet Çığşar | ASP.NET MVC ile İlk Uygulamamızı Yapalım
1218
post-template-default,single,single-post,postid-1218,single-format-standard,qode-quick-links-1.0,ajax_fade,page_not_loaded,,qode-theme-ver-11.0,qode-theme-bridge

ASP.NET MVC ile İlk Uygulamamızı Yapalım

ASP.NET MVC ile İlk Uygulamamızı Yapalım

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.

Birinci Adım
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ı.

ikinci_adim

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.

ucuncu_adim


İlk Controller Nesnemizi Oluşturalım

4. AdımSolution 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.

mvc_controller_ekleme

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.

_5inci_adim

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.

_6_adim

Ö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.

mvc_projesine_view_ekleme

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. Add butonuna tıklıyoruz ve Index adında view nesnemiz Views klasörünün içerisindeki yerini alıyor ve projemize ekleniyor.

_8_adim

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 ASPX seç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.

@{
    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.

_10_adim

Ö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 direkt Index.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.

Aşağıdaki bağlantıdan projenin kaynak dosyasını indirebilirsiniz. [wpdm_file id=4]

38 Yorum Var
  • Mavsar
    21:59h, 18 Nisan Cevapla

    şu mvc meretini nihayet çözebildim tam olarakta böyle bir örnek arıyordum zaten çok teşekkürler çok ikrama geçti bilesiniz aynı şekilde örnekleri bekliyoruz

    • Ahmet Çığşar
      22:38h, 18 Nisan Cevapla

      MVC aslında uygulaması ve öğrenmesi kolay bir mimari ama malesef Türkçe kaynaklarda MVC mimarisi teorik bilgi çöplüğünden öte değil. Bu tip pratiklerin olduğu makalelerin devamı gelecek. 🙂

  • Oğuz KURTCUOĞLU
    17:16h, 30 Temmuz Cevapla

    Ahmet bey merhabalar,
    Anlatım tarzınıza gerçekten bayıldım. Çok güzel şekilde ve açıklayıcı olarak anlatmışsınız. Hiçbir gereksiz bilgi yok ayrıca açıklanmayan bir alanda yok. Mvc hakkında araştırma yaparken buldum sitenizi ve ilk yazınızı okuduktan sonra diğerlerine de baktım. Devamı gelir inşallah bu yazıların. Birçok kişi faydalanacaktır bundan. Tekrar elinize sağlık. İyi çalışmalar..

    • Ahmet Çığşar
      18:46h, 10 Ağustos Cevapla

      Selam Oğuz Bey,
      Teşekkür ediyorum yorumunuz için. Yazıların devamı gelecek ama ne zaman bilemiyorum 🙂

  • ramazan
    13:07h, 12 Ağustos Cevapla

    çok yararlı bir yazı olmuş teşekkürler..

  • Emrah Erdoğan
    21:15h, 18 Ağustos Cevapla

    Bir yazılım geliştirici olarak okuduğum makalen gerçekten anlaşılır ve samimi. Ayrıca site tasarımın soft ve göze çok güzel görünüyor. Tebrik ederim ve çalışmalarının devamını dilerim.

    Saygılarımla,

  • Erdem Erd
    16:16h, 29 Ağustos Cevapla

    Hocam öncelikle eline sağlık. Baya uğraştım HomeController isminden farklı Controlller açıp çalıştırmayı 404 hatası almaktan canım sıkılmıştı artık. Hocam HomeController isminden farklı Controller açınca düzeltme işlemini nerede yapıyoruz açıklayabilir misiniz?

  • Can
    10:52h, 03 Eylül Cevapla

    MVC’ye yeni başlıyorum ve daha önce c# biliyordum. Anlatımın çok güzel ve anlaşılır! Devamını bekliyorum… Teşekkürler:)

  • Ahmet
    14:38h, 05 Eylül Cevapla

    Ahmet bey okuduğum en açıklayıcı makale idi örneklerin devamını bekliyorum iyi çalışmalar.

  • Merve
    19:18h, 17 Eylül Cevapla

    MVC hakkında araştırma ve uygulamalara başladığım şu günlerde bu makale ilaç gibi geldi, teşekkür ediyorum.. İyi çalışmalar.

  • Serkan T
    16:34h, 23 Eylül Cevapla

    Ülkemizde çok iyi geliştiriciler var.Ancak sağlam derslerin devamı hiçbir zaman gelmiyor.

  • Fırat
    17:48h, 02 Ekim Cevapla

    Neden bu kadar çok ekran görüntüsü, görsel kullandınız ? Acayip rahatsız edici. Evet bu tarz bir makale yeni başlayanların ilgisini çekebilir ama teknik makale kavramına hiç uygun değil. Ne bir spesifikasyon tablosu var ne düzgün bir açıklama. File->New->Project demek yerine bunun 640×480 bir ekran görüntüsünü eklemekte ki mantık nedir ?

    Malesef görselliği bol, verilen bilginin ise çok yüzeysel ve az olduğu başarısız bir yazı. Zaten Türkçe ilk uygulamamız yazısı dolu internette büyük ihtimal devamı gelmeyecektir..

    • Ahmet Çığşar
      21:23h, 02 Ekim Cevapla

      Aslında çok ekran görüntüsü kullanmamın sebebi benim Asp.Net MVC öğrenirken kendimi gerizekalı hissetmem ve başkalarının bu duyguya kapılmalarını engellemek 🙂 Asp.NET MVC’de çoğu insan başlangıç aşamasında bırakıyor çünkü klişe tabirler ve az detaylar veya aşırı boğucu teorik çöpler sonucu bu mimariyi çözemeyebiliyorlar daha kötüsü özgüvenlerini kaybediyorlar. Yazı zaten giriş yazısı ilk uygulama bile sayılmaz klasik merhaba dünya havasında. Hemen “e-Ticaret sistemi yapıyoruz” demek olmazdı herhalde. Yazıların devamı gelecek ama inanılmaz iş temposu nedeniyle özel hayatım bile şu aralar arkaplanda. Sizinde blog sayfanızı ve yazılarınızı görmek, okumak ve ilham almak isterim.

      • kasım
        15:10h, 12 Kasım

        Ahmet bey şu ders anlatırken kullanılan “plaza dili ve edebiyatı” yüzünden bizlerde çok zorluk çekmekteyiz 🙂

  • Serhat Albayoğlu
    09:36h, 03 Ekim Cevapla

    Ahmet Çığraş bey. Öncelikle sizi tebrik ederim. MVC ‘nin diğer sitelerdeki karmaşık anlatımlarında boğulan yeni başlayanlar için gerçekten anlatımlarınız çok aydınlatıcı. Kim ne derse desin bu sistem sizin anlatımlarınız gibi anlatımlar ile yapılmalı insanlara yol göstermek için.

    Fırat Bey’e benim önerim var. Eleştiri yapmadan önce sizin hangi hedef kitleye neyi göstermek istediğinizi anlasın önce. Daha iyisini biliyor veya yapabiliyorsa eleştiri yerine bak işte ben de bunu yaptım deyip göstersin.

    Sizi bir kere daha tebrik ediyor ve yazılarınızın devamını bekliyorum. Saygilarımla.

    • Ahmet Çığşar
      10:50h, 03 Ekim Cevapla

      Merhaba Serhat Bey,

      Teşekkürler motive edici sözleriniz için. Amacımı ve tarzımı gayet iyi tespit etmişsiniz 🙂

      Fırat bey gibi olumsuz yorum bildirenler azınlıkta olsa da tabi ki oluyor bu da bir eleştiridir, fikirdir dikkate alırım ama hiçbir zaman bende moral bozukluğu ya da motivasyon düşürücü bir etki yapmaz. 🙂

      Yazılarımın devamı mutlaka gelecek ama tam olarak zaman veremiyorum.

  • seycan
    23:20h, 06 Ekim Cevapla

    gerçekten sğol bende böyle bişey arıyordum faydalı oldu artık mvcden korkmayacam

  • Rıdvan Sarıtunç
    23:47h, 03 Aralık Cevapla

    Merhaba Ahmet Çığşar Bey,

    Gerçekten sizi tebrik ediyorum. Bende farklı sitelere baktım ama bu kadar açıklayıcı anlatan bir yer daha görmedim.

    Sizi takipte kalacağım.

    • Ahmet Çığşar
      22:10h, 05 Aralık Cevapla

      Teşekkürler Rıdvan Bey,

      Şu an taslak olarak bekleyen MVC makaleleri var fakat bir türlü fırsat bulamıyorum umarım fırsat bulur ve yazarım

  • Samet
    14:40h, 26 Mart Cevapla

    Bu güzel paylaşım için teşekkür etmeyi kendime borç bilirim ..

  • Ahmet
    09:19h, 04 Haziran Cevapla

    İyi günler.

    ya ben bu örnekteki gibi yaptıklarınızın aynısını yapıyorum ama her seferinde kaynak bulunamadı diyor. Sebebi nedir acaba ?

    • Ahmet Çığşar
      10:33h, 09 Haziran Cevapla

      Selamlar,
      Örnek basit zaten yazıda kaynak dosyayı paylaştım mutlaka bir yerlerde eksik ya da unuttuğunuz bir şeyler vardır. Kaynak dosya ile kıyaslayıp sorunu çözebilirsiniz.

  • Uğur
    16:18h, 06 Haziran Cevapla

    Merhaba,
    Anlatım dili oldukça sade ve başarılı. Tebrik ederim.
    Bununla birlikte nette bu bilgi mevcut ama sizden de MVC nin detaylı mimari yapısı hakkında bilgi bekliyorum. AspNet Form template de mevcut olan viewstate, page life cycle, MVC de nasıl bir yöntemle karşılanıyor vs..
    Teşekkürler..

    • Ahmet Çığşar
      10:31h, 09 Haziran Cevapla

      Teşekkürler yorumunuz için.
      AspNet MVC konularında artık makale yazmayı düşünmüyorum ama yazmam gerektiği konusunda çok fazla e-posta alıyorum. Bu aralar HTML5 ve JS ile marjinal denemeler içerisindeyim. Eğer MVC makaleleri yazmaya başlarsam emin olun değineceğim.

  • Cenkay
    10:20h, 07 Ağustos Cevapla

    Web Design ve Browser tabanlı yazılım geliştirmeye başladım. Tek seferde anladım. Çok açıklayıcı olmuş.
    Ellerinize sağlık.

  • Ahmet DEMİR
    15:31h, 20 Ağustos Cevapla

    Elinize sağlık üstat. Yalnız bi noktada mantık kuramadım. DIV etiketi arasına yazdığımız her şey zaten browser tarafından ekrana yansıtılmaz mı? View bu noktada niye gerekli.Yanlış anlaşılmasın sorum,tamamen temelimi sağlam atmak için 🙂

    • Ahmet Çığşar
      15:00h, 07 Eylül Cevapla

      Ahmet selam,
      Çok basit bir soru View yapısıyla ilgili. Ufak bir aramayla öğrenebilirsin. Ben fırsat bulursam ben de ayrı bir makalede yazmaya çalışayım ama şu aralar hiç sanmıyorum çünkü bu yorumu bile mobilden yazıyorum.

  • Mehmet YILMAZ
    09:46h, 27 Eylül Cevapla

    Son derece yararlı bilgiler paylaşmıssınız Ahmet Bey. Bende asp 4.0 da kendi imkanlarımla uyguluyorum mvc desenini. Bugünden itibaren mvc4 e geçiyorum ınş. İyi çalışmalar 😉

  • yunus
    23:14h, 08 Aralık Cevapla

    eline diline sağlık kardeşim bende ilk defa aydınlandım şu mvc meletinden viewin html controlerında bi nevi debugging olduğu kafama yattı birde modelle ilgili mssql ile hazırlanmış 2 tabloluk bir databasede olsa küçük bir örnek veri çekip ekleme eklersen süper olur küçük bir istek talep formu yapabilirsin mesela

  • Caner
    10:31h, 11 Aralık Cevapla

    Şu yaptığınız gerçekten bizler için önemli bir başlangıç. Belirttiğiniz gibi Türkçe kaynağın yetersizliği bizleri çıkmaza sokuyor. Çok teşekkürler bilgilerinizi aktardığınız için. Nicelerini bekliyoruz.

  • Tont10
    10:14h, 30 Haziran Cevapla

    Hocam super anlatim , hersey harika ama devami gelecek demissiniz , ne zaman yeni makaleleri okuyabilecegiz acaba ?

    • Ahmet Çığşar
      20:51h, 01 Temmuz Cevapla

      Teşekkürler,
      Maalesef mesleği bıraktım artık yeni makale gelmeyecek sanırım.

  • yasin
    11:08h, 01 Temmuz Cevapla

    emeğiniz için teşekkürler

  • Begüm
    13:16h, 23 Ağustos Cevapla

    Sayın Ahmet Çığsar,
    Lütfen herşeyi herkesten önce öğrenin ve bize aktarın , şayet bir konuyu siz biliyorsanız biz de biliyoruz derken “maalesef mesleği bıraktım ” yorumunuzu görüyorum bizim için kötü sizin içinse iyi olmuş, harcanıyorsunuz vesselam yazın , okuyalım !

  • buraksecer
    13:57h, 07 Ekim Cevapla

    Güzel yazı mübarek 🙂 Geliştiriciler ellerinden öper.

  • Burcu
    19:06h, 15 Nisan Cevapla

    Çok açık bir anlatım olmuş cok işime yaradı, teşekkürler.

  • Enis Ciftci
    13:39h, 25 Nisan Cevapla

    Güzel bir yazı, emeğine sağlık.

Yorum Yapın