Wie zeige ich Benutzerdetails mithilfe von Popup-Bootstrap an, ohne das Click-Event-Bootstrap-Muster zu verwenden?
P粉797004644
P粉797004644 2023-09-06 16:06:08
0
1
571

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

?
P粉797004644
P粉797004644

Antworte allen(1)
P粉352408038

从您的代码中,您正在使用 Boostrap 4 模式来显示数据,但现在 Asp.Net Core 使用 Boostrap 5Boostrap 4Boostrap 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>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage