我有小問題。我將通過單擊時從資料庫中加載一些資料來實作引導模式，但我被困在這個：-> 這作業得很好并且可以捕獲單擊：
<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>
但是在實施 Modal 之后它就不再起作用了。我的前端是這樣的：
<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>
這是我的 OnGetAsync：
public async Task OnGetAsync(string category, int id)
{
//do something
}
你有沒有遇到過類似的問題或知道解決它的作業流程？
//更新
經過一些作業，我發現了這個：
<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>
單擊加載時，我的評論已加載，“顯示評論”按鈕實際上顯示了它們，但對于每個按鈕，它都顯示相同的評論。
最好的方式應該是這樣的：單擊“顯示評論”后，它會為單個帖子加載評論。
uj5u.com熱心網友回復：
最好的方式應該是這樣的：單擊“顯示評論”后，它會為單個帖子加載評論。
那是因為data-bs-target值都是相同的，所以它會觸發相同的模態。您需要通過添加后綴來指定它。將您的代碼更改為data-bs-target="#[email protected]"和 id="[email protected]"。
完整代碼如下：
//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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/488709.html