Comment afficher les détails de l'utilisateur à l'aide du bootstrap contextuel sans utiliser le modèle de bootstrap d'événement de clic ?

Question

Je travaille sur la page rasoir asp.net. Le problème auquel je suis confronté est que je ne peux pas afficher les détails de l'utilisateur à l'aide de la souris ou d'une fenêtre contextuelle sans utiliser le mode de démarrage

Ce que je fais est le suivant

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

Modal Bootstrap pour afficher les détails de l'utilisateur

<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>

J'ai transmis les détails de l'utilisateur en utilisant des données temporaires dans le modèle pour voir les données et les données ont été transmises avec succès

Image de ce que je m'attendais à faire :

Mise à jour du message

Pouvez-vous appliquer un popover pour l'exemple de code ci-joint

Answer 1

À partir de votre code, vous utilisez Boostrap 4 模式来显示数据，但现在 Asp.Net Core 使用 Boostrap 5。 Boostrap 4 和 Boostrap 5 Il y a une certaine différence entre le code, vous pouvez mettre à jour votre code pour :

<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>