Razor视图循环中使用Modal Form提交ID值异常如何解决？

问题原因 #

你的代码核心问题是循环生成的所有Modal元素ID重复：

• 你在foreach循环里给每个Modal都写死了固定ID myModal，触发按钮的data-target也固定指向#myModal
• HTML规范要求页面内元素ID必须唯一，重复ID的情况下点击任意按钮，浏览器只会识别第一个出现的#myModal，打开的是第一行数据对应的Modal，提交的自然是第一行的PersonID，和你选中的行不一致，就会出现ID值不对、少一位的表现
• 额外小问题：日历输入框的id="calender1"也在循环里重复，如果你是用ID绑定的日历选择器，只会对第一个输入框生效

解决方法 #

有两种可选方案，推荐第二种更节省性能：

方案1：给每个Modal生成唯一ID（改动最小） #

修改触发按钮的data-target和Modal的ID，用每行唯一的PersonID拼接，保证ID不重复：

@foreach (var item in Model.ProjectViewModels)
{
    <tr>
        <td>@item.PersonName @item.Family</td>
        <td>@item.PersonCode</td>
        <td>@item.projectName</td>
        <td>
            <div>
                <a class="btn btn-sm btn-outline-primary" asp-controller="Home" asp-action="detailsPerson" asp-route-id="@item.PersonID">جزئیات</a>
                <a class="btn btn-sm btn-outline-secondary" asp-controller="Report" asp-action="SingelGhrardad" asp-route-id="@item.PersonID">قرارداد</a>
                <!-- 修改data-target为唯一值 -->
                <a class="btn btn-sm btn-outline-danger" data-toggle="modal" data-target="#myModal_@item.PersonID">ترک کار</a>
                <!-- 修改Modal ID为唯一值 -->
                <div class="modal fade" id="myModal_@item.PersonID">
                    <div class="modal-dialog ">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>
                            </div>
                            <div class="modal-body">
                                <form asp-controller="Home" asp-action="PersonTarkKar"  asp-route-PersonNewState="0" method="post">
                                    <div class="row">
                                        <div class="col-md-5 col-xs-12">
                                            <label>تاریخ ترک کار</label>
                                            <div class="input-group" style="padding-left:9px; padding-right:9px;">
                                                <div class="input-group-addon"
                                                     style="border:1px solid gray; padding:6px">
                                                    <span>  <i class="right fa fa-calendar"></i></span>
                                                </div>
                                                <!-- 日历输入框也改唯一ID，避免js绑定冲突 -->
                                                <input id="calender_@item.PersonID" name="calender1" type="text" required autocomplete="off" class="form-control" />
                                                <input  name="id" value="@item.PersonID" class="form-control d-none" />
                                            </div>
                                        </div>
                                    </div>
                                    <button class="btn btn-dark mt-5" type="submit">ثبت تاریخ</button>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
}

方案2：复用单个Modal（推荐，代码更简洁） #

把Modal移到循环外面，点击按钮时动态给Modal里的隐藏ID输入框赋值，清空上一次的日历输入内容，避免页面渲染大量重复Modal元素：

<!-- 循环部分只保留触发按钮 -->
@foreach (var item in Model.ProjectViewModels)
{
    <tr>
        <td>@item.PersonName @item.Family</td>
        <td>@item.PersonCode</td>
        <td>@item.projectName</td>
        <td>
            <div>
                <a class="btn btn-sm btn-outline-primary" asp-controller="Home" asp-action="detailsPerson" asp-route-id="@item.PersonID">جزئیات</a>
                <a class="btn btn-sm btn-outline-secondary" asp-controller="Report" asp-action="SingelGhrardad" asp-route-id="@item.PersonID">قرارداد</a>
                <!-- 给按钮加自定义属性存PersonID -->
                <a class="btn btn-sm btn-outline-danger modal-trigger" data-person-id="@item.PersonID" data-toggle="modal" data-target="#myModal">ترک کار</a>
            </div>
        </td>
    </tr>
}

<!-- 单个Modal放循环外面 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>
            </div>
            <div class="modal-body">
                <form asp-controller="Home" asp-action="PersonTarkKar"  asp-route-PersonNewState="0" method="post">
                    <div class="row">
                        <div class="col-md-5 col-xs-12">
                            <label>تاریخ ترک کار</label>
                            <div class="input-group" style="padding-left:9px; padding-right:9px;">
                                <div class="input-group-addon"
                                     style="border:1px solid gray; padding:6px">
                                    <span>  <i class="right fa fa-calendar"></i></span>
                                </div>
                                <input id="calender1" name="calender1" type="text" required autocomplete="off" class="form-control" />
                                <input id="person_id_input" name="id" value="" class="form-control d-none" />
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-dark mt-5" type="submit">ثبت تاریخ</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
            </div>
        </div>
    </div>
</div>

<!-- 加一段js动态赋值 -->
@section Scripts{
    <script>
        $('.modal-trigger').on('click', function(){
            // 拿到当前点击按钮对应的PersonID
            const pid = $(this).data('person-id');
            // 赋值给Modal里的隐藏输入框
            $('#person_id_input').val(pid);
            // 清空上一次的日历输入
            $('#calender1').val('');
        })
    </script>
}

后端代码不需要改动，修改完前端逻辑后提交的ID就会和你选中的行一致。

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