Asp.Net
02
Oca
2012
Mvc Razor TreeView
Kategori : RazorMvcjQuery
Ekleyen : Admin
Selamlar Arkadaşlar, Yeni yılın herkeze sağlık ve mutluluk getirmesi dileklerimle; Makaleme başlıyorum. Bugünkü makalemde Mvc Razor ile TreeView uygulaması yapımına değineceğim. Bu Uygulamamızda Partial Page'de kullanacağım. Partial Page nedir? diye soranlarınız için Asp.Net' deki UserControl dosyası diyebiliriz. Uygulamamız Sql Veritabanından aldığı verileri hiyerarşik bir şekilde (Ağaç Yapısı) Menümüze dolduracak. Menümüzü aşağıdaki adresten indirebilirsiniz.
jQuery TreeView Menü
Uygulamamızdaki Veritabanı yapısı.
jQuery kodlarımız
   1:  <script type="text/javascript">
   2:      $(function () {
   3:          $("#tree").treeview({
   4:              collapsed: true,
   5:              animated: "fast",
   6:              control: "#sidetreecontrol",
   7:              prerendered: true,
   8:              persist: "location"
   9:          });
  10:      });
  11:  </script>
Index.cshtml
   1:  <ul class="treeview" id="tree">
   2:      @{Html.RenderPartial("_TreeViewMenu", Model);}
   3:  </ul>
Yukarıdaki kod bloğunda oluşturduğumuz Partial Page sayfamızı (ul) tagları arasına yüklüyoruz, ve render olacak Modelimizi veriyoruz.
_TreeViewMenu.cshtml ( Partial Page )
   1:  @{
   2:      foreach(var item in Model)
   3:      {
   4:          var kayitlar = Kayitlar.categoryList().Where(s=>s.parentId == item.categoryId);
   5:          
   6:          <li><div class="hitarea expandable-hitarea"></div><a href="#">@item.categoryName</a>
   7:          @if (kayitlar.Count() > 0)
   8:          {
   9:              <ul style="display: none;">
  10:                  @{Html.RenderPartial("_TreeViewMenu", kayitlar);}
  11:              </ul>
  12:          }
  13:          </li>
  14:      }
  15:  }
Foreach ile sayfamıza gelen dynamic modelimizin içinde dönmeye başlıyoruz, eşitlik bozuluncaya kadar bu dönüş devam ediyor ve sayfamızı kendi içinde Render etmeye devam ediyor.
Sayfamızı çalıştırıyoruz ve Menümüzün başarılı bir şekilde oluşturulduğunu görüyoruz.
Başka bir makalede görüşmek dileğiyle Hoşçakalın.

Örnek Proje : Mvc Razor Treeview Menu
İlk yorum yazan siz olun.