Veri Gösterim Kontrolü Altyapısı (Model View Controller) Framework Uygulamaları

Eyl 06, 2013

MVC (Model View Controller - Veri Gösterim Kontrolü Altyapısı ), kullanıcıya yüklü miktarda verinin sunulduğu karmaşık uygulamalarda veri ve gösterimin soyutlanması esasına dayanır. Böylelikle veriler (model) ve kullanıcı arayüzü (view) birbirini etkilemeden düzenlenebilir. MVC, bunu "controller" adı verilen ara bileşenle, veri gösterimi ve kullanıcı etkileşiminden, veri erişimi ve iş mantığını çıkarma suretiyle çözer.

Bir MVC uygulaması gerçekleştirebilmek için bilgisayarda Visual Studio 2008 SP1 yüklü olması gereklidir. \\yazilim\yazilim\Microsoft\Visual Studio\Visual Studio 2008\SP1 bağlantıdan yüklenebilir.

  1. Öncelikle projede kullanılacak olan veri tabanı ve onun içerisindeki tablo aşağıdaki şekilde hazırlanır.

     

  2. Tablonun Identity Column (Kimlik Sütunu) özelliğine Id değeri atanır.


     

  3. Proje geliştirme esnasında denemeler yapabilmek için elle birkaç veri girilir. 


     

  4. File (Dosya) ->New Project (Yeni Proje) adımlarından sonra açılan pencereden ASP.NET MVC Web Application (ASP.NET MVC Web Uygulaması) seçilerek proje oluşturulur.  




  5. Bir sonraki adımda test projesi istenilip istenmediğini soran pencere gelir. Burada test projesi istenilmediğine dair seçim yapılır. (Visual Web Developer sürümlerinde bu pencere çıkmaz.)

     

  6. Böylece bir MVC projesinin ilk hali yaratmış olunur. 

  7. MVC Framework’ün bize sağladığı kayıt listeleme, yeni kayıt oluşturma ve kayıt düzenleme özelliklerini daha rahat görebilmek içinControllers\HomeController.cs dosyasını ve  Views\Home dizinini daha sonra tekrar yaratmak üzere silinir.

  8. MVC projesini gerçekleyebilmek için bir veri tabanı bağlantısı modelini oluşturmak için ADO.NET Entity Data Model (ADO.NET Varlık Veri Modeli) kullanılır. Bu model Solution Explorer (Çözüm Tarayıcısı) -> Models (Modeller) klasörü sağ tıklanarak açılan pencerede Add New Item (Yeni Nesne Ekle) seçeneği seçilerek yapılır.

     

  9. Add (Ekle) düğmesi tıklandıktan sonra gelen ekranda sırasıyla aşağıdaki adımlar uygulanır.
    • Generate From Database (Veri Tabanından Türet) seçeneği seçilir.
    • Choose Your Data Connection (Veri Bağlantısı Seç) ekranında veri tabanı seçilir.
    • Choose Your Database Object (Veri Tabanı Nesnesi Seç) ekranında Table (Tablo) seçeneğinden kullanacak olan tablo/tablolar seçilerek işlem tamamlanır. 

  10. Sonuç olarak Models dizini altında NorthwindModel.edmx adında bir dosya oluşmuş olur. Modelin Column Mapping (Sütun haritalandırma) bölümünde tabloya/tablolara karşılık gelen tablo aşağıdaki örnekte olduğu gibi otomatik olarak oluşur.

     


     

