.NET 8 MVC中如何将完整实体模型数据传递至Bootstrap 5模态框（无需AJAX）

我来帮你搞定这个问题！你现在遇到的核心问题很明确：直接把@ent绑定到data-bs-whatever属性上时，Razor引擎只会把它渲染成实体的类型名称（比如类似YourApp.Models.Entity这样的字符串），根本不是我们需要的带属性的结构化数据，所以JS里自然拿不到recipient.Name这类属性。

下面是无需AJAX的完美解决方案，只需要两步就能搞定：

1. 在Razor视图中将实体序列化为JSON字符串 #

修改你的按钮代码，把@ent换成@Json.Serialize(ent)，并且用单引号包裹这个属性值（因为JSON内部是双引号，避免和HTML的双引号冲突）：

<td>
    // Other Actions
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever='@Json.Serialize(ent)'>Remove</button>
</td>

这样处理后，页面渲染出来的按钮会带有完整的实体JSON数据，比如data-bs-whatever='{"Id":1,"Name":"Product A","Number":"PN001"}'，这正是我们需要的结构化数据。

2. 在模态框的JS事件中解析JSON并使用数据 #

接下来修改你的JavaScript代码，拿到data-bs-whatever的值后，用JSON.parse()把它转换成JavaScript对象，之后就能正常访问实体的所有属性了：

const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
    const button = event.relatedTarget
    // 解析JSON字符串为JS对象
    const recipient = JSON.parse(button.getAttribute('data-bs-whatever'))

    console.log(recipient.Name) // 现在能正常输出产品名称了！
    console.log(recipient) // 这里会输出完整的实体对象

    const modalTitle = exampleModal.querySelector('.modal-title')
    const modalBodyInput = exampleModal.querySelector('.modal-body p')

    modalTitle.textContent = `Warning! You're about to remove ${recipient.Name}`
    modalBodyInput.textContent = `确认要移除部件编号为 ${recipient.Number} 的产品吗？`
})

额外注意事项 #

• 如果你的实体存在循环引用（比如实体关联了其他模型，而关联模型又引用回当前实体），直接序列化会报错。这时候你需要：
  • 在Program.cs中配置JSON序列化选项，忽略循环引用：

    builder.Services.AddControllersWithViews()
        .AddJsonOptions(options =>
        {
            options.JsonSerializerOptions.ReferenceHandler = System.Text.Json.Serialization.ReferenceHandler.IgnoreCycles;
        });
    

  • 或者在实体的循环引用属性上标记[JsonIgnore]特性，让序列化时忽略该属性。
• 确保实体的所有需要传递的属性都是**公共（public）**的，否则Json.Serialize()无法获取到这些属性的值。

修改后的完整代码片段（参考） #

表格部分（按钮已修改）

<table id="entities" class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Product Name</th>
            <th scope="col">Part Number</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach(Entity ent in @Model.Entities)
        {
            <tr>
                <td>@ent.Id</td>
                <td>@ent.Name</td>
                <td>@ent.Number</td>
                <td>
                    // Other Actions
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever='@Json.Serialize(ent)'>Remove</button>
                </td>
            </tr>
        }
    </tbody>
</table>

JavaScript部分（已修改）

$(document).ready(function (){
    $('#products').DataTable();
    $('#clients').DataTable();
})

const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
    const button = event.relatedTarget
    const recipient = JSON.parse(button.getAttribute('data-bs-whatever'))

    console.log(recipient.Name) // 现在可以正常访问属性了
    console.log(recipient) // 输出完整的实体对象

    const modalTitle = exampleModal.querySelector('.modal-title')
    const modalBodyInput = exampleModal.querySelector('.modal-body p')

    modalTitle.textContent = `Warning! You're about to remove ${recipient.Name}`
    modalBodyInput.textContent = `产品ID：${recipient.Id}，部件编号：${recipient.Number}`
})

备注：内容来源于stack exchange，提问作者DonDavid12