ASP.NET MVC projelerinde UIHint ile hız kazanın

Asp.Net  Flash Bilgiler  Nisan 9, 2017

Bu yazımda ASP.Net MVC projelerinde sürekli verileri ekrana getirmek veya formlar filan oluşturmak için html yazmaktan nasıl kurtulacağınızı anlatacağım. Bir ara UIHint konusunu fark ettimde baya rahatladım diyebilirim. Hele ki hazır panel tasarımları kullanıyorsanız ilaç gibi gelebilir.

ASP.Net konusunda çok fazla çalışmama rağmen pek birşeyler yazamayışıma her zaman üzülmüşdür. Fazla vakit ayıramadığımdan diyebilirim. Hatta çok sevdiğim Codeigniter serisini de tamamlayamadığımdan dolayı çok sitem etmişimdir kendime. Her ne ise dönelim konuya.

Farz edelim ki bir projenin panelini veya ön yüzünde sürekli benzer şablonlarda sayfalar hazırlıyorsunuz. Her defasında bu alanlar için html kodlarını (heleki bootstrap tabanlıysa form group la başlayan divler) yazmaktan sıkılabilirsiniz. Ancak bu UIHint iyi bir şey diyebilirim size.

Konuya direk dalayım fazla laf iyi değildir. Bir MVC projesi açıp konuya gireyim.

2017-04-09 21_51_12-UIHintExample - Microsoft Visual Studio

Burada projemizin nadide görüntüsü görünmekte. Şimdi ne yapacağız tabiki uihint uygulamak için modelimizi oluşturacağız. Burada her ne kadar Entity Framework kullanmam gereksede ben kullanmayacağım 🙂 Ne yapacağız varmış gibi kabul edeceğiz.

2017-04-09 22_03_21-UIHintExample - Microsoft Visual Studio

Yukarıda bir fake context oluşturup model tanımı yaptık. Oldumu şimdi diyen vardır olmadı bende farkındayım, neden olmadı bu durumlarda genelde viewmodel oluşturmak mühim. E ne anladık ara bir modele diyebilirsiniz ama bu bana daha basit geldi 🙂 Herneyse konuyu kaynatmadan devam edelim. Şimdi bir liste sayfası oluşturalım. Bunun için bir model hazırlayacağız.

2017-04-09 22_28_05-UIHintExample - Microsoft Visual Studio

Ürün listelemede kullancağımız bu modelde ürün fiyatını formatlamak için bir UIHint tanımladık. Bu şekilde listelerken uğraşmayacağız. Hemen dosyaları hazırlayalım.

2017-04-09 22_31_05-UIHintExample - Microsoft Visual Studio

Resimde de göreceğiniz gibi Shared klasörünün altında DisplayTemplates adında bir klasör ve UIHint de belirtiğimiz isimde bir Razor view hazırladık. Ne var içeriğinde diyecek olursanız.

2017-04-09 22_32_44-UIHintExample - Microsoft Visual Studio

Bu kadar basitmi? Elbette. Tabi burada dikkat etmemiz gereken nokta şu model tanımına bu fieldin tipini vermeniz gerek yani ana modelin değil. Sayfamızı hemen hazırlayalım bakalım ne oluyor. Bir ProductController ekleyerek başlayalım. Standart olarak Index methodun altına listeleme ekleyelim.

2017-04-09 22_38_11-UIHintExample - Microsoft Visual Studio

Burada FakeContext üzerinden veri okunup model e dönüştürülüyor. Ardından viewe aktarılıyor. Burası temel basit hali. Şimdi view ekleyelim.

2017-04-09 22_39_55-Görünüm Ekle

Burada listelerken ne yaptık şablona modelimizi de geçirdik. Bu öndeki liste modelimiz. Peki ortaya nasıl bir view çıktı.

2017-04-09 22_41_33-UIHintExample - Microsoft Visual Studio

