ASP.net MVC ile ToDoList Uygulaması

Bu yazıda Asp.net MVC Framework ve MVC 4 Scaffolding yapısı hakkında biraz bilgi verip sonrasında da TODO LIST (yapılacaklar listesi) tutan küçük bir örnek uygulamayı adım adım geliştireceğiz.

Bu yazıda Asp.net MVC Framework ve MVC 4 Scaffolding
yapısı hakkında biraz bilgi verip sonrasında da TODO LIST
(yapılacaklar listesi) tutan küçük bir örnek uygulamayı adım
adım geliştireceğiz.

Asp.Net MVC 4 ?

MVC, Model View Controller kelimelerinin baş harflerinden oluşan bir mimari desendir. Çoğu yazılım çözümlerinde ve dillerinde kullanabileceğiniz bu mimariden çok kısa bahsetmem gerekirse;

Model : Varlıkları oluşturan sınıflardan oluşur, veritabanı ile bağlantılı işlemler burada yapılır.
View : Kullanıcıya gösterilen html sayfalarıdır ve Controllerdan dönen verileri buralarda kullanırız.
Contoreller : Model ve Viewler arasındaki bağlantıyı kuran bu katmanda programlama dili kodları ile metodlar yazarız.



Biz Asp.Net tarafında bu mimariyi kullanacağımızdan C# kodları yazacağız ve Asp.Net MVC 4 sürümünü kullanacağız. Visual Studio 2012 sürümlerinde hazır gelmektedir. Diğerlerinde www.asp.net/mvc sitesinden indirip kurmanız gerekebilir.

Asp.Net MVC’de Scaffolding Yapısı

Asp.Net MVC sürükle bırak kontrollere sahip değildir, yazılımcılar daha çok severler bu yüzden. Gözünüz korkmasın, beraberinde gelen Scaffolding motoru CRUD işlemleri dediğimiz Create , Read , Update , Delete işlemlerini içeren Controller ve kullanıcıya gönderilecek Viewleri sizin için oluşturur, yani sizin yerinize kod yazar. Normalde bu işler için Controller eklemek, Controllera metodlar yazmak ve bu metodların her biri için de bir View eklemek gerekir. Tüm bunların otomatik olarak oluşturulmasını sağlayan Scaffolding yapısı, bize büyük kolaylık sağlar. Yani bir Model için tüm işlemleri yapabileceğimiz materyalleri bize belirli bir çerçevede sunar ve daha sonra biz onun ürettiği kodlarda kendimize göre değişiklikler yapabilir, gerekli yerleri modifiye edebiliriz.
Daha fazla teoriyi uzatmadan Asp.Net MVC 4 ile bir uygulama geliştirelim.

Asp.Net MVC 4 ile TODOLIST Uygulaması

Visiual Studio 2012 kullanacağımız projede New Project -> Asp.Net MVC 4 Web Application -> Internet Application adımlarını uygulayarak yeni bir proje açalım. Bizim için Home – About – Contact sayfalarının olduğu bir nevi Hello World Web uygulaması geliyor ilk olarak. Bunun için projede HomeContoller isimli bir Controllera sahibiz.

Biz öncelikle yapacağımız uygulama için bir Model oluşturacağız. Bunun için Model klasörüne sağ tıklayıp Add -> Class diyelim ve Task.cs isimli bir class oluşturalım. Classın içine gerekli propertyleri ekleyelim. Task.cs’nin son hali bu şekilde oluyor :


using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;


using System.Linq;

using System.Web;



namespace Todolist_2.Models

{

    public class Task

    {

        [ScaffoldColumn(false)]

        public int TaskId { get; set; }



        [DisplayName("Not")]

        public string TaskName { get; set; }



        [DisplayName("Yapıldı")]

        public bool Completed { get; set; }



        [DisplayName("Tarih")]

        public DateTime Date { get; set; }

    }

}



Burada kullandığımız attributeler :
ScaffoldColumn : Create ve Edit yapılırken düzenlenmesini istemediğimiz model özelliği için kullanılır.
DisplayName : Model özelliğinin kullanıcıya gösterilmesini istediğimiz ismi için kullanırız. Otomatik oluşturulan label etiketleri Türkçe ve anlamlı isimler gösterse iyi olur.
Bu attributeleri kullanabilmemiz için using yaptırılan namespaceler de koyu renkle gösterildi.

Şimdi oluşturduğumuz bu Task sınıfını içeren veritabanının oluşması, içinde bir Task tablosu oluşması ve veriye nesne yönelimli erişmeyi sağlayan Entity Framework kodları oluşması için Entites.cs isimli bir class daha oluşturmalıyız. Bu yaptığımız işe Entity Framework Code First denilmektedir. Yani varlık sınıflarını oluşturup geriye kalan işleri Asp.Net MVC’ye yaptırıyoruz.

Model Klasöründe daha önce oluşturduğumuz Task.cs gibi bir de Entites.cs ekleyelim.


using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using System.Web;



namespace Todolist_2.Models

{

    public class Entities : DbContext

    {



        public DbSet<Task> Tasks { get; set; }



    }

}



Böylece Entity Framework bizim için bir veri tabanı oluşturacaktır. Şimdi uygulamamızda boş bir veri tabanı oluşmaması için tablo içine örnek veriler koyalım, veritabanı oluşurken içine o veriler de yazılsın. Bunun için Model klasörüne daha öncekiler gibi bir class daha oluşturacağız. SampleData.cs olan bu class içerisinde Task nesneleri içeren bir liste oluşturacağız. Bu durumda SampleData.cs sınıfımızın son hali bu şekilde olmalı.


