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

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 >
                    <p >
                        <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 >
  <input type="text"  placeholder="Your comment" name="comment">
  <span ></span>
  <input type="text"  placeholder="Your nick" name="author">
  <button  asp-route-postid="@post.Id" asp-route-comment="comment" asp-route-author="author"> Add comment </button>
</div>
</form>
<form method="get">
    <div >
        <button type="submit" name="Id"  value="@post.Id" >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 >
                   <center> <b>Post</b></center>
                </div>
                <div >
                    <p >
                        <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 >
  <input type="text"  placeholder="Your comment" name="comment">
  <span ></span>
  <input type="text"  placeholder="Your nick" name="author">
  <button  asp-route-postid="@post.Id" asp-route-comment="comment" asp-route-author="author"> Add comment </button>
</div>
</form>
<!-- Modal -->

<form method="get">
    <div >
        <button type="button" name="Id" value="@post.Id"   data-bs-toggle="modal" data-bs-target="#exampleModal">Show comments</button>
        <button type="submit" name="Id"  value="@post.Id" >Load</button>
    </div>
</form> 
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    
  <div >
    <div >
      <div >
        <h5  id="exampleModalLabel">Comments</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
         @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 >
        <button type="button"  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 >
                    <p >
                        <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 >
  <input type="text"  placeholder="Your comment" name="comment">
  <span ></span>
  <input type="text"  placeholder="Your nick" name="author">
  <button  asp-route-postid="@post.Id" asp-route-comment="comment" asp-route-author="author"> Add comment </button>
</div>
</form>
<!-- Modal -->

<form method="get">
    <div >
        <button type="button" name="Id" value="@post.Id"   data-bs-toggle="modal" data-bs-target="#exampleModal">Show comments</button>
        <button type="submit" name="Id"  value="@post.Id" >Load</button>
    </div>
</form> 
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    
  <div >
    <div >
      <div >
        <h5  id="exampleModalLabel">Comments</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
         @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 >
        <button type="button"  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.

CodePudding user response：

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 >
                                //change here......                                      
        <button type="button" data-bs-target="#[email protected]" name="Id" value="@post.Id"   data-bs-toggle="modal">Show comments</button>
        <button type="submit" name="Id"  value="@post.Id" >Load</button>
    </div>
</form> 
                       //change here.........
<div  id="[email protected]" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    
  <div >
    <div >
      <div >
        <h5  id="exampleModalLabel">Comments</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
         @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 >
        <button type="button"  data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>