ASP.NET MVC表单提交时如何正确实现加载提示的显示与隐藏？

应该修复JavaScript方法，因为普通表单提交（无论使用哪种Html.BeginForm重载）都会触发页面刷新，加载层会随着页面重置立即消失，根本无法维持到数据库请求完成。

问题根源分析 #

你之前的两种尝试都踩了普通表单提交的坑：

• 用$.get传递Model失败：客户端不存在服务器端的Model对象，直接传这个变量肯定会报错，而且GET请求也不适合传递复杂表单数据。
• 调用表单submit后马上隐藏加载层：submit会触发页面刷新，浏览器会立刻开始加载新页面，你的隐藏代码执行后，页面很快就被重置，加载提示自然失效，而此时数据库请求可能还在处理中。

正确的JS修复方案 #

改用AJAX提交表单，这样页面不会刷新，能全程控制加载层的显示和隐藏，同时正确传递表单数据到后台：

1. Razor表单部分（保持原有结构即可，无需换BeginForm重载）：

@using (Html.BeginForm("RetailActivity", "Admin", FormMethod.Post, new { id = "searchForm" }))
{
    <!-- 表单控件 -->
    <button type="button" onclick="return formSearch();">搜索</button>
}

<div id="loadingDiv" style="display:none;">加载中...</div>
<div id="searchResultContainer"><!-- 搜索结果会渲染到这里 --></div>

2. JavaScript方法实现：

function formSearch() {
    // 显示加载层
    $('#loadingDiv').show();
    
    var $form = $('#searchForm');
    
    // 发起AJAX请求
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serialize(), // 自动序列化表单所有控件的值，对应后台Model
        success: function(response) {
            // 把后台返回的视图内容替换到结果容器
            $('#searchResultContainer').html(response);
        },
        error: function(xhr) {
            // 处理请求失败的情况
            alert('搜索失败，请稍后重试');
        },
        complete: function() {
            // 无论请求成功/失败，最后都隐藏加载层
            $('#loadingDiv').hide();
        }
    });
    
    // 阻止默认的表单提交行为，避免页面刷新
    return false;
}

3. 后台Action调整（如果需要）：
   如果原来的Action是返回整个页面，现在需要改成返回部分视图，这样AJAX请求能拿到仅包含搜索结果的HTML：

[HttpPost]
public ActionResult RetailActivity(YourModel model)
{
    // 处理数据库查询逻辑
    var results = _db.RetailActivities.Where(...).ToList();
    
    // 返回部分视图，而不是完整页面
    return PartialView("_RetailActivityResults", results);
}

为什么不用Html.BeginForm重载？ #

所有Html.BeginForm的重载最终都是生成普通的<form>标签，提交时必然触发页面刷新，这就导致加载层无法在请求过程中持续显示——页面刷新后，原来的DOM元素（包括加载层）都会被销毁，新页面加载完成后才会重新渲染，完全达不到你要的“等待数据库响应时显示加载提示”的效果。

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