ASP.NET MVC提交表单URL不变且保留验证功能解决方案

要同时实现提交后URL不改变和表单验证正常生效，核心是手动触发ASP.NET MVC的非侵入式验证，验证通过后再用AJAX提交表单。以下是具体实现步骤：

1. 修正AJAX提交脚本 #

保留e.preventDefault()阻止默认页面跳转，在提交前手动调用表单验证方法：

$('form').submit(function(e) {
    e.preventDefault(); // 阻止默认表单提交，保持URL不变
    
    var $form = $(this);
    // 手动触发非侵入式验证
    if (!$form.valid()) {
        return; // 验证不通过，终止提交
    }

    // 验证通过，执行AJAX提交
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serialize() + '&filenumber=' + getUrlParameter('filenumber'), // 附加原URL的filenumber参数
        success: function(result) {
            if (result.success) {
                // 提交成功后的处理：比如显示提示、刷新页面局部内容
                alert('提交成功');
                // 示例：替换页面指定区域的内容
                $('#resignation-container').html(result.successView);
            } else {
                // 显示服务器返回的验证错误
                $('.validation-summary-errors').html(result.errorMessages);
            }
        },
        error: function() {
            alert('提交失败，请稍后重试');
        }
    });
});

// 辅助函数：获取URL参数
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

2. 修改控制器Action返回JSON结果 #

将Create方法改为返回JsonResult，处理验证成功/失败的响应：

[HttpPost]
public ActionResult Create(ResignationModel model)
{
    // 获取原URL的filenumber参数（如果需要在逻辑中使用）
    var fileNumber = Request.QueryString["filenumber"];

    if (ModelState.IsValid)
    {
        // 执行离职申请的保存逻辑
        // ...

        // 返回成功响应，可附带成功提示的局部视图
        return Json(new { 
            success = true, 
            successView = RenderPartialViewToString("_SuccessPartial", model) 
        });
    }
    else
    {
        // 收集所有验证错误信息
        var errorMessages = string.Join("<br/>", 
            ModelState.Values
                .SelectMany(v => v.Errors)
                .Select(e => e.ErrorMessage));
        
        return Json(new { 
            success = false, 
            errorMessages = errorMessages 
        });
    }
}

// 辅助方法：将局部视图转为字符串（如果需要返回视图片段）
private string RenderPartialViewToString(string viewName, object model)
{
    ViewData.Model = model;
    using (var sw = new StringWriter())
    {
        var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
        var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
        viewResult.View.Render(viewContext, sw);
        viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
        return sw.GetStringBuilder().ToString();
    }
}

3. 确保视图引用验证脚本 #

确认页面已加载ASP.NET MVC默认的验证脚本（顺序不能错）：

<!-- 在页面底部引入脚本 -->
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/resignation-submit.js"></script> <!-- 你的自定义提交脚本 -->

4. 模型验证注解（确保已配置） #

确保你的模型类添加了正确的数据验证注解，比如：

public class ResignationModel
{
    [Required(ErrorMessage = "请填写姓名")]
    public string EmployeeName { get; set; }

    [Required(ErrorMessage = "请选择离职日期")]
    [DataType(DataType.Date)]
    public DateTime ResignDate { get; set; }

    // 其他属性的验证注解...
}

关键注意点 #

• 表单的action属性需指向Resignation/Create，method设为post
• 如果需要保留原URL的filenumber参数，需在AJAX提交时手动附加到请求数据中
• 提交成功后避免页面跳转，通过AJAX更新页面局部内容来完成交互

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