如何在ModelState.IsValid为false时阻止Unobtrusive Ajax的data-ajax-success触发？

你遇到的核心问题是：jQuery Unobtrusive Ajax 仅通过HTTP状态码判断请求是否成功——只要服务器返回2xx（比如200 OK）状态码，就会触发data-ajax-success回调，完全不关心后端的ModelState是否有效。你当前的return Page()在ModelState无效时仍然返回200状态码，所以success回调会被执行。

方案1：修改后端返回错误状态码（推荐） #

当ModelState无效时，手动设置响应的HTTP状态码为400（Bad Request），这样jQuery Ajax会判定请求失败，触发data-ajax-failure回调，跳过success逻辑。

修改你的后端代码：

public async Task<IActionResult> OnPostProductAliasCreateAsync()
{
    if (!ModelState.IsValid || _context.ProductAliases == null || ProductAlias == null)
    {
        // 设置400状态码，标记请求参数无效
        Response.StatusCode = StatusCodes.Status400BadRequest;
        return Page();
    }

    _context.ProductAliases.Add(ProductAlias);
    await _context.SaveChangesAsync();

    return Page();
}

处理后，ModelState无效时请求会进入handleError回调，不会执行refreshPartial。

方案2：前端回调中判断操作结果 #

如果不想修改状态码，可以通过后端传递操作状态标记，在前端success回调里判断是否执行刷新逻辑。

后端修改： #

public async Task<IActionResult> OnPostProductAliasCreateAsync()
{
    if (!ModelState.IsValid || _context.ProductAliases == null || ProductAlias == null)
    {
        ViewData["IsOperationSuccess"] = false;
        return Page();
    }

    _context.ProductAliases.Add(ProductAlias);
    await _context.SaveChangesAsync();

    ViewData["IsOperationSuccess"] = true;
    return Page();
}

前端修改： #

1. 在表单所在页面添加隐藏字段存储状态：

<input type="hidden" id="operation-status" value="@ViewData["IsOperationSuccess"]" />

2. 自定义success回调函数，判断状态后执行逻辑：

function handleFormSuccess(response) {
    // 解析返回的HTML内容，提取状态值
    const parser = new DOMParser();
    const doc = parser.parseFromString(response, 'text/html');
    const isSuccess = doc.querySelector('#operation-status')?.value === 'True';
    
    if (isSuccess) {
        refreshPartial('GetAliases', 'product-aliases-container');
    }
}

3. 更新表单的data-ajax-success属性：

<form method="post" asp-page-handler="ProductAliasCreate" data-ajax="true" data-ajax-method="post" data-ajax-success="handleFormSuccess" data-ajax-failure="handleError">

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