ASP.NET Razor页面：无需Bootstrap Modal，用Popover展示用户详情

后端PageModel改造（优化数据传递） #

移除TempData依赖，直接将用户列表绑定到页面模型，同时保留可选的AJAX接口用于按需获取数据：

public class UserListModel : PageModel
{
    public List<User> Users { get; set; }

    public void OnGet()
    {
        // 模拟用户数据，实际可从数据库/业务接口获取
        Users = new List<User>
        {
            new User { Id = 1, Name = "张三", Email = "zhangsan@example.com", Phone = "13800138000" },
            new User { Id = 2, Name = "李四", Email = "lisi@example.com", Phone = "13900139000" }
        };
    }

    // 可选：AJAX获取单用户详情的接口
    public IActionResult OnGetUserDetails(int id)
    {
        var user = Users.FirstOrDefault(u => u.Id == id);
        return new JsonResult(user);
    }
}

public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
}

前端Razor页面改造 #

删除Modal相关代码，改用Bootstrap Popover实现鼠标触发的详情展示：

@page
@model UserListModel

<h3>用户列表</h3>
<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var user in Model.Users)
        {
            <tr>
                <td>@user.Id</td>
                <td>@user.Name</td>
                <td>
                    <!-- 触发Popover的按钮，绑定用户ID -->
                    <button type="button" class="btn btn-sm btn-info user-details-btn" 
                            data-user-id="@user.Id"
                            data-bs-toggle="popover"
                            data-bs-placement="right">
                        查看详情
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化所有用户详情Popover
        const triggerElements = document.querySelectorAll('.user-details-btn');
        triggerElements.forEach(el => {
            new bootstrap.Popover(el, {
                html: true, // 允许渲染HTML格式的详情内容
                placement: 'right', // 弹出位置可调整：top/bottom/left/right
                content: function() {
                    const userId = el.getAttribute('data-user-id');
                    // 方式1：从全局变量直接取数据（无需AJAX，适合小数据量场景）
                    const targetUser = window.userList.find(u => u.Id == userId);
                    return `
                        <div class="p-2">
                            <h6 class="mb-2">用户详情</h6>
                            <p><strong>ID:</strong> ${targetUser.Id}</p>
                            <p><strong>姓名:</strong> ${targetUser.Name}</p>
                            <p><strong>邮箱:</strong> ${targetUser.Email}</p>
                            <p><strong>电话:</strong> ${targetUser.Phone}</p>
                        </div>
                    `;

                    // 方式2：AJAX异步获取数据（适合数据需实时更新场景）
                    // let content = '<p>加载中...</p>';
                    // fetch(`?handler=UserDetails&id=${userId}`)
                    //     .then(res => res.json())
                    //     .then(data => {
                    //         content = `
                    //             <div class="p-2">
                    //                 <h6 class="mb-2">用户详情</h6>
                    //                 <p><strong>ID:</strong> ${data.Id}</p>
                    //                 <p><strong>姓名:</strong> ${data.Name}</p>
                    //                 <p><strong>邮箱:</strong> ${data.Email}</p>
                    //                 <p><strong>电话:</strong> ${data.Phone}</p>
                    //             </div>
                    //         `;
                    //         // 更新Popover内容
                    //         const popover = bootstrap.Popover.getInstance(el);
                    //         popover.setContent({ '.popover-body': content });
                    //     });
                    // return content;
                }
            });
        });
    });

    // 将后端用户列表转为前端全局变量，方便快速读取
    window.userList = @Json.Serialize(Model.Users);
</script>

<style>
    .popover-body {
        min-width: 220px;
    }
</style>

关键改造要点 #

1. 移除Modal组件：删除原有的Modal弹窗HTML结构及触发逻辑
2. Popover配置：开启html: true属性，支持渲染结构化的用户详情内容；可通过data-bs-placement调整弹窗位置
3. 数据传递优化：
   • 直接将用户列表序列化到前端全局变量，无需依赖TempData
   • 如需实时数据，可启用AJAX调用后端接口获取最新信息
4. 交互调整：默认点击触发Popover，如需鼠标悬停触发，可添加data-bs-trigger="hover"属性到按钮上

内容的提问来源于stack exchange，提问作者ahmed abdelaziz