Bootstrap 4 ve MVC 5 ile Sonsuz Seviyeli Menü Oluşturma – muratbaseren
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.
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..
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.
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.
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
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.
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..
Etiketler aspnet mvc, bootstrap 4, codefirst, endless menu, entity framework, fakedata, multi-level menu, mvc 5, sonsuz menü
Önceki Yazı MVC Projenizde EF Code First ile Çoklu Veri Tabanı Kullanımı
Sonraki Yazı Visual Studio ve Visual Studio Code ile Git, GitHub, BitBucket ve TFS Kursu Yayında!!
One thought on “Bootstrap 4 ve MVC 5 ile Sonsuz Seviyeli Menü Oluşturma”
04 Temmuz 2018, 01:42
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.