Bootstrap 4 ve MVC 5 ile Sonsuz Seviyeli Menü Oluşturma

EndlessMenuSampleMvc

Günümüzde bile hala en temel web sayfası ihtiyaçlarımızdan birisi sonsuz seviyeli menü’ler. Yazılım geliştirme yapan, hangi seviye de olursa olsun sürekli önümüze gelen bu konu için bende basitçe bir çözüm üretme ve ihtiyacı olanların faydalanmasını istedim.

Hızlıca internet’ten bulduğum bir HTML ve CSS uygulanmış Bootstrap 4 sonsuz seviyeli menü örneğini aldım ve hızlıca bir sayfaya yerleştirerek arkasına Entity Framework Code First ile bir Categories(kategoriler) tablosunda verileri tutacak şekilde kodlama yaptım. Sizler kendi tablo yapınıza uyarlayabilirsiniz. Tabii ki her zaman ki gibi Fake Data yazmayı unutmadım. Proje örneğini GitHub adresimde bulabilirsiniz.

kmb-udemy-reklam “Bootstrap 4 ve MVC 5 ile Sonsuz Seviyeli Menü Oluşturma” yazısını okumaya devam et

Reklamlar

MVC Projenizde EF Code First ile Çoklu Veri Tabanı Kullanımı

Entity Framework Code First kullanarak geliştirdiğiniz bir MVC projenizde kullanılacak veri tabanı (database) ‘nın kullanıcı tarafından seçilmesi gerekiyorsa..

  • Giriş yapan her kullanıcının önce veri tabanını seçmesi, sonra yönlendirilerek işlem yapması sağlanabilir.
  • Hatta dilerseniz programın herhangi bir anında veri tabanı değişimi yapması sağlanabilir.
  • Giriş yaparken veri tabanı seçmeyerek varsayılan bir veritabanı ile de çalışması sağlanabilir.

Öncelikle şunu belirtmek istiyorum ki, kullanılacak veri tabanlarının hepsinin yapısını aynı olması gerekmektedir. Çünkü veri tabanı sayısı birden fazla ama geliştirdiğimiz EF Code First class’larımız tek olacaktır. Hepsine uygun olarak çalışmalıdır. Eğer benim veri tabanlarımın yapıları farklı diyorsanız, zaten o zaman her veritabanı yapısı için gerekli model class’larınızı ve Context ‘inizi oluşturmalısınız. Kullanacağınız veri tabanına uygun context’den instance oluşturukup kullanılmalıdır.

Veri tabanlarınızın aynı olduğunu varsayarak konuya uygun örnek kodları aşağıda bulabilirsiniz.

Öncelikle iki adet veri tabanını SQL de oluşturuyorum. İkisi de aynı yapıda fakat içindeki veriler göreceğiniz üzere farklıdır.

01-sql-database-a

02-sql-database-b

kmb-udemy-reklam

“MVC Projenizde EF Code First ile Çoklu Veri Tabanı Kullanımı” yazısını okumaya devam et

ASPNET MVC DropDownList Doldurma Yöntemleri

Sıklıkla bana sorulan sorulardan anladığım kadarıyla ASPNET MVC de DropDownList doldurma ile ilgili çok fazla problem yaşanıyor. Aslında problem yaşanacak bir durum ortada bulunmuyor. Sadece biraz pratik eksikliği ve bilgi eksikliği buna sebep oluyor diyebiliriz. Bu yazı da bu yaşanan problemleri gidermeye çalışıyor olacağım.

DropDownList’i 3 yöntemle doldurma ve kullanmayı örnekliyor olacağım. Peki bunlar nedir?

  • ViewBag ile DropDownList doldurma ve verileri alma
  • Model ile DropDownList doldurma ve verileri alma
  • Model ve JQuery ile Bağlantılı DropDownList doldurma ve verileri alma

Genel olarak örnek proje hakkında kısa bilgi vermek istiyorum.

Amacımız

Amacımız Ülkeleri(Country) ve şehirleri(City) ayrı DropDownList’lerde göstermek. Bunun için Country ve City isimli iki sınıf oluşturdum. Bu sınıflar içinde static birer metot tanımladım. Bu metot da örnek City ve Country listesi oluşturuyorum. Böylece denemelerimiz de kullanacağımız veriyi bizim için oluşturacaktır.

