Mvc ile Kendi Helper Metodumuzu Oluşturma

Merhaba arkadaşlar,

Bu yazıda Mvc ile uygulama geliştirirken oluşturup kullanabileceğimiz helper metotlardan bahsedeceğim.  Bilindiği üzere Mvc üzerinde Asp.Net web formlardaki gibi hazır web kontrolleri yoktur. Bu yüzden kodları kendimiz yazmak zorunda kalıyoruz. Fakat bazı kontrolleri hazır bir şekilde oluşturmamıza yarayan extension metotlar vardır. Bunlara helper metotları denir. Örneğin bir label oluşturmak için <label></label> yazmak yerine @Html.Label metodunu kullanabiliriz. Bununla birlikte kendi helper metodumuzu da oluşturabiliriz.

Öncellikle bir Asp.Net Web Application ile bir MVC projesi oluşturalım. Oluşturduğumuz projede özel olarak oluşturulan bir css yapısı kullanalım. Bunun için https://github.com/chinchang/hint.css sitesinden hint.css ve hint.min.css dosyalarını projemizdeki "Content" klasörüne kopyalayalım.

Projemize sağ tıklayalım ve "Helpers" adında bir klasör oluşturalım. Oluşturacağımız metodu burada bir class oluşturup içerisinde tanımlayalım. Bu örnekte textbox tipinde bir input için helper oluşturacağız. Bu class'ta geri dönüş tipi HtmlString olan bir metot tanımlayacağız.

Helper metodu olduğunu belirtmek için ilk parametrede "this HtmlHelper helper" tanımlamasını yaptık. String id ile oluşturacağımız input için id değeri veriyoruz. HintClass ile uyarının oluşturduğumuz inputun sağ,sol,alt veya üstünde olmasını tanımlayacağız. HintData ile oluşturacağımız uyarı için içerik yazacağız. HintClass ile kullanacağımız yön belirtmesi için bir class tanımlaması yapalım:

Class içerisindeki tanımlamalarımız bittikten sonra Home Controller içerisindeki Index actionı için bir View oluşturalım. Hazır Mvc template kullanarak projeyi oluşturduysak bu view, Views klasörü altında zaten oluşturulmuş olacaktır. Hazır view içeriğini temizleyip aşağıdaki kodları yazalım:

Oluşturduğumuz Helpers klasörüne erişebilmemiz için using ile Index sayfasına ekliyoruz. Bu sayfada hint.css kullanmak için de Content klasörü içindeki css dosyasını sürükle bırak yöntemiyle ekliyoruz. Sayfada yer alacak input yapıları için kodlarımızı yazıyoruz. Burada @Html yazıp noktaya bastıktan sonra oluşturduğumuz InboxHint extension metodu da diğer metotlarla birlikte listede yer alır. Daha önce söylediğimiz gibi ilk olarak id, daha sonra mesajın görüntüleneceği konum ve mesaj içeriğini yazalım. Metodu oluştururken 4 parametremiz vardı. Bunlardan ilki helper olduğu için yazdığımız tanımlamaydı. O yüzden burada kullanmayız. Kodumuzu çalıştırdığımızda oluşan ekran görüntüsü şu şekilde olur:

Code First Yaklaşımında Fake Data Kullanımı

Merhaba arkadaşlar,

Code First yaklaşımı bir model ürettiğimizde, bu model içerisinde aynı zamanda da veri oluşturmak işimize yarayabilir. Bu yazıda code first kullanarak içerisinde veri olan bir modeli nasıl oluşturacağımızdan bahsedeceğim.

Visual Studio'da bir WinForm projesi oluşturalım. Solution explorer penceresinden proje adına sağ tıklayıp "Manage NuGet Packages.. " seçeneğine tıklayalım. Açılan pencereden code first kullanımı için gerekli olan "Entity Framework" paketini indirelim.

Tasarım aşamasında ana formumuza sadece listbox ekleyelim. Daha sonra projemize "Kisi" isimli bir class ekleyip içerisine ID,Ad ve Soyad alanları ekleyelim. Ad ve Soyad alanları listbox içinde görüntülemek için de toString() metodunu override edelim.

 Kodumuza oluşturacağımız veritabanı context yapısı için KisiContext isimli bir class oluşturalım ve DbContext nesnesinden türetelim. Buraya DbSet<Kisi> tipinde property ekleyelim. FakeData ile veri oluşturmak için bize sunulan hazır bir paket bulunmaktadır. FakeData yardımıyla adres, telefon,yaş, tarih vb. verilerini kolaylıkla üretebilirsiniz. Manage NuGet Packages seçeneğiyle projemize FakeData paketini indirelim. Bu paket sayesinde örnek verilerimizi veritabanına basabiliriz. Bunun için bir KisiContext class yapısının içinde KisiOlusturucu isimli bir class oluşturalım ve miras almak için CreateDatabaseIfNotExists<KisiContext> kodunu kullanalım. Bu yapı ile bize class içerinde override edebileceğimiz InitializeDatabase ve Seed metotlarını kullanmamıza olanak sağlayacaktır. InitializeDatabase, database oluşurken çalışır. Seed metodu ise database oluşturulduktan sonra çalışır. FakeData oluşturmak için kuracağımız yapıyı Seed metodu içinde şu şekilde tanımlayacağız :

