我在 razor page asp.net 上工作。我面临的问题是,如果不使用引导模式,就无法使用鼠标或弹出窗口显示用户详细信息
我做什么,如下
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userDetailsModal"> View User Details </button>
用于显示用户详细信息的模态引导程序
<div class="modal fade" id="userDetailsModal" tabindex="-1" role="dialog" aria-labelledby="userDetailsModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="userDetailsModalLabel">User Details</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p><strong>User Name:</strong> @TempData["UserName"]</p> <p><strong>User Role:</strong> @TempData["UserRole"]</p> <p><strong>Environment:</strong> @TempData["Environment"]</p> <p><strong>User ID:</strong> @TempData["UserId"]</p> <p><strong>StatusCode:</strong> @TempData["StatusCode"]</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
我使用模型中的临时数据传递用户详细信息以查看数据,并且数据成功传递
我期望做什么的图像:
更新帖子
您可以为附加的示例代码应用弹出框吗
P粉3524080382023-09-07 09:24:47
从您的代码中,您正在使用 Boostrap 4
模式来显示数据,但现在 Asp.Net Core 使用 Boostrap 5
。 Boostrap 4
和 Boostrap 5
之间的代码有一些不同,您可以将代码更新为:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userDetailsModal"> View User Details </button> <div class="modal fade" id="userDetailsModal" tabindex="-1" role="dialog" aria-labelledby="userDetailsModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="userDetailsModalLabel">User Details</h5> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p><strong>User Name:</strong> @TempData["UserName"]</p> <p><strong>User Role:</strong> @TempData["UserRole"]</p> <p><strong>Environment:</strong> @TempData["Environment"]</p> <p><strong>User ID:</strong> @TempData["UserId"]</p> <p><strong>StatusCode:</strong> @TempData["StatusCode"]</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>