Javascript 带有jQuery链接的ASP.NET MVC列表

虽然我刚刚开始使用ASP.NETMVC和jQuery，但我甚至不能解决一个非常简单的任务

我使用强类型视图显示产品列表，其中每个li元素都有一个唯一的id：

<ul id="product-list">    
  <% foreach (var item in Model.Products)
    { %>   

        <li <%= "id=\"product_" + item.Id + "\"" %> >  
            <div class="item">
               <%= item.Name %>  
            </div>
        </li>     

  <% } %>
</ul>

现在我想附加到每个li元素的click事件，这样，如果用户单击div元素，详细的产品信息应该异步加载到详细信息窗格中

我知道如何使用jQuery调用动作方法ajax风格，以及如何显示包含产品详细信息的json结果，但我不知道如何将onclick事件附加到每个div，以便使用productId加载详细信息

有人能给我一些提示，我如何解决这个问题吗？

一种方法是使用选择ID属性以“product”开头的所有列表项，并从单击的LI的ID属性中提取产品ID，例如：

$("li[id^=product]").click(function() {
    // split the ID at the '_' to get the product ID (demo)
    alert(this.id.split('_')[1]);

    // loadDetails would contain your ajax method or whatever,
    // it takes the product ID as its argument
    loadDetails(this.id.split('_')[1]);
});

示例

loadDetails（）

使用以下方法实现：

---

假设页面上的所有列表元素都表示产品：

$(function() {
    $('li').click( function() {
         var id = $(this).attr('id').replace(/product_/,'');
         $.ajax({
             url: '<%= Url.Action("details","product") %>/' + id,
             dataType: 'json',
             type: 'get',
             success: function(data) {
                  ...show the details...
             }
         });
    });
});

$（函数（）{
$（'li'）。单击（函数（）{
var id=$（this.attr（'id'）.replace（/product/，''）；
$.ajax({
url:“/”+id，
数据类型：“json”，
键入：“get”，
成功：功能（数据）{
…显示详细信息。。。
}
});
});
});

您可以使用以下jquery将

单击事件绑定到Li中的所有div。然后进行ajax调用

$('#product-list li>div').bind('click',function(){

    // get the current li Id
    var currentLiId = $(this).parent().attr('id');

    alert(currentLiId);

    // make your ajax call here.
});

可以将单击事件处理程序附加到每个div：

$("#product-list>li div.item").click(function() {...});

在该函数中，“this”将是div。父li具有您感兴趣的“id”属性：

$(this).parent().attr("id")

从这里，您应该能够获得产品id。jQuery支持AJAX加载方法，您可以在目标div上使用该方法：

$("#results").load("/Product/Details/" + myProductId);

非常感谢你！这个答案和所有其他答案一样，对我帮助很大！非常感谢你！这个答案和所有其他答案一样，对我帮助很大！非常感谢你！这个答案和所有其他答案一样，对我帮助很大！
$("#results").load("/Product/Details/" + myProductId);