javascript - 从列表项中获取 ID 以使用 ajax 更新 div

Question

我有点被困在这里了。我有一个页面，通过使用 jQuery 加载来显示三个不同的 View :与用户关联的所有类别的 View 、所选类别中所有项目的图像和名称以及项目所有属性的完整详细信息 View 已选择。如何获取所选类别的 id 来显示项目，并与项目相同以显示完整的详细信息。我认为 Ajax 不是问题。

当用户单击<li>时test <div>内这将触发检索该类别的项目

$(document).ready(function() {
$('#test li').click(function() {
    //get id of cat selected
    $.ajax({
        url: "",
        type: "POST",
        data: {//return all the item info},
        success: function(data) {
            //when returns display updated results
        }
    });
});

我认为这与单击某个项目时的效果相同。但是如何编写 Controller 的查询。现在我只是显示所有:

//Item Controller
//two queries; one for displaying items when certain cat 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 get 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);
    }

我走在正确的道路上吗？

Answer 1

一个技巧可以是对于每个 <li>元素，创建一个 <input type="hidden" value="catID" ...>用于保存类别 ID 的元素。

因此，当您在 View 中呈现类别名称时，添加另一行来创建一个隐藏字段来存储该类别 ID，如下所示:

<li id="liCat1">

</li>
<input type="hidden" name="liCat1" value="catID1" />

请注意，我将隐藏字段的名称设置为与相关 li 元素的 id 相同。

然后，像下面这样更改你的 jquery:

$(document).ready(function() {
    $('#test li').click(function() {
        var selector = "input[name='" + $(this).id + "value']";
        var catID = $(selector).val(); 
        // Now, you have the categoryID in the catID variable. Enjoy using it...!
        $.ajax({
            url: "...",
            type: "POST",
            data: {//return all the item info},
            success: function(data) {
                //when returns display updated results
            }
        });
    });
});