Passing item Id in the loop to Jquery

Question

I am building a 'like' button for each comment and posting data using jQuery to PostsController. How can I pass the Id value, @item.Id, for each item in the loop? Whats the proper way to handle it in jQuery code?

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

Are you only wanting to pass one id to the controller? – JamesS Jan 24 '19 at 15:42 — JamesS, Jan 24 '19 at 15:42

Rory McCrossan · Accepted Answer · 2019-01-24T16:37:30.753

4

The issue you have currently is that your jQuery code is only being assigned on one id from the Model.PostComments loop - presumably the last one. You have the same issue in referencing Model.PostComment.Id.

It would make more sense to apply a common class to the a elements you create in the loop, then read the id attribute from that and send it in the request, something like this:

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

Note the use of Url.Action() instead of hard-coding the URL in the example.

edited Jan 24 '19 at 16:37

answered Jan 24 '19 at 15:43

Rory McCrossan

331,213
40
305
339

Thank you for your great answer but the tag is not clickable now. – mohammed alani Jan 24 '19 at 16:09
`a` tags must have an `href` to be clickable. If you don't want it to actually go anywhere just use `href="#"`. – Chris Pratt Jan 24 '19 at 16:10
@ChrisPratt very good point. I updated the answer. I also added a call to `preventDefault()` on the click event to stop the `#` being added to the URL – Rory McCrossan Jan 24 '19 at 16:12
Also, the `Id` property on an entity should not be used directly as the `id` attribute on an element. This property will normally be an int, and HTML ids cannot start with a number. You'd instead need to do something like `id="item@(item.Id)"`. In general, it's preferable to use `data-*` attributes for this kind of stuff, i.e. `data-id="@item.Id"`. – Chris Pratt Jan 24 '19 at 16:13
`HTML ids cannot start with a number` that's no longer the case in HTML5. Pretty much any value without whitespace in it is now valid – Rory McCrossan Jan 24 '19 at 16:18
Its clickable now, but it doesn't post to controller/action – mohammed alani Jan 24 '19 at 16:25
1

Check the console for errors, and also watch the network traffic to see if the request is sent and what the response is. You're not handling any errors, so it could be the server side code is returning a 500. – Rory McCrossan Jan 24 '19 at 16:26
Network is not capturing any data when I click, I have tried all previous suggestions. – mohammed alani Jan 24 '19 at 16:36
Apologies, I just realised the was a mistake in the selector. I've updated the answer – Rory McCrossan Jan 24 '19 at 16:37
I am very grateful to your answer, It solved my problem.TQ – mohammed alani Jan 24 '19 at 16:45
How to disable each button after its been clicked, also how to increment like counter through Jquery ? – mohammed alani Jan 25 '19 at 02:51
You should start a new question about those tasks if you're stuggling – Rory McCrossan Jan 25 '19 at 07:47
I have posted new question here : https://stackoverflow.com/questions/54367861/how-to-disable-button-after-its-been-clicked-using-jquery – mohammed alani Jan 25 '19 at 15:04

Passing item Id in the loop to Jquery

1 Answers1