How to implement treeview structure using jQuery in asp.net mvc3 RSS

• • Reply
  

  sampath1750

  Member

  5 Points

  55 Posts

  How to implement treeview structure using jQuery in asp.net mvc3

  Apr 03, 2012 11:31 AM|LINK

  I need to create a treeview structure using jQuery in asp.net mvc3 applicatiopn.
   
  Let me describe my scenario: I have two tables - States and Cities.
  Cities has State_ID as foreign key. When I pass the StateId I need to show all the Citie under that States in a tree structure.
   
  Can any help me on this? Thanks for all help in prior.
   
  Thanks,

• • Reply
  

  ignatandrei

  All-Star

  134857 Points

  21611 Posts

  Moderator

  MVP

  Re: How to implement treeview structure using jQuery in asp.net mvc3

  Apr 03, 2012 11:39 AM|LINK

  http://weblogs.asp.net/raduenuca/archive/2011/04/24/asp-net-mvc-displaying-a-tree-view-using-a-recursive-declarative-helper-and-jquery.aspx

  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools
• • Reply
  

  Young Yang -...

  All-Star

  21345 Points

  1818 Posts

  Microsoft

  Re: How to implement treeview structure using jQuery in asp.net mvc3

  Apr 09, 2012 08:20 AM|LINK

  Hi

  You can use the jQuery plugin: TreeView to achieve it.

  http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

  Add this script in your View:

  <script type="text/javascript">
      $(document).ready(function () {
          $('#jQuerytreeview').treeview({ collapsed: true });
  
          $(".city").click(function () {
              $.ajax({
                  url: '@Url.Action( MVC.Various.TreeView.GetCity( ) )',
                  data: { cityId: $(this).attr("id") },
                  type: 'GET',
                  success: function (data) {
                      alert("Selected city: " + data.Name + ");
                  }
              });
          });
      });
  </script>

  Hope this helpful
  Regards
  Young Yang

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
  
  • Edited by Young Yang - MSFT on Apr 09, 2012 08:21 AM
  • Marked as answer by Young Yang - MSFT on Apr 22, 2012 06:07 AM
• • Reply
  

  CodeHobo

  All-Star

  18647 Points

  2647 Posts

  Re: How to implement treeview structure using jQuery in asp.net mvc3

  Apr 09, 2012 03:16 PM|LINK

  Another option is to checkout the Telerik Extensions for asp.net mvc. It's open source (free if your company is ok with open source) and they have tree view. Also, the extensions are built on top of JQuery
  http://demos.telerik.com/aspnet-mvc/treeview 

  Hattan Shobokshi
  Blog | Twitter : @Hattan