KisiContext yapısında oluşturduğumuz KisiOlusturucu kullanmak için şu şekilde tanımlayacağız :

Context içerisinde işlemimizi tamamladıktan sonra app.config içerisinde connection string ifadesini oluşturalım. Burada dikkat etmemiz gereken bu tanımlamanın configSections etiketinin dışında yapılmasıdır.

Formumuzun load olayına gidip context nesnemizi oluşturalım vev oluşturduğumuz verileri listbox ile gösterelim.

Bu işlemleri tamamladıktan sonra kodumuzu çalıştırabiliriz. Kodumuzu çalıştırdıktan sonra oluşan ekran görüntüsü şu şekilde olacaktır:

ListView İçerisinde Birden Fazla LinkButton Kullanımı

Merhaba arkadaşlar,

Bugün WebForm ile her satırında iki linkbutton yer alan bir listview kontolünü yapacağız. Bunun için öncelikle sayfamıza bir listview ekleyelim ve ardından da görüntülemek istediğimiz üyelerle birlikte 2 adet de linkbutton ekleyelim. Oluşturacağımız listview içerisinde bir satırın rengini açık diğer bir satırın rengini de koyu yapacağım. Sonuçta oluşacak listview görüntüm şu şekilde olacak:

ListView içerisinde bir satır açık ve bir satır koyu renk kullanımı için <ItemTemplate> ve <AlternatingItemTemplate> yapılarını kullanacağız. Birinin css class yapısına açık renk diğerine de koyu renk vereceğiz. Öncelikle istediğimiz görünüm için ayarlarımızı yapalım.

Yukarıdaki şekilde yer alan listview yapısını oluşturmak için aspx sayfamızdaki source bölümünde yer alan form etiketinin içine aşağıdaki kodları yazıyoruz. Burada HiddenField şeklinde tanımladığımız "Id" değeri listview içerisinde görüntülenmeyecek fakat arkaplanda işlemlerimizi yaparken kullanabileceğiz.

ListView içerisinde yer alan linkbutton seçeneklerinden herhangi birine tıkladığımda bulunduğu satırın "Id" değerini bana geri vermesini, ayrıca update butonu için onun ilgili kodlarını ve delete için onun ilgili kodlarını çalıştırmasını istiyorum. Key olarak Id değerini kullanabilmek için listview attribute değerlerinden biri olan "DataKeyNames" yapısını kullanmalıyız.  Update ve Delete seçeneklerinden hangisinin seçildiğini kod tarafında belirleyebilmek için her birine CommandName değeri eklemeliyiz ve listview içinde "OnItemCommand" attribute değerini kullanmalıyız.Yaptığımız son değişikliklerle listview kod yapımız şu şekilde olacaktır:

Tasarım aşamasını tamamladıktan sonra kodda boş bir yere sağ tıklayıp View Code diyelim ve seçili linkbutton için yapılacak işlerimizi tanımlayalım. 

Yukarıda yer alan kodda ListViewDataItem tipinde data verimizi elde ediyoruz. DataKeys özelliğinden faydalanarak key değeri olarak tanımladığımız "Id" değerini elde edip postId isimli string tipinde bir değişkene atıyoruz. Elde ettiğimiz postId değerini başka sayfalarda kullanmak için "Session" içerisine yolluyoruz. Session, bize sayfalarımız arasında veri taşımamıza yardımcı olur.

Kodda yer alan  e değeri içindeki CommandName ile bize linkbutton attribute değerinde tanımladığımız "Update" veya "Delete" değeri dönmektedir.  Gelen değer "Update" ise Guncelle.aspx sayfasına session içerisindeki postId değeriyle gönderiyoruz. Eğer gelen değer "Delete" ise SilOnay.aspx sayfasına yine session içerisindeki postId değeriyle yolluyoruz.

Linkbutton kullanarak yapacağınız işlemleri belirleyebilir ve linkbutton içerisinde yapacağınız bu işlemi seçili satırın Id değerini yukarıdaki gibi alıp da Id değerine göre veri güncelleme ve veri silme işlemlerini yapabilirsiniz.

Entity Framework - Partial Class Kullanımı

Merhaba arkadaşlar,

