jquery - 将循环中的项目 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 时遇到同样的问题。

将公共(public)类应用于您在循环中创建的 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。