ASP.NET MVC Ajax动态加载局部视图中Ajax.BeginForm提交重定向显示JSON问题

核心原因 #

静态渲染的表单会在页面初始化时被jquery.unobtrusive-ajax.js自动绑定Ajax提交逻辑，但动态加载的表单是页面加载完成后才插入DOM的，这时候Unobtrusive Ajax的初始化逻辑已经执行完毕，不会自动为新表单绑定Ajax提交事件，导致表单按默认方式提交（直接跳转并显示返回的JSON）。

另外，你的表单设置了enctype="multipart/form-data"（用于文件上传），Unobtrusive Ajax默认的提交逻辑不支持这种编码类型，这也是动态加载后提交异常的潜在诱因。

解决方案：手动初始化动态加载的表单 #

修改你的loadPartial函数，在插入局部视图后，手动为表单绑定Ajax提交逻辑并重新解析验证规则：

function loadPartial(id) {
    $.get('/Config/_Settings?sid=' + id, function (data) {
        var $container = $('#partialSettingsPlaceHolder');
        $container.html(data);
        
        // 1. 重新解析表单的验证规则（如果有验证需求）
        $.validator.unobtrusive.parse($container);
        
        // 2. 为动态加载的Ajax表单绑定自定义提交逻辑
        $container.find('#SaveSettings').off('submit').on('submit', function(e) {
            e.preventDefault(); // 阻止默认跳转提交
            
            // 构造FormData，支持multipart/form-data编码
            var formData = new FormData(this);
            
            // 执行Ajax提交
            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: formData,
                processData: false, // 禁止jQuery处理FormData
                contentType: false, // 让浏览器自动设置正确的Content-Type
                success: function(result) {
                    // 调用你定义的成功回调
                    settingsUpdateSucces(result);
                },
                error: function(xhr) {
                    // 可选：添加错误处理逻辑
                    console.error('提交失败', xhr);
                }
            });
        });
    });
}

简化替代方案（如果不需要文件上传） #

如果你的表单不需要处理文件上传，可以去掉enctype="multipart/form-data"，然后在插入局部视图后调用Unobtrusive Ajax的重新解析方法（部分版本支持）：

function loadPartial(id) {
    $.get('/Config/_Settings?sid=' + id, function (data) {
        var $container = $('#partialSettingsPlaceHolder');
        $container.html(data);
        // 重新解析所有动态加载的Unobtrusive Ajax元素
        if ($.ajaxUnobtrusive) {
            $.ajaxUnobtrusive.parse($container);
        }
        // 同时重新解析验证规则
        $.validator.unobtrusive.parse($container);
    });
}

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