DBContext isimli bir class ekledim. Bu class sanki bizim veritabanı nesnemiz gibi davranacak ve içerisinde bulunan iki değişkene örnek verileri Country ve City class’larındaki metotları(yukarıda bahsettiğim) kullanarak bize istediğimiz de veriyi sunacaktır. Bu property’ler CitiesTable ve CountryTable dır.

Sayfamız da iki adet DropDownList olacak ve bunları sayfanın GET action’ında yukarıda bahsettiğim yöntemlerle dolduruyor olacağız. POST action’ında ise seçilen değerleri alıyor ve tekrar aynı sayfanın altında bulunan bir boostrap alert kutusunda gösteriyor olacağız. Index sayfamızın model’i IndexViewModel isimli bir class’dır. Bu class ‘da sayfanın GET action’ında seçili değerlerin gelmesi veya sayfanın POSt işleminde seçilen değerleri alabilmemiz için iki property bulunmaktadır. Seçili Country yi almak için SelectedCountryId ve seçili City yi almak için SelectedCityId property leri bulunmaktadır. Tabi seçilen city ve country verisinin Id değerini alıyor olacağız.

ViewBag ile DropDownList Doldurma ve Verileri Alma

drop-down-list-viewbag-sample

Aşağıdaki kodlarda gerekli açıklamaları yazdım. Kısaca Index ‘in GET action ‘ında ViewBag’lere gerekli SelectList’leri ekliyoruz. Index sayfasında ise DropDownListFor ile sayfanın model’ine DropDownListFor kullanarak DropDownList’leri bağlıyor ve ViewBag’den verilerini yüklüyoruz. Düğmeye basıp POST işleminde değerleri alarak yine aynı sayfayı yüklüyor ve seçili değeleri alert kutusunda gösteriyoruz.

kmb-udemy-reklam

“ASPNET MVC DropDownList Doldurma Yöntemleri” yazısını okumaya devam et

ASPNET MVC ile Bootstrap ve HintCSS Kullanarak Button & Link Helper Metotlar

ASPNET MVC projelerinizde sürekli olarak kullandığımız hyperlink ve button elementleri için kullanabileceğiniz helper metotları sizlerle paylaşmak istiyorum. Bootstrap ve HintCSSHintCSS kullanan overload versiyonları ile az kodla sayfalarınız da güzel link’ler ve button’lar oluşturabilirsiniz. Kodları paylaşmadan önce açıklamakta fayda var.

Proje içerisinde 4 adet dosyadan helper metotlar gelmektedir.

helper-methods-cshtml

  • HtmlButton.cshtml : Button elementi eklemede kullanılan helper metotları içerir.
  • HtmlLink.cshtml : HyperLink elementi eklemede kullanılan helper metotları içerir.
  • HtmlHint.cshtml : HintCSS kullanan element eklemede kullanılan helper metotları içerir.
  • MyHtml.cshtml : Yukarıdaki dosyalarda yer alan button, link, hint helper metotları projenizde kullanarak düğmeler oluşturacaksınız. Dolayısı ile bu kodlarda zamanla sayfalarınız da tekrar etmeye başlayacaktır. İşte o kodları da tek bir helper metot haline getirecek şekilde kendi projem için oluşturduğum helper metotları içerir. Yani kısaca helper metodun, helper metodu diyebiliriz. Hepsi kod tekrarını azaltmak içindir.

 

button-link-helper-methods-in-mvc

Yukarıdaki görsel de gördüğünüz gibi küçük link/button, büyük link/button oluşturmada kullanabileceğiniz helper metotlar, zaten bunları 2-3 html satırı ile oluşturabiliyoruz. Burada ki amaç, proje genelinde bu kodların merkezi helper metotlarda toplanmasının sağlanması ve buradan yönetilmesi ile bir değişiklikte hepsinin etkilenmesinin sağlanması, kod tekrarlarının azaltılmasıdır. Aynı zaman da başta da dediğim gibi kodların tek bir metot seviyesine kadar azaltılmasıdır.

kmb-udemy-reklam

“ASPNET MVC ile Bootstrap ve HintCSS Kullanarak Button & Link Helper Metotlar” yazısını okumaya devam et

ASPNET MVC Projeleriniz için Material Checkbox

Projelerimiz de her ne kadar Bootstrap kullanıyor ve kendimi tatmin edecek seviye de hoş tasarımlar yaparak istediğim görsellere ulaşsam da checkbox’ların çok sıradan bir görsellikte olması gözüme bir düzensizlik olduğunu hissettiriyor ve bununla ilgili başka yazılarımda da, farklı çözümler sunmaya çalıştım.

