ASP.NET MVC：Modal中PartialView按Enter键跳转至PartialView页面的问题

嘿，这个问题我太熟了！当你在Modal里的PartialView输入框按下回车时，浏览器触发了表单的默认提交行为，而你的表单没有指定正确的提交处理逻辑，所以直接跳转到了PartialView的单独页面。咱们来一步步解决它：

问题根源 #

你在PartialView里使用了@Html.BeginForm()，但提交按钮是<input type="button">（不是type="submit"）。不过浏览器有个默认行为：当表单内的输入框按下回车时，会自动触发表单的提交动作，哪怕没有显式的submit按钮。这就导致表单默认提交到当前PartialView的Action地址（也就是/Users/Phases/PhaseAdd/），所以页面跳转到了PartialView的单独页面。

解决方案（三种可选方法） #

方法1：直接阻止表单默认提交行为 #

给表单添加onsubmit事件，直接返回false来拦截默认提交动作：

@using (Html.BeginForm(null, null, FormMethod.Post, new { onsubmit = "return false;" }))
{
    // 原表单内容保持不变
}

方法2：完善输入框的回车事件逻辑 #

你已经给输入框加了onkeypress = "return runScript(event)"，可以扩展这个函数，让回车触发保存按钮的点击，同时阻止默认提交：

function runScript(event) {
    // 判断是否按下回车键（keyCode为13）
    if (event.keyCode === 13) {
        // 模拟点击保存按钮
        document.querySelector('.btnAddPhase').click();
        // 阻止浏览器默认的表单提交行为
        event.preventDefault();
        return false;
    }
    return true;
}

这样按下回车时，会执行你写的保存逻辑，而不是跳转到PartialView页面。

方法3：改用Ajax表单实现异步提交 #

如果你的保存操作本来就需要异步处理，可以用Ajax.BeginForm替代普通表单，这样提交不会刷新页面：

@using (Ajax.BeginForm("PhaseAdd", "Users", new AjaxOptions { 
    HttpMethod = "Post",
    OnSuccess = "handleSaveSuccess", // 保存成功后的回调函数
    OnFailure = "handleSaveFailure"
}))
{
    // 原表单内容保持不变
}

注意：要确保项目中引用了jquery.unobtrusive-ajax.js脚本，这是Ajax表单正常工作的必要依赖。

额外小优化 #

你的Modal关闭逻辑可以用jQuery简化（如果用了Bootstrap Modal组件的话）：

function closeModal() {
    $('#AddModal').modal('hide');
}

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