Entity Framework kullanacağımız bir desktop uygulaması yazdığımızı varsayalım. Projemize, Entity Framework ile bir data model oluşturup eklediğimizi ve daha sonra burada yer alan tüm class yapılarının ToString() metodunu override ettiğimizi düşünelim. Daha sonra oluşturduğumuz bu data modele bir tablo daha eklememiz gerektiğinde "Update Model from Database" seçeneğini kullanarak bir değişiklik yapabiliriz. Ama bu değişikliği yaptığımızda, ToString() eklediğimiz tüm class yapıları bu değişiklikten etkilenir. Çünkü entitiy framework ile oluşturulan classlar Auto Generated yapıdadır. Bu nedenle modeli güncellediğimizde yeniden oluşturulacak ve içerisine yazmış olduğumuz ToString() metodu da silinecektir. Peki bunun önüne nasıl geçebiliriz? Yaptığım bir değişikliğin update ile değişmesini nasıl engellerim? Burada yardımımıza partial class yetişiyor.

Partial class, adından da anlaşılacağı gibi oluşturduğumuz classın bir parçasıdır. Yapacağımız değişiklikleri modelle oluşan ana classlar içerisinde değil de kendi oluşturduğumuz bir partial class içerisinde yaparsak güncellemelerden etkilenmesini engellemiş oluruz.

Northwind ile bir data model oluşturalım ve içerisine "Categories ve Products" tablolarını ekleyelim. Her birinin classlarının içerisinde ToString() metodunu override edelim.

Bu işlemi yaptıktan sonra dosyaları kaydedelim ve oluşturduğumuz data model içine Customers tablosunu ekleyelim ve kaydedelim. Az önce ToString() metotlarını override ettiğimiz Categories ve Products classlarının içinde artık bu metodun olmadığını göreceksiniz. Şimdi bahsettiğmiz partial class yapısını kullalım. Projemize sağ tıklayıp modeldeki classlardan farklı isimlerde classlar ekleyelim. Categories için Category2, Products için de Product isimli 2 adet class oluşturalım. Bu classların içini aşağıdaki şekildeki gibi değiştirip kaydedelim.

Classları her ne kadar Category2 ve Product2 ismiyle oluşturmuş olsak da kod içerisinde yer alan class ismini data modelde yer alan isimler ile aynı yapmalıyız. Böylece hangi classın bir parçası olduğunu belirtebiliriz. Ayrıca namespace de yer alan ifadelerin de data modeldekiyle aynı olması gerekmektedir. Şekildeki değişiklikleri yaptıktan sonra data model içerisinden az önce eklediğmiz Customers tablosunu silip modeli kaydedelim.

Solution Explorer içerisinde az önce oluşturduğumuz Category2 ve Product2 classlarının hala durduğunu ve içlerinde yer alan ToString() metotlarında herhangi bir değişiklik olmadığını görebilirsiniz. Bu şekilde, güncellediğiniz modelde yaptığınız değişiklikleri rahatça koruyabilirsiniz.

Code Snippet

Merhaba arkadaşlar,

Projelerimizde kendi yazdığımız ve visual studio üzerinde hazır olarak kullanabileceğimiz bir "Snippet" için yapmamız gereken ilk şey Visual Studio içerisinden Tools sekmesinde yer alan Extension & Updates yolunu takip ederek gerekli designer aracını projeye dahil etmektir. Extentions & Updates seçeneğine tıkladıktan sonra karşımıza çıkan pencerede online sekmesinde "snippet designer" seçeneğini aratalım.

Yukarıda kırmızıyla işaretli olan seçeneği indirelim. Yükleme işlemi bittikten sonra Visual Studio'da değişikliklerin yapılandırılması için programı yeniden başlatalım. Yeni bir proje oluşturup form load olayını aşağıdaki gibi düzenleyelim:

Yazdığımız kodları seçip sağ tıklayıp "Export as Snippet" seçeneğine tıklayalım. Eğer bu seçenek sizde görünmüyorsa yukarıdaki işlemleri yaptığınızdan emin olup tekrar deneyin. 

Bu işlemi yaptıktan sonra karşımıza çıkan pencereden snippet içinde değişken değerler olarak kullanacağımız alanları belirleyelim. Daha sonra bu alanı seçip sağ tıklayalım ve "Make Replacement" diyelim. Bu işlemi değişebilecek tüm alanlarımıza uygulayalım. Kod içerisindeki işlemimiz bittiğinde sıra oluşturacağımız snippet için isim ve kısayol belirleme işleminde artık. İstediğiniz ismi ve klavye kısayolunu belirttikten sonra ekrandaki son görüntü şu şekilde olacaktır:

Oluşturduğumuz snippet dosyasını kaydedelim. Tekrar form load olayına gidelim ve az önce yazdığımız kodu silelim. Belirlediğimiz kısayolu yazalım(shortcut için yazdığımız yazı) ve tab tuşuna basalım. Az önce snippet olarak kaydettiğimiz kod bloğu karşımıza gelecektir. Düzenlenebilir(editable) alanlarda dolaşmak için yine tab tuşunu kullanabilir ve istediğimiz ayarı yaptıktan sonra programımızda rahatça kullanabiliriz.