如何实现带Razor验证的Partial View Ajax化及模型丢失问题解决

你和团队刚接触MVC Razor就遇到了Partial View Ajax调用的验证和模型丢失问题，我来帮你一步步梳理解决思路。

问题根源分析 #

1. 客户端验证未触发：当前点击按钮直接发起Ajax，完全跳过了HtmlValidationMessageFor对应的客户端验证规则，导致未选择下拉选项也能触发请求
2. 模型状态丢失：验证失败后，服务器端没有返回包含错误状态的原模型，重新渲染Partial View时丢失了验证提示和原有模型数据
3. 重复加载jQuery：Detail Partial View里重复引入了jQuery，会和父视图的jqueryval插件冲突，导致验证功能异常

解决方案步骤 #

1. 修复客户端验证触发逻辑 #

在Ajax请求发起前先执行表单验证，只有验证通过才继续请求，同时移除Partial View里重复的jQuery引用。

修改Detail.cshtml的脚本部分：

// 移除这行重复的jQuery引用：<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#btnReload@(ViewBag.DetailIndex)").on("click", function (e) {
        e.preventDefault(); // 阻止按钮默认提交行为（如果是submit类型）
        
        // 获取表单并触发客户端验证
        var $form = $('form');
        $form.validate();
        
        // 验证不通过则终止Ajax请求
        if (!$form.valid()) {
            return;
        }

        var ModelData = $form.serialize();
        $.ajax({
            url: "@Url.Action("GetAjaxPostBackData_OnlyTextBox", "Example")", // 使用Url.Action生成可靠路径，避免硬编码
            type: "POST", // 改用POST请求，更适配表单数据传递
            data: ModelData + "&index=@ViewBag.DetailIndex", // 序列化表单并附加index参数
            headers: {
                // 带上AntiForgeryToken，符合MVC安全规范
                "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val()
            }
        })
        .done(function (partialViewResult) {
            $('#divDetails_@(ViewBag.DetailIndex)').replaceWith(partialViewResult);
        });
    });
});
</script>

2. 修复服务器端模型状态保留逻辑 #

修改ExampleController中的GetAjaxPostBackData_OnlyTextBox方法，确保验证失败时返回带错误状态的原模型，同时重新填充Partial View依赖的ViewBag数据：

[HttpPost]
[ValidateAntiForgeryToken] // 验证AntiForgeryToken，保障请求安全
public ActionResult GetAjaxPostBackData_OnlyTextBox(MyContainer model, int index)
{
    // 重新填充下拉列表数据源（Partial View依赖此数据）
    ViewBag.Names = new SelectList(/* 你的名称数据源，比如从数据库获取 */, "Value", "Text");
    ViewBag.DetailIndex = index;

    // 检查模型验证状态
    if (!ModelState.IsValid)
    {
        // 验证失败，直接返回原模型和Partial View，保留错误提示
        return PartialView("Detail", model);
    }

    // 验证通过，执行你的业务逻辑
    // 比如更新model.Details[index].SomeNumber等操作
    // ...

    // 返回更新后的模型和Partial View
    return PartialView("Detail", model);
}

3. 确保模型验证属性正确 #

检查MyContainer模型中Details[index].Name字段是否添加了必填验证属性，示例：

public class DetailModel
{
    [Required(ErrorMessage = "请选择名称")]
    public string Name { get; set; }
    // 其他属性...
}

关键注意事项 #

• 禁止重复加载jQuery：父视图已经通过@Scripts.Render("~/bundles/jquery")加载了jQuery，Partial View里重复加载会导致验证插件失效、事件绑定异常
• 优先使用POST请求：GET请求不适合传递大量表单数据，MVC模型绑定在POST模式下更可靠，同时配合ValidateAntiForgeryToken保障请求安全
• 重新填充ViewBag数据：每次返回Partial View时都要重新填充下拉列表等依赖数据，因为ViewBag仅在单次请求中有效，Ajax请求是全新的上下文

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