using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data.Entity;

using Todolist_2.Models;



namespace Todolist.Models

{

    public class SampleData : DropCreateDatabaseIfModelChanges<Entities>

    {

        

        protected override void Seed(Entities context)

        {

            new List<Task>

            {

               new Task{TaskName="Su Faturasını Öde",Completed=false,Date=DateTime.Today},

               new Task{TaskName="Kitapları kütüphaneye bırak",Completed=false,Date=DateTime.Today},

               new Task{TaskName="Sedanın Doğum gününü Unutma !",Completed=false,Date=DateTime.Today}

                       

            }.ForEach(a => context.Tasks.Add(a));

        }

    }

}



Daha sonra projemizin içinde bulunan Global.asax isimli dosyanın Application_Start() isimli metodunun içine şu satırı ekleyelim ki veri tabanımız bu verilerle oluşabilsin.


System.Data.Entity.Database.SetInitializer(new Todolist.Models.SampleData());



Tüm bu işlemlerden sonra artık Controller’ımızı oluşturabiliriz. Bunun için Controller klasörüne gelip sağ tıklayarak Add –> Controller adımlarından sonra
Template olarak : " MVC controller with read/write actions and views, using Entity Framework "
Model class olarak : " Task.cs"
Data Context olarak : " Entites.cs " seçerek controllerımızı oluşturalım.

Bu Contorllerı oluşturuken MVC , TaskController’ın içinde CRUD işlemleri için gerekli metodları ve bu metodlar için de gerekli viewleri bizim için arka planda hazırladı. Projemizi böylece çalıştırsak ve url’nin sonuna /Task ekleyerek Task sayfasına gidersek bizim oluşturduğumuz sample verilerle bir Index sayfası oluştuğunu ve bu verileri düzenleyebilmemiz için de Edit , Details , Delete linklerinin oluştuğunu görebiliriz. Şimdi artık bunları kendi kullanma isteğimize göre değiştirelim.

Öncelikle Delete metodunu değiştireceğiz. Şu anda Delete için de bir View sayfası oluşmuş durumda biz onu kullanmayacağız. Bir task verisini sildiğimizde direk sahip olduğumuz tablodan task verisinin silinmesini sağlayacağız. Yani yaptığımız bir değişikliğin o sayfada dönüşünün olmasını istiyoruz. Bunun için Ajax kullanacağız.

Bir metodda viewe bir paket olarak bilgi göndermemiz gerektiğinde bir ViewModel nesnesi oluşturulur. Bunun için Projemize ViewModel klasörü oluşturalım ve onun içine RemoveTaskViewModel.cs sınıfı oluşturalım. Böylece Ajax kodlarında kullanmamız gerekenleri bu nesnede toplamış oluruz.
RemoveTaskViewModel.cs sınıfı :


public class RemoveTaskViewModel

    {

        public string Message { get; set; }

        public int Id { get; set; }

    }



Şimdi Delete için yazılan iki metoddan birini silelim ve bir tane HttpPost Attribute sahip bir Delete metod yazalım, daha sonra Delete metodunu şu halde düzenleyelim :


public ActionResult Delete(int id )

        {

            Task task = db.Tasks.Find(id);

            if (task == null)

            {

                return HttpNotFound();

            }

           

            db.Tasks.Remove(task);

            db.SaveChanges();



            var results = new RemoveTaskViewModel

            {

                Id = task.TaskId,

                Message = task.TaskName + " isimli notunuz silindi."



            };



            return Json(results);

            

        }



Bu işlemlerden sonra TaskController için hazırlanan Viewlerden Index.cshtml Viewine Ajax kodlarımızı ekleyelim. Ajax kodları html etiketleindeki id’ler ve class’larla çalışır. Bunun için ;

Ajax Kodları :


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">



   

    $(function () {



   // Document.ready -> link up remove event handler

        $(".Delete").click(function () {

            // Get the id from the link

            var recordToDelete = $(this).attr("data-id");

            if (recordToDelete != '') {

                // Perform the ajax post

                $.post("/Task/Delete", { "id": recordToDelete },

function (data) {

    // Successful requests get here

    // Update the page elements

    $('#row-' + data.Id).fadeOut('slow');

    $('#update-message').text(data.Message).fadeOut(2000);



});

            }

        });

    });

</script>



Ve ;


@Html.ActionLink("Delete", "Delete", new { id=item.TaskId })

Satırını


<a href="#" class="Delete" data-id="@item.TaskId"> Notu Sil</a>

olarak değişterelim.

Böylece projeyi çalıştırdığımızda Notu sil linkine tıkladığımızda tablodan notumuz yavaş bir efektle silinecektir. :)

Şimdi tablomuza bir de Yapıldı Link’i ekleyelim. Notlarımızı yapıldı olarak işaretleyebilelim ve yapılan notlar üstü çizili gelsin. Bunun için TaskController’a Done Metodu ekleyelim :


[HttpPost]

        public ActionResult Done(int id)

        {

            Task task = db.Tasks.Find(id);

            if (task == null)

            {

                return HttpNotFound();

            }

            task.Completed = true;

            db.SaveChanges();

            var results = new RemoveTaskViewModel

            {

                Id = task.TaskId,

            };

            return Json(results);

        }



Daha sonra Index’e bir Ajax metodu daha ekleyelim ve Yapıldı link’i oluşturan html kodunu yazalım. Tabi notlar yapılmamış ise bu link gelsin diye de bir de bir if kontrolü ekleyelim.

Yapıldı için Ajax kodları : bu kodu da

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git