Projelerinizde daha şık material tasarımlı checkbox kullanmak isterseniz aşağıdaki kodlardan faydalanabilirsiniz. Aşağıdaki görselde göreceğiniz şekilde bir görsellik oluşacaktır. Ayrıca biraz daha kod yazarak, klavye desteği ve farklı kontrol’e bağımlı kılarak diğer kontrolün aktifleştirilmesi/pasifleştirilmesi(disabled) sağlanabiliyor.

material-checkbox-in-mvc

kmb-udemy-reklam

“ASPNET MVC Projeleriniz için Material Checkbox” yazısını okumaya devam et

Animated radios & checkboxes (noJS) using HTML CSS Bootstrap

ASP.NET MVC projenizde kullanmak üzere animasyonlu ve görsel bir checkbox ve radio CSS ararken, çok hoş bir kod parçası ile karşılaştım. Yazan arkadaş güzel bir şekilde bootstrap checkbox  ve radio larını adam etmiş. Üstelik JS kodu kullanmadan sadece CSS ile.. 😉 Bir incelemenizi tavsiye ederim.

Tabii ki ASP.NET HTML Helper metotlarının ürettiği checkbox ve radio da hidden bir field varlığı(oluşan html çıktılara bakabilirsiniz) bu tarz css kodlarının(hatta js kodlarının da) direkt kullanımını zorlaştırıyor. Kısacası çalışmıyor 🙂 Bende üzerinde ufak bir kaç değişiklik ile bunu ASPNET MVC HTML Helper çıktılarına uygun hale getirdim. Aşağıdaki görselde sarı şeritli kısımları CSS içindeki kodlara eklerseniz ve HTML çıktısını da onun istediği şekilde olmasını sağlarsanız, çok zevkli çalıştığını görebilirsiniz. Görsel’den sonra örnek olarak tüm kodları bulabilirsiniz.

https://bootsnipp.com/snippets/featured/animated-radios-amp-checkboxes-nojs
Aspnet mvc animated bootstrap checkbox ve radio, noJS

 

kmb-udemy-reklam

 

ASP.NET MVC ile Bootstrap Checkbox ve Radio Kullanımı

Evet.. Uzun bir aradan sonra tekrar makale yazmaya başlamalıyım diye düşünüyordum. Sonunda yavaştan yavaştan başlamak gerektiği için hadi bakalım dedim ve kolları sıvadım. Aslında bunun sebeplerinden biri artık çoğu kişinin video içeriklere yönelmesi ve video ile bazı şeyleri göstererek daha hızlı ve 1 dakikalık bir zaman dilimine daha çok şey sığdırabildiğimizden dolayıdır sanırım. Fakat açıkçası ben hala makalelerden ve kitaplardan yanayım. Video içerikler daha kolay uçuyor akıllardan ve özümsemesi zor. Anlatılan bir noktayı bulması da daha zor. Henüz video içi arama pek gelişmedi. Sanırım bu gelince bende ona daha fazla yönelebilirim. Tabii ki izlemek, anlatılanı yapılırken görmek ayrı, olmazsa olmaz. Ama nedense benim gözlerim metin arıyor, ne diyebilirim.

Peki konumuza dönelim. Bu yazımızda sizlere asp.net mvc içinde radio ve checkbox kullanımı ile ilgili bir yöntem göstereceğim. Bende herkes gibi projelerimde veya örneklerimde bootstrap kullanıyorum. Dolayısı ile en çok sıkıntı duyduğum nokta checkbox ve radio kontrollerinin tasarımının bootstrap’te eksik olması! Aslında eksik değil ama bizim alıştığımızdan farklı olması. Bizim bildiğimiz bu şekilde..

 

image
Bootstrap kullanılsa bile ortaya çıkan radio ve checkbox görünümü.

 

Fakat bootstrap ‘in yaklaşımı ile olması gereken budur.

 

image
Bootstrap in checkbox ve radio yaklaşımı bu şekilde

 

Kullanımı kolay ve özellikle mobil cihazlar için bu tasarım aslında harika oluyor.. Fakat bunu elde etmek için gereken HTML kodu şu şekilde(Bu arada ikonlar tamamen benim uydurmamdır ki onu da nasıl yaptığımı göstereceğim). Örneğin HTML, CSS ve JS kodlarına buradan ulaşabilirsiniz.

 

kmb-udemy-reklam

“ASP.NET MVC ile Bootstrap Checkbox ve Radio Kullanımı” yazısını okumaya devam et