ASP.NET Core MVC实现类谷歌标签页结构及表单提交布局问题求助

1. 前端改造：让表单通过Ajax提交 #

动态加载的标签页内表单默认会触发同步提交，直接刷新整个页面。我们需要阻止默认行为，改用Ajax提交来更新当前标签内容：

// 用事件委托适配动态加载的表单
$(document).on('submit', '.tab-content form', function(e) {
    e.preventDefault(); // 阻止默认跳转
    const form = $(this);
    const currentTab = form.closest('.tab-pane');
    const formData = new FormData(form[0]);

    $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: formData,
        processData: false,
        contentType: false,
        success: (result) => {
            // 用返回的内容替换当前标签面板
            currentTab.html(result);
            // 保持当前标签激活状态
            currentTab.addClass('active');
            // 重新初始化表单验证（如果用到）
            $(currentTab).find('form').removeData('validator').removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse(currentTab);
        },
        error: (xhr) => {
            currentTab.html(`<div class="alert alert-danger">提交失败：${xhr.responseText}</div>`);
        }
    });
});

2. 后端调整：仅返回部分视图 #

控制器处理表单提交时，要判断是否为Ajax请求，只返回不带布局的部分视图，避免带回完整页面结构：

[HttpPost]
public IActionResult YourAction(YourViewModel model)
{
    if (ModelState.IsValid)
    {
        // 处理业务逻辑（如数据保存）
        // ...
    }

    // 识别Ajax请求（通过请求头判断）
    if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
    {
        // 返回不带布局的部分视图
        return PartialView("Index", model);
    }

    // 非Ajax请求（直接访问时）返回完整视图
    return View(model);
}

3. 可选：动态内容初始化 #

如果加载的页面包含需要初始化的组件（如日期选择器、下拉框插件），在Ajax成功回调中补充初始化逻辑：

function initTabComponents(tabElement) {
    // 示例：初始化日期选择器
    $(tabElement).find('.date-picker').datepicker();
    // 其他组件初始化逻辑
}

// 在Ajax success回调中调用
success: (result) => {
    currentTab.html(result);
    initTabComponents(currentTab);
    currentTab.addClass('active');
}

这样处理后，表单提交会在当前标签内异步完成，返回的内容直接替换标签面板，不会破坏多标签页的整体布局。

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