I'm facing a bit of a challenge at the moment. I have a webpage that uses jQuery to load three different views: one displaying all categories associated with the user, another showing the image and name of items within the selected category, and a third providing detailed information about the selected item. My issue is how to retrieve the ID of the selected category in order to display its items, as well as how to do the same for displaying full details of the selected item. I don't think Ajax is the problem here.
Whenever a user clicks on an <li> element inside the test <div>, it triggers a request to fetch items related to that category.
$(document).ready(function() {
$('#test li').click(function() {
//retrieve the ID of the selected category
$.ajax({
url: "",
type: "POST",
data: {//return all item information},
success: function(data) {
//display updated results upon successful return
}
});
});
I assume the process for when an item is clicked should be similar. But I'm unsure how to formulate the query for the controller. Currently, I'm only displaying all items:
//Item Controller
//two queries; one for displaying items when a certain category is selected
//and another to display full details when an item is selected
public ActionResult Partial(Item item)
{
//var query = from i in db.Items
// orderby i.dateAdded
// where i.user_id==4
// select i;
//var results = query;
var model = db.Items;
return PartialView("_Partial1", model);
}
public ActionResult PartialTwo() //pass in the catId??
{
var query = from d in db.Items
//how to retrieve catID which is in the item table?
select d;
var results = query;
return PartialView("_FullInfoPartial", results);
}
//Category controller
//get the categories from
public ActionResult GetCats(Category cat)
{
var query = from c in db.Cats where c.user_id == 4 orderby c.catId select c;
var results = query;
return PartialView("_PartialGetCats", results);
}
Do you think I'm heading in the right direction?