Razor Pages表格弹窗未显示对应行数据的问题排查求助

在Razor Pages中实现了带操作按钮的数据表格，点击按钮弹出模态框展示对应行的XML数据。模型已包含弹窗所需数据，无需回发操作，但点击任意行按钮时，弹窗始终显示第一条记录的数据，请问问题出在哪里？

Razor页面代码片段： #

@foreach (var result in Model.SubmissionDetails.SubmissionEvents)
{
    <tr>
        <td>@result.SubEventId</td>
        <td>@result.ReceiverReference</td>
        <td>@result.Date</td>
        <td>@result.Mapping</td>
        <td>@result.Error</td>
        <td>
            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#xmlModal" data-bs-whatever="xml">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
                </svg>
            </button>
            <div class="modal fade" id="xmlModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">XML</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div id="modelmessage" class="alert alert-success" role="alert" style="display:none">
                                    <a style="color:darkgreen">XML copied.</a>
                                </div>
                                <div class="mb-3">
                                    <span id="xmlText">@Html.TextArea("Info", System.Xml.Linq.XDocument.Parse(@result.XMLValue).ToString(), new {cols="101", rows="30", @readonly="readonly", @disabled="disabled" })</span>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="copyToClipboard()">Copy to Clipboard</button>
                        </div>
                    </div>
                </div>
            </div>

        </td>
    </tr>
}

模型类代码： #

public class SubmissionEvent
{
    public int SubEventId { get; set; }
    public string ReceiverReference { get; set; }
    public DateTime Date { get; set; }
    public string Mapping { get; set; }
    public string Error { get; set; }
    public string XMLValue { get; set; }
    public SubmissionEvent()
    {
        SubEventId = 0;
        ReceiverReference = string.Empty;
        Date = DateTime.MinValue;
        Mapping = string.Empty;
        Error = string.Empty;
        XMLValue = string.Empty;
    }
}

问题根源 #

你把模态框放在了foreach循环内部，导致每一行都会生成一个ID为xmlModal的模态框。但HTML中ID是全局唯一标识，当点击按钮触发data-bs-target="#xmlModal"时，浏览器只会匹配到第一个带有该ID的元素，所以无论点哪一行，都会弹出第一条记录对应的模态框。

解决方案 #

方案1：复用单个模态框（推荐，性能更优） #

把模态框移到循环外部，通过JavaScript在点击按钮时动态替换模态框内的XML内容：

1. 调整Razor页面结构，将模态框移出循环：

<!-- 表格循环部分 -->
@foreach (var result in Model.SubmissionDetails.SubmissionEvents)
{
    <tr>
        <td>@result.SubEventId</td>
        <td>@result.ReceiverReference</td>
        <td>@result.Date</td>
        <td>@result.Mapping</td>
        <td>@result.Error</td>
        <td>
            <!-- 给按钮添加自定义属性存储当前行的XML内容 -->
            <button type="button" class="btn btn-outline-primary view-xml-btn" 
                    data-bs-toggle="modal" data-bs-target="#xmlModal"
                    data-xml-content="@System.Xml.Linq.XDocument.Parse(result.XMLValue).ToString()">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
                </svg>
            </button>
        </td>
    </tr>
}

<!-- 单个模态框，放在循环外部 -->
<div class="modal fade" id="xmlModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">XML</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div id="modelmessage" class="alert alert-success" role="alert" style="display:none">
                        <span style="color:darkgreen">XML copied.</span>
                    </div>
                    <div class="mb-3">
                        <textarea id="xmlText" cols="101" rows="30" readonly disabled></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="copyToClipboard()">Copy to Clipboard</button>
            </div>
        </div>
    </div>
</div>

2. 添加JavaScript代码，监听按钮点击事件并替换内容：

// 给所有查看XML的按钮绑定点击事件
document.querySelectorAll('.view-xml-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // 获取当前按钮存储的XML内容
        const xmlContent = this.getAttribute('data-xml-content');
        // 替换模态框里的文本域内容
        document.getElementById('xmlText').value = xmlContent;
    });
});

方案2：给每个模态框生成唯一ID #

如果坚持在循环内生成模态框，需要给每个模态框和对应的按钮设置唯一ID（比如用SubEventId区分）：

@foreach (var result in Model.SubmissionDetails.SubmissionEvents)
{
    <tr>
        <td>@result.SubEventId</td>
        <td>@result.ReceiverReference</td>
        <td>@result.Date</td>
        <td>@result.Mapping</td>
        <td>@result.Error</td>
        <td>
            <!-- 按钮的target指向当前行的唯一模态框ID -->
            <button type="button" class="btn btn-outline-primary" 
                    data-bs-toggle="modal" data-bs-target="#xmlModal-@result.SubEventId">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
                </svg>
            </button>
            <!-- 模态框ID包含SubEventId保证全局唯一 -->
            <div class="modal fade" id="xmlModal-@result.SubEventId" tabindex="-1" aria-labelledby="exampleModalLabel-@result.SubEventId" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel-@result.SubEventId">XML</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div id="modelmessage-@result.SubEventId" class="alert alert-success" role="alert" style="display:none">
                                    <span style="color:darkgreen">XML copied.</span>
                                </div>
                                <div class="mb-3">
                                    @Html.TextArea("Info", System.Xml.Linq.XDocument.Parse(result.XMLValue).ToString(), new {cols="101", rows="30", @readonly="readonly", @disabled="disabled" })
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="copyToClipboard('@result.SubEventId')">Copy to Clipboard</button>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
}

注意：这种方式会生成多个模态框DOM元素，当表格数据量大时会增加页面负担，所以优先推荐方案1。

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