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

时间:2013-08-15 06:19:11

标签: javascript ajax asp.net-mvc-4

我有点卡在这里。我有一个通过加载jQuery显示三个不同视图的页面:与用户关联的所有类别的视图,所选类别中所有项目的图像和名称以及项目所有属性的完整详细信息视图选择。如果要显示所选类别的ID,则显示项目并与项目相同以显示完整详细信息。阿贾克斯不是问题,所以我想。

当用户点击<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
        }
    });
});

我认为它与点击项目时相同。但是如何为控制器编写查询。现在我只是显示所有:

//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);
    }

我是在正确的轨道上吗?

1 个答案:

答案 0 :(得分:1)

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

因此,当您在视图中呈现类别名称时,添加另一行以创建隐藏字段以存储该类别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
            }
        });
    });
});