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

Evet.. Visual Studio ile  Empty(boş) bir MVC 5 web uygulaması oluşturarak başlıyoruz. Nuget’ten Entity Framework, Bootstrap, JQuery, FakeData paketlerini indiriyoruz(yukarıda linkleri mevcut).

Veritabanı nesnesi kodlayarak başlayalım. Categories tablosu için Category Entity’si bu kodlayarak ardından DatabaseContext kodunu yazarak DbInitializer ile fake data verisini üretecek kodları yazıyoruz ki buraya kadar olan kısım sizde farklı olabilir. Hatta olmayabilir. Önemli olan Category Entity’sinin yapısıdır.

00-category-entity

Mantığımız şu şekilde, her kategorinin bir Parent(Sahibi) olan Category nesnesi ve sub items(alt) kategorileri olur. Parent tek ama Sub items’lar çoktur. Yani tablo kendi ile ilişkilidir. Bunun için gerekli Navigation Property’leri (Virtual olanlar) kodladım. Veritabanında bu veri saklanırken en üstteki menü’ler(yani root menü) Parent ‘ı Null olur. Fakat Parent’ı olan bir menü, sahibi kimse onun Id’sini saklar. Mantık bu şekilde kurgulanmıştır. Bunların dışında gideceği Action, Controller adı ve Query String değeri tutmak istersek bu tarz bilgilerde saklanabilir. Hatta OrderNo ile menünün sırası saklanabilir. Yanlarına örnek açıklamalarını yazdım. Yani nasıl veriler tutabileceklerine dair örnekler..

04-database-context

01-db-initializer-for-entity-frameowrk-code-first

Peki Navbar tasarımının kendisi için Bootstrap 4’ün dokümantasyonun dan navbar ‘ı alıp sayfaya yerleştirdim. Tabii ki üzerinde değişiklik yaparak biz sonsuz seviyeli menü’müzü yerleştireceğiz.

03-bootstrap-4-navbar

Sonsuz menü için internetten bulduğum CSS ve HTML şu şekildedir. Öncelikle bu HTML ‘i ve CSS ‘i yazarak yapmaya çalıştığımız menü’yü görebilirsiniz. Sonrası ise aslında çok kolay amacımız o HTML’i veritabanından çekeceğimiz veriler ile bizim oluşturmaya çalışmamız ki bunun için Helper Method‘lardan(bu ve daha fazla mvc konusunda eksiğiniz varsa bu eğitimden faydalanabilirsiniz) faydalanacağız.

05-css-for-endless-menu

06-örnek-navbar-sonsuz-menu

Bu kod ulaşmak istediğimiz, oluşturmamız gereken, sonsuz menü oluşumu için ihtiyacımız olan CSS ve HTML örneğidir. Bunu yukarıda da dediğim gibi oluşturan kodu yazmalıyız. Konuyu anlamak için buraya kadar bir demo yaptık aslında kendimize.. Bu kısımdaki kodlar yerine biz bir CreateMenu isimli Helper Method çağırıyoruz. Bu metot’a

07-createmenu-helper-metot

Burada veri tabanından Root menü’leri yani en üstte yer alan, parent ‘ı (sahibi olmayan) kategorileri(menü’leri) çekiyoruz. Siz burada tüm kategorileri çekerek de metoda gönderebilirsiniz. Ben direkt örneğe uygun şekilde kategorileri filtreledim ve sıralayarak CreateMenu isimli helper method’a gönderdim.

08-create-menu-helper-method

09-create-sub-menu-items-helper-method

CreateMenu isimli helper metot’da CreateSubMenuItems isimli helper metot’u çağırıyor. Burada şöyle bir hissiyat olmasın, “..ee sadece bir alt menü oluşturacak şekilde bu kod..” aslında HAYIR.. CreateSubMenuItems isimli helper metot kendisini çağıran bir recursive method (özyinemeli metot) ‘dur. Böylece menü’nüz oluşacaktır. Projenin kodlarını yukarıda belirttiğim gibi GitHub adresimde bulabilirsiniz.

Herkese iyi kodlamalar..

 

kmb-udemy-reklam

 

Reklamlar

One thought on “Bootstrap 4 ve MVC 5 ile Sonsuz Seviyeli Menü Oluşturma

  1. Hocam merhaba,
    Udemy kurslariniz sayesinde mvc ile tanıştım öncelikle emeginize sağlık.
    Recursive menü yapiniz çok guzel ve sorunsuz işliyor. Fakat title ların başlarına 1 1.1 1.2 1.3 1.1.1 1.1.2 gibi OrderNo larına göre saydırmamı saglayacak bir işlem gerekli oldu gerekli araştırmaları yapmama rağmen bir çözüme ulaşamadım konuyla ilgili yardım edebilirseniz çok sevinirim.

    Beğen

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s