Bu sayede projenin veri tabanı bağlantısı sağlanmış olur. Bu bağlantı ve MVC kullanarak formlar halinde veriler üzerinde değişiklikler yapılabilir.

  1. MVC kontrollerimizi ekleyebilmek için Çözüm Tarayıcısı'nda "Controllers" klasörünün üzerinde sağ tıklayak  Add (Ekle)->Controller (Kontrol) adımlarını izleyerek yeni bir sınıf yaratılır. 

     

  2. Daha önce silinen HomeController adındaki kontrol tekrar yaratılır. Bu sırada Index, Create, Edit metodları içleri boş şekilde otomatik olarak oluşturulur.

    HomeController sınıfı içinden veri tabanına bağlanabilmek için;

    private NorthwindEntities db = new NorthwindEntities();

    kod parçacığını eklenir. Daha sonra “db” kullanarak veri tabanı ile ilgili her türlü işlem yapılacaktır.

    Veritabanındaki verileri listeleyebilmek için Index() metodunu kullanılır. Bu metod aşağıdaki şekilde değiştirlir.

    public ActionResult Index()
            {
                return View(db.Araba.ToList());
            }
  3. Metodun ismi üzerinde sağ tıklayarak Add View (Arayüz Ekle) seçeneği seçilir. Açılan ekranı aşağıdaki şekildeki gibi doldurulur. Listeleme işlemi yapabilmek için içerik olarak List (Listele) seçeneği seçilir.


     

  4. Böylece Views/Home dizini altında listeleme yapılacaktır. Index.aspx sayfası otomatik olarak oluşturulur. Oluşturulan sayfa içerisindeki kodların hiç birinde değişiklik yapılmadan alınan sonuç aşağıdaki gibidir.

Yeni kayıt oluşturmak için Create() metodu ve sunucuyla gönderim yolu ile haberleşen Create() metodunu kullanılır.

public ActionResult Create()
{
    return View();
}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Create([Bind(Exclude="Id")] Araba arabaToCreate)
{
    if (!ModelState.IsValid)
    return Create();
    try
    {
         db.AddToAraba(arabaToCreate);
         db.SaveChanges();         
         return RedirectToAction("index");
    }
    catch
    {
          return View();
    }
}  

  1. Create methodunun arayüzünü oluşturmak için Index methodunda kullanılan yöntem kullanılır. İçerik olarak bu kez Create (Yarat) seçeneği seçilir. 

     

  2. Böylece Views/Home dizini altında listeleme yapılacak Create.aspx sayfası otomatik olarak oluşturulur. Oluşan sayfada kontrolü yapan kontroller de otomatik olarak yerleştirilmiş durumdadır. Oluşturulan sayfa içindeki kodların hiç birinde değişiklik yapılmadan alınan ekran çıktısı aşağıdaki gibidir.


     


    Id seçeneğinde uyarı vermemesinin sebebi aşırı yüklenmiş metodu oluştururken Id değerinin otomatik artırılacağı şeklinde ayar yapılmasıdır. Bu kutuya herhangi bir değer girilse dahi yeni kayıt için Id değerini en son Id değerinin bir fazlası şeklinde veri tabanına kayıt edilecektir.

    Kayıt düzenleme için de Edit() metodu kullanılır. Yaratmada olduğu gibi bir tane normal ve bir tane de aşırı yüklenmiş metot yaratılır. Birincisi Id ‘den yararlanarak düzenlenecek olan kayıda ilişkin verileri form kontrollerine bağlar. İkincisi ise form kontrollerine bağlanmış olan veriler üzerinde yapılmış olan değişiklikleri günceller.

    public ActionResult Edit(int id)
    {
        var arabaToEdit = (from n in db.Araba
                           where n.Id == id
                           select n).First(); 
        return View(arabaToEdit);



    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Edit(Araba arabaToEdit)
    {
        if (!ModelState.IsValid)
        return View();
        try
        {
           var arabaEdit = (from m in db.Araba
                            where m.Id == arabaToEdit.Id
                            select m).First();
           db.ApplyPropertyChanges(arabaEdit.EntityKey.EntitySetName,
               arabaToEdit);
           db.SaveChanges();
           return RedirectToAction("Index");
        }
        catch
        { return View(); }
    }

  3. Önceki 2 metotta olduğu gibi kullanıcı arayüz oluşturulur. İçerik olarak bu kez Edit (Düzenle) seçeneği seçilir. 

     

  4. Böylece Views/Home dizini altında listeleme yapılacak Edit.aspx sayfası otomatik olarak oluşturulur. Oluşturulan sayfa içerisindeki kodların hiçbirinde değişiklik yapılmadan alınan ekran çıktısı aşağıdaki gibidir.