Bu da normal bir view aynen öyle, peki bizim uihint nerde tabiki DisplayFor ile price yi geçirmemizde saklı. Yani şu anda standart temaya müdehale etmemiş olduk sadece display işleminde araya girerek bizim template dosyasını oku diyoruz.

2017-04-09 22_44_53-Index - ASP.NET Uygulamam

Woops! bakın bizim verdiğimiz price standardında fiyat görüntülendi c2 verdiğimizi yukarıda görebilirsiniz. Artık scaffolding işleminden sonra pek birşey yapmanıza gerek yok. Hatta şablonlarınızı iyice iyi hazırlayabilirseniz elinizi sürmeden geçebilirsinizde. Bir edit sayfası yapalım bakalım burada da fiyatı 2 basamaklı float olarak çıkaracağız böylece standart virgülden sonraki 4 haneyi düzeltmiş olacağız. Edit işlemi (Create işleminde de aynı sınıfı kullanabilirsiniz) için hemen bir viewmodel yazalım.

2017-04-09 22_52_26-UIHintExample - Microsoft Visual Studio

Bu modelde ayrıca description alanını textarea olarak göstereceğiz. Hemen bu iki uihint için dosyaları oluşturalım.

2017-04-09 23_00_46-UIHintExample - Microsoft Visual Studio

Şimdi EditorTemplates adında bir klasör açıyoruz çünkü scaffolding işleminde DisplayFor değil EditorFor gelecek.

2017-04-09 23_00_31-UIHintExample - Microsoft Visual Studio

Burada malum form-group olayını eklemiş olduk. Dikkat ederseniz name kısımlarını boş bırakıyoruz bunu modelden alması için boş olması gerek.

2017-04-09 23_12_29-UIHintExample - Microsoft Visual Studio

Burada da aynı durum söz konusu ancak formatlamak için modelimizi string.formata maruz bırakıyoruz. Gelelim controllera edit actionu eklemeye.

2017-04-09 23_14_07-UIHintExample - Microsoft Visual Studio

Edit işlemi için id ile gelen değeri fakecontext te bulup kullanacağımız modele dönüştürüyor ve viewe gönderiyoruz. Peki view nerede hemen oluşturalım.

2017-04-09 23_15_41-Görünüm Ekle

Viewe modelimizin tipini de veriyoruz.

2017-04-09 23_17_13-UIHintExample - Microsoft Visual Studio

Peki burada birşey yapmamız gerekiyor biz form group vs işlemlerini diğer yerde yapmıştık. Aslında isterseniz formatlama gibi işlemleri sadece oraya bırakın isterseniz benim gibi yapın, aşağıda ki gibi.

2017-04-09 23_19_11-UIHintExample - Microsoft Visual Studio

Evet bu iki alanı artık belirtmemiz yetti. Yani elinizdeki tüm alan tipleri için form vs tasarımlarını bir defa yapıp daha sonra bunları şablonlar çağırarak sadece editor veya display diyerek yapmanız çok daha hızlı olur. Çalıştırıp bakalım.

2017-04-09 23_21_43-Edit - ASP.NET Uygulamam

Evet artık alanlar istediğimiz gibi formatlanıp isimlenmiş oldu. Bundan sonrası zaten konu dışı kaydetme vs işlemlerini de normal devam ettireceksiniz. İşinizi epeyce hızlandıracak bu yol ile ilk başta biraz zaman ayırınca işin devamı gayet temiz oluyor.

Bu arada unutmadan github da projeyi yayınladım isteyen indirip bakabilir.

https://github.com/halityurttas/UIHintExample

Esenlikle…

Bu yazı 1112 defa görüntülendi

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Yazar Hakkında

15 yıllık çalışma hayatında birçok proje geliştirmiş binlerce projeyi inceleme fırsatı bulmuş yazılım aşığıdır. İşini hobi olarak gören yazarımız iş hayatını profesyonelce zevkle sürdürmektedir.

Son Eklenenler