将循环中的项目 ID 传递给 Jquery

Question

我正在为每个评论构建一个“喜欢”按钮，并使用 jQuery 将数据发布到PostsController。如何为循环中的每个项目传递 ID 值@item.Id？在 jQuery 代码中处理它的正确方法是什么？

@foreach (var item in Model.PostComments)
{ 
  <a id="@item.Id" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></a>
 }

$(document).ready(function() {
  $("#@item.Id").click(function() {
    var FollowOptions = {};
    FollowOptions.url = "/Posts/CommentUp/";
    FollowOptions.data = { id: "@Model.PostComment.Id" };
    $.ajax(FollowOptions);
  });
});

public IActionResult CommentUp(Guid id)
{
  PostComment PostComment = _context.PostComment.Where(m => m.Id == id).SingleOrDefault();
  if (PostComment == null)
  {
    return NotFound();
  }

  string currentuserid = _userManager.GetUserId(User);
  if (_context.CommentMetric.Where(f => f.PostCommentId == id && f.ApplicationUserId == currentuserid).Count() == 0)
  {
    _context.CommentMetric.Add(new CommentMetric
    {
      Id = Guid.NewGuid(),
      ApplicationUserId = currentuserid,
      PostCommentId = id,
      VoteValue = 1
    });

    return RedirectToAction("Details/" + id);
  }

Answer 1

您目前遇到的问题是您的 jQuery 代码仅被分配给来自 Model.PostComments 循环的一个 id - 大概是最后一个。您在引用 Model.PostComment.Id 时遇到了同样的问题。

将一个通用类应用于您在循环中创建的a 元素，然后从中读取id 属性并将其发送到请求中会更有意义，如下所示：

@foreach (var item in Model.PostComments)
{ 
  <a id="@item.Id" class="btn btn-success btn-like" href="#"><span class="glyphicon glyphicon-thumbs-up"></span></a>
}

$(document).ready(function() {
  $('a.btn-like').click(function(e) {
    e.preventDefault();
    $.ajax({
      url: '@Url.Action("CommentUp", "Posts")',
      data: { id: this.id }
    });
  });
});

注意在示例中使用Url.Action() 而不是硬编码 URL。