MVC5中提交表单后模态窗口无法关闭的问题排查

看起来你已经把AJAX请求的核心逻辑跑通了，控制器也能正常接收参数，就是模态框关不掉对吧？这主要是因为你用了错误的关闭方式，再加上submit按钮的默认行为在悄悄干扰，我给你一步步拆解解决：

1. 替换成Bootstrap官方的模态框关闭方法 #

你现在用的$("#agregarProducto").hide()只是简单隐藏了模态框的DOM元素，但Bootstrap的模态框有自己的组件逻辑（比如背景遮罩、状态管理），直接用hide()没法触发这些逻辑，导致看起来模态框没真正关闭。

把关闭代码换成Bootstrap提供的专用方法：

$('#agregarProducto').modal('hide');

这个方法会自动处理所有相关元素——隐藏模态框、移除背景遮罩、更新组件状态，完全符合Bootstrap模态框的工作机制。

2. 阻止表单的默认提交行为 #

你的提交按钮是<input type="submit">，点击它时浏览器会触发表单的默认提交行为（哪怕你写了AJAX），这个默认行为可能会导致页面刷新或跳转，直接覆盖你关闭模态框的操作。

所以必须在点击事件里先阻止这个默认行为，记得给函数加event参数：

$("#btnSubmit").click(function (event) {
    // 先阻止表单默认提交
    event.preventDefault();
    
    // 后面的AJAX逻辑保持不变...
});

3. （可选）优化AJAX与控制器的交互 #

现在你的控制器返回return View();，但AJAX请求不需要完整视图，返回JSON数据能让前端做更友好的反馈，比如提示用户添加成功：

修改控制器代码： #

[HttpPost]
public ActionResult AgregarProducto(int codigoproducto, int? cantidad)
{
    // 这里编写你的业务逻辑，比如将数据存入数据库
    // ...

    // 返回JSON结果给前端
    return Json(new { Success = true, Message = "Material agregado exitosamente" });
}

修改JS的success回调： #

success: function (response) {
    // 关闭模态框
    $('#agregarProducto').modal('hide');
    // 重置表单，下次打开时恢复初始状态
    $("#myForm")[0].reset();
    // 手动恢复数量输入框的禁用状态（reset不会修改disabled属性）
    $("#idcantidad").prop("disabled", true);
    $("#idcheckcantidad").prop("checked", false);
    // 提示用户操作成功
    alert(response.Message);
},
// （可选）添加错误处理，请求失败时给用户提示
error: function(xhr, status, error) {
    alert('Ocurrió un error al agregar el material: ' + error);
}

4. （可选）完善复选框的交互逻辑 #

你页面上的复选框用来控制数量输入框的禁用状态，现在没有对应的交互代码，加上这个能提升用户体验：

$("#idcheckcantidad").change(function() {
    // 复选框勾选时启用输入框，否则禁用
    $("#idcantidad").prop("disabled", !$(this).is(":checked"));
});

把这些修改完成后，你的模态框应该就能正常关闭了，整个交互流程也会更流畅。

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