ASP.NET中FOREACH循环内嵌ModalDialog的Form提交仅返回第一条数据求助

问题根因 #

你遇到的是循环渲染DOM的常见错误，核心原因有3个：

1. DOM ID全局重复：循环生成的所有模态框内的日期输入框都用了固定id="calender1"，HTML规范要求页面ID必须唯一，浏览器只会识别第一个出现的calender1元素。
2. 日期组件绑定错误：你的JS初始化代码仅通过ID选择器绑定了第一个calender1元素，后续所有模态框的输入框都没有正确绑定日期组件，你在非第一个模态框选择日期时，值会自动填充到第一个calender1输入框中，当前打开的模态框输入框实际没有拿到选中值，提交时自然无法传递正确数据。
3. 脚本块位置错误：你把@section Scripts写在了foreach循环内部，会导致页面重复渲染多次相同的脚本，进一步破坏组件绑定逻辑。

修复步骤 #

1. 生成唯一的输入框ID #

修改循环内的日期输入框代码，给每个输入框生成唯一ID，同时新增类选择器用于批量绑定组件：

<!-- 替换原有的input标签代码 -->
<input id="calender_@count" name="calender1" type="text" required autocomplete="off" class="form-control calender-picker" />

这里保留name="calender1"即可，表单提交只会提交当前表单内的同名字段，不会产生冲突。

2. 修改日期组件初始化逻辑 #

把@section Scripts移到页面最外层（不要放在循环内），改用类选择器批量绑定所有日期输入框：

<!-- 放在页面最底部，和循环平级 -->
@section Scripts{
    <script>
        // 遍历所有日期输入框，逐个绑定组件
        $('.calender-picker').each(function(){
            $(this).MdPersianDateTimePicker({
                targetTextSelector: $(this) // 直接绑定当前遍历到的输入框
            });
        });
    </script>
}

可选优化（推荐） #

你现在把整个模态框放在循环里，会生成大量重复DOM节点，数据量大时会降低页面性能。可以把模态框抽到循环外部，点击「ترک کار」按钮时动态给表单赋值当前记录的PersonID，整页只需要保留一个模态框即可，代码会更简洁易维护。

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