Mvc’de Model ve Özelleştirilmiş Kontrol Kavramına Derinlemesine Giriş

Mvc’nin enstrumanları ve çalışma mantığının daha iyi anlaşılması için örnek bir uygulama yapıcağız. Bu uygulamamızda bir kullanıcıya role yetkileri verip istendiğinde rol isimlerini ve açıklamalarını değiştirebileceğiz.Daha sonra rolün önem sırasına göre bir değerlendirme yapıcağız.

Model:Mvc’deki M’nin anlamı olması dışında, database ile olan tüm işlemlerimizin kullanıldığı yapıdır. Birbaşka konuda view modellerdir.View modeller database’i temsil eden moddellerin view tarafındaki karşılıklarıdır. View tarafında ayrıca bir modele ihtiyaç duymamızın iki nedeni vardır. Birincisi databasedeki tüm verileri view’da göstermek istemeyebiliriz. Gereksiz yere tüm datanın view tarafına gönderilmesi gereksiz bir performance kaybına neden olacaktır.İkinci neden ise database’de yapılabilecek bir değişiklik, view tarafında herhangi bir hataya sebebiyet vermemelidir. Bu nedenle bir Role için bir de bu rol’ün önem derecesine not vereceğimiz dropdownlist için iki ayrı view model’i aşağıda görüldüğü gibi oluşturduk. İkisi için tek model yapmamamızın nedeni dağıtık mimariye uymak isteyişimizdir. Yani ileride role veya bu derecelendirme modellerini başka bir yerde,  farklı amaçlarla kullanabiliriz. İkisini tek bir modelde toplasa idik, rol’e ihtiyaç duyulup derecelendirme yapılmayacak durumlarda tüm yapıyı içeren bu global model ile çalışmak zorunda kalacak ve gerekmediği halde derecelendirme modelini de gönderecektik.

Routing: Sayfamızın adresini yazdıktan sonra yani bir request işleminden sonra routing devreye girer. RoutConfig’in bir mvc projesindeki yeri App_Star/RouteConfig.cs. dir.Buradan ilgili controller’ın  ilgili action’ını bulunur.Routing konusunu ilerde detaylı olarak inceliyeceğiz.

route

Controller Ve Action: Data ile view arasındaki bağlantıyı kuran yapı controllerdır. Aşağıda görüldüğü gibi  HomeController’ın Index Actionın’da view’ımız için gerekli dummy dataları, List<RoleModel>‘imize doldurup gönderdik. Ayrıca dropdownlist’imiz için oluşturduğumuz ListModel’i ViewBag ile gönderdikİlgili datayı ViewBag ile göndermemizin nedeni Index View’umuz ‘@model List<User.Models.RoleModel>’  beklemesine rağmen ayrıca bir List<ListModel> beklememesidir. Gönderilecek olan bu datanın kısalığı,  pek önem teşkil etmemesi ve yukarıda da bahsettiğim dağıtık mimarinin uygulanmaya çalışması ListModel’in ViewBag ile gönderilmesindeki en doğru seçim olduğunu göstermektedir. (Not:ViewBag sadece controller’dan view’a doğru tek yönlü çalışan dynamic tipte veri tutan ve sonra silinen veri taşıma objesidir.)  Ödev:Siz daha sonra ListModelimiz de view tarafında oluşturup dropdownlistimizi doldurmayı deneyin. İlgili kod bloğunu alttaki yorumlara koyabilirsiniz.Böylece ilgili dataları, ilgili modellerimize doldurduk. Normalde bu işlemi bussines katmanında CodeFirst ,EntityFramwork veya başka araçlarla yapılmalıdır. Ama burada amacımız Mvc‘deki data akış prosedürlerini incelemektir.

Yukarıda görüldüğü üzere dummy datalarımızı ve bunları dolduran methodlarımızı yazdık. Artık bunları Index View’a gönderebiliriz.

Yukarıda görüldüğü üzere ViewBag.List’imizde dinamik List oluşturduk ve ListModeleimizi gönderdik. Aynı şekilde View’a da RoleModelimizi gönderdik.

