Wie zeige ich Benutzerdetails mithilfe von Popup-Bootstrap an, ohne das Click-Event-Bootstrap-Muster zu verwenden?

Question

Ich arbeite an der Razor-Seite asp.net. Das Problem, mit dem ich konfrontiert bin, besteht darin, dass ich Benutzerdetails nicht per Maus oder Popup anzeigen kann, ohne den Startmodus zu verwenden

Was ich mache, ist wie folgt

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userDetailsModal">
View User Details
    </button>

Modaler Bootstrap zur Anzeige von Benutzerdetails

<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">&times;</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>

Ich habe die Benutzerdetails mithilfe temporärer Daten im Modell übergeben, um die Daten anzuzeigen, und die Daten wurden erfolgreich übergeben

Bild von dem, was ich erwartet hatte:

Beitrag aktualisieren

Können Sie ein Popover für den angehängten Beispielcode anwenden

?

Answer 1

从您的代码中，您正在使用 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">&times;</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>