如何在Partial View点击Save按钮后禁用父视图的Add Employees按钮

1. 修复重复ID问题 #

循环生成的按钮和模态框不能用固定ID，需结合DepId生成唯一标识：

父视图（index.cshtml）修改Add按钮

把固定id="btnAdd"改为带DepId的唯一ID，确保每个按钮可被精准定位：

<button class="btn btn-primary" data-toggle="modal" data-target="#AddEmp-@item.DepId" data-url="@Url.Action($"AddEmployee/{item.DepId}")" id="btnAdd-@item.DepId">Add Employees</button>

部分视图（_AddEmployeePartialView.cshtml）修改

• 模态框ID去掉多余的#，直接用DepId生成唯一值
• Save按钮添加唯一ID和关联DepId的属性，方便JS关联对应的Add按钮：

<div class="modal fade" role="dialog" tabindex="-1" id="AddEmp-@Model.DepId" aria-labelledby="addEmpLabel" aria-hidden="true">
    <!-- 其他内容保持不变 -->
    <button type="submit" class="btn btn-primary" id="btnSave-@Model.DepId" data-depid="@Model.DepId">Save</button>

2. 改用AJAX提交表单（避免页面刷新） #

原表单为submit类型，点击后会直接刷新页面，导致禁用按钮的代码无法执行。改用AJAX提交，成功后再处理按钮禁用和模态框关闭：

在父视图页面底部添加以下JS代码（也可放在循环外的<script>标签中）：

<script>
    // 用事件委托绑定所有Save按钮的点击事件
    $(document).on('click', '[id^="btnSave-"]', function(e) {
        e.preventDefault(); // 阻止默认表单提交行为
        var depId = $(this).data('depid');
        var form = $(this).closest('form');
        
        // AJAX提交表单数据
        $.ajax({
            url: form.attr('action'),
            method: form.attr('method'),
            data: form.serialize(),
            success: function() {
                // 提交成功后，禁用对应部门的Add按钮
                $('#btnAdd-' + depId).prop('disabled', true);
                // 关闭模态框
                $('#AddEmp-' + depId).modal('hide');
            },
            error: function() {
                alert('保存失败，请重试');
            }
        });
    });
</script>

3. 移除不必要的页面刷新 #

部分视图的Cancel按钮自带刷新页面的逻辑，若不需要可改为仅关闭模态框：

<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

核心逻辑说明 #

• 唯一ID：通过DepId给每个按钮、模态框生成唯一标识，避免DOM元素ID冲突导致JS定位失败
• AJAX提交：阻止页面刷新，确保禁用按钮的代码能在提交成功后执行
• 事件委托：适配循环生成的动态元素，保证所有Save按钮都能触发绑定的事件

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