OnGetAsync catches v1 of my button but do not catch v2 with pop-up

Question

I have little problem. I am going to implement Bootstrap modal with loading some data from database on click, but i am stuck at this: -> this works just fine and catches click:

 <div class="card-body">
                    <p class="card-text">
                        <b>Id:</b> @post.Id <br />
                        <b>Title:</b> @post.Title<br />
                        <b>Description:</b> @post.Description<br />
                        <b>Nick:</b> @post.Author<br />
                        <b>Category:</b> @post.Category<br />
                        <b>Creation Time:</b> @post.CreationTime</p>
<hr />
<form method="post">
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Your comment" name="comment">
  <span class="input-group-text"></span>
  <input type="text" class="form-control" placeholder="Your nick" name="author">
  <button class="btn btn-success" asp-route-postid="@post.Id" asp-route-comment="comment" asp-route-author="author"> Add comment </button>
</div>
</form>
<form method="get">
    <div class="py-2">
        <button type="submit" name="Id"  value="@post.Id" class="btn btn-primary">Load</button>
    </div>
</form>         
                @foreach(var comment in Model.Comments.Where(x=>x.PostId == @post.Id))
                {
                    <b>Comment: </b>@comment.CommentDescription <b>Author: </b>@comment.CommentAuthor <b>Creation Time: </b>@comment.CreationTime<br />
                }
            </div>

but after implementing Modal it wont work anymore. My front-end looks like this:

                <div class="card-header">
                   <center> <b>Post</b></center>
                </div>
                <div class="card-body">
                    <p class="card-text">
                        <b>Id:</b> @post.Id <br />
                        <b>Title:</b> @post.Title<br />
                        <b>Description:</b> @post.Description<br />
                        <b>Nick:</b> @post.Author<br />
                        <b>Category:</b> @post.Category<br />
                        <b>Creation Time:</b> @post.CreationTime</p>
<hr />
<form method="post">
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Your comment" name="comment">
  <span class="input-group-text"></span>
  <input type="text" class="form-control" placeholder="Your nick" name="author">
  <button class="btn btn-success" asp-route-postid="@post.Id" asp-route-comment="comment" asp-route-author="author"> Add comment </button>
</div>
</form>
<!-- Modal -->

<form method="get">
    <div class="py-2">
        <button type="button" name="Id" value="@post.Id" class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#exampleModal">Show comments</button>
        <button type="submit" name="Id"  value="@post.Id" class="btn btn-primary">Load</button>
    </div>
</form> 
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Comments</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         @foreach(var comment in Model.Comments.Where(x=>x.PostId == @post.Id))
                {
                    <b>Comment: </b>@comment.CommentDescription <b>Author: </b>@comment.CommentAuthor <b>Creation Time: </b>@comment.CreationTime<br />
                }
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>

This is my OnGetAsync:

 public async Task OnGetAsync(string category, int id)
    {
     //do something
    }

Have you ever had similar problem or know workflow to fix it?

//update

After some work i found this:

<div class="card-body">
                    <p class="card-text">
                        <b>Id:</b> @post.Id <br />
                        <b>Title:</b> @post.Title<br />
                        <b>Description:</b> @post.Description<br />
                        <b>Nick:</b> @post.Author<br />
                        <b>Category:</b> @post.Category<br />
                        <b>Creation Time:</b> @post.CreationTime</p>
<hr />
<form method="post">
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Your comment" name="comment">
  <span class="input-group-text"></span>
  <input type="text" class="form-control" placeholder="Your nick" name="author">
  <button class="btn btn-success" asp-route-postid="@post.Id" asp-route-comment="comment" asp-route-author="author"> Add comment </button>
</div>
</form>
<!-- Modal -->

<form method="get">
    <div class="py-2">
        <button type="button" name="Id" value="@post.Id" class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#exampleModal">Show comments</button>
        <button type="submit" name="Id"  value="@post.Id" class="btn btn-primary">Load</button>
    </div>
</form> 
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Comments</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         @foreach(var comment in Model.Comments.Where(x=>x.PostId == @post.Id))
                {
                    <b>Comment: </b>@comment.CommentDescription <b>Author: </b>@comment.CommentAuthor <b>Creation Time: </b>@comment.CreationTime<br />
                }
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>

When clicking Load my comments are loaded and "Show comments" button actually shows them, but for every button it show the same comment.

In best way this should work like this: After clicking "Show comments" its loading comments for single post.

Answer 1

In best way this should work like this: After clicking "Show comments" its loading comments for single post.

That is because data-bs-target value are all the same so that it will trigger the same modal. You need specify it by adding suffix. Change your code to data-bs-target="#[email protected]" and id="[email protected]".

Whole code below:

//more code.....
<!-- Modal -->

<form method="get">
    <div class="py-2">
                                //change here......                                      
        <button type="button" data-bs-target="#[email protected]" name="Id" value="@post.Id" class="btn btn-primary"  data-bs-toggle="modal">Show comments</button>
        <button type="submit" name="Id"  value="@post.Id" class="btn btn-primary">Load</button>
    </div>
</form> 
                       //change here.........
<div class="modal fade" id="[email protected]" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Comments</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         @foreach(var comment in Model.Comments.Where(x=>x.PostId == @post.Id))
                {
                    <b>Comment: </b>@comment.CommentDescription <b>Author: </b>@comment.CommentAuthor <b>Creation Time: </b>@comment.CreationTime<br />
                }
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>