Dynamic loading a list from a model MVC 4

[kavehch]

so I'm still pretty new in ASP.net MVC design. I am facing a small problem, which might have already been answered, but don't seem to find an answer that will fit my purpose. Here is what's happening:Say I have a model with 2 links: Category & Item, and it's a 1 to many relation. What I want to do is generate a list containing Category.Title (which I have completed, using the code following) and clicking on the each list item will generate a list of all Item.Title values of that category. The base idea of the html is:\[code\]<div id="cat"><!--float = left--> <ul> <li>List<li> </ul></div><div id="item"> <!--float = right --> <ul> <li>List<li> </ul></div>\[/code\]Here is how everything is linked up so far:\[code\]public ActionResult Equipment(){ ViewBag.Cat= getCat(1); // Will return a list of categories of ID 1 return View();}\[/code\]As for the view:\[code\]@{ List<X.Models.Category> catX = ViewBag.Cat; }BODY:<div id="pl_categories"> <ul id="pl_ec_ul"> @foreach (X.Models.Category item in catX) { <li id="pl_ec_li"> <div id="pl_ec_liItem"> @item.catTitle </div> </li> } </ul></div><div id="pl_values"> <ul id="pl_ev_ul"> <li id="pl_ev_li"> <div id="pl_ev_liItem"> ??? </div> </li> </ul>\[/code\]I have seen a bunch of examples, but they all involve dropdowns or what not. Here are a quick checklist of what I am trying to accomplish:[*]On page laod, default selected category will be the first in the list. If list is null, a simple "No Categories" is shown. Edit: if the category is empty, it will show No Items in Category. [*]On clicking an item in the category it will show the items of that category under pl_values.I have tried to make this is small as possible but there are a lot more factors I need to consider. However, if I can solve this, I am certain to figure out the rest. If something however is not clear, please let me know and I can try and clarify it. Any help will be appreciated. Thank you.