Aşağıda görüldüğü gibi View: Index view’ımız model olarak RoleModel listesi beklemektedir. Ayrıca @using ile dll olarak bulunan TestRadio.Model classımızı da view’ımızda kullandık.

View’ımızın dizaynı aşağıdaki gibidir:

Örnek Ekran görüntüsü aşağıdadır.

AjaxPost

Yukarıda RadioButton , TextBox ve Dropdownlistlerimizi RoleModel Listemiz’i foreach ile dönerek doldurduk. Aşağıda RadioButton’umuzun uzun hali gözükmektedir.Burada belli bazı parametreleri kodumuz gereği eklemek zorunda kaldık.Tüm RadioButtonlar için bu işlemin yapılması gayet zahmetli ve zaman alıcı bir iştir. İşimizi kolaylaştırmak adına RadioButton için Custom HtmlHelper Control‘ünü aşağıda görüldüğü gibi yazdık. Projemizde yetki ve açıklama alanlarının zorunlu olması, bu alanların boş geçilememesi ve bunun denenmesi halinde çeşitli şekillerde uyarı verilmesi, ayrıca daha sonradan ilgili textbox’a ulaşabilmek adına tanımlamamız gereken çeşitli parametrelerin olması CustomTextBox çözümüne gitmemizeki enbüyük etkenlerdir. Kodlama aşağıda görüldüğü gibidir.

Custom HtmlHelper BoraRadioButton:

 Custom HtmlHelper BoraTextBox:

BoraTextBox’a dikkat ederseniz.ClientSide validation yazdık.Boş kontrolü yapıyoruz.Kısaca textboxlarımız required yani zorunlu. TextBox’ların onblur’unda ve keyup event’inde javascript function’ını yazdık.Eğer boş ise arka rengi sarı yapıp bu textbox’dan ayrılmaya izin vermiyoruz.

DropDownList’imizi de ViewBag.List’den doldurduk.

Ödev:Bir tane de CustomDropDownList siz yazın. İlgili kodu alttaki yourumlar kısmına koyabilirsiniz.

Yukarıda görüldüğü gibi javascript’imizde datamodel[ ] Array dizisi oluşturduk.Herbir Data için uniq olan ID değerlerine erişmek için tüm hidden controlleri döndük. Tüm nesnelerimizin isimlendirmelerini bu uniq ID’lere göre yaptığımız için ihitiyacımız olan dataları kolaylıkla çektik. Tüm controller’deki çektiğimiz bu dataları array modelimize doldurduk.  Not:Dikkat ederseniz data modelîmizin property isimleri ile RoleModel’in property isimleri aynı.

Amaç ajax posta controller’a gönderilen data List<RoleModel> model’e uygun bir client side data modeli oluşturmak.

Controller Index Post Action:

Yukarıda görüldüğü üzere post edilen data geçerlimi diye bakıldıktan sonra, save işlemi yapıldı. Ve sonuç mesajı gönderildi.

Yukarıda görüldüğü gibi doldurulan datamodel JSON  formatına çevrildi. Ajaxpost’da datanın çekileceği url Controller/Action(url:’/Home/Index’) olarak belirtildi. Dikkat ederseniz iki tane Index Action’ı var.İkisini ayıran tek şey [Post] attribute’ü.Daha sonra custom attribute’ler de yazıcaz.Hatta bu attributeları filter amaçlı olarak kullanıcaz.

Herkese iyi çalışmalar.

Bir sonraki makalede görüşmek üzere hoşçakalın.

Not:Örnek Url:http://testradio.azurewebsites.net/

Source Code:http://www.borakasmer.com/projects/TestRadio.rar

Herkes Görsün:

Sevebilirsin...

2 Yanıt

  1. Anonim diyor ki:

    Bilgi için teşekkürler. Ancak aşşağıda değil aşağıda olacak. Tüm makalede yanlış yazılmış.

Bir Cevap Yazın

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