提交表单时刷新Div失败，出现404错误求助

错误根源 #

你遇到的404错误，核心原因是AJAX请求的URL里的Razor代码@Url.Action("Pagination","Home")没有被ASP.NET Razor引擎正确解析，导致请求发送到了包含未编译Razor语法的无效地址；同时你用load方法刷新div的逻辑也存在冗余和路径问题。

具体修复步骤 #

1. 解决AJAX URL解析问题 #

情况1：JS代码写在.cshtml视图文件内

你的JS代码里用双引号包裹@Url.Action，但Razor参数也用了双引号，导致转义冲突。调整引号格式，确保Razor代码被正确渲染：

$.ajax({
    url: '@Url.Action("Pagination", "Home")', // 此处Razor语法会被渲染为实际路由地址
    type: 'POST',
    data: data,
    success: function (result) {
        // 后续逻辑
    },
    error: function (err) {
        console.log(err);
    }
});

情况2：JS代码放在外部.js文件内

外部JS文件不会被Razor引擎解析，需要在.cshtml视图里先传递路由地址：

<!-- 在视图头部添加 -->
<script>
    const paginationApiUrl = '@Url.Action("Pagination", "Home")';
</script>
<script src="/js/你的外部脚本文件.js"></script>

然后在外部JS里使用这个变量：

$.ajax({
    url: paginationApiUrl,
    // 其他配置不变
});

2. 优化div刷新逻辑 #

你当前用load方法会重新请求整个页面，和AJAX返回的JSON数据逻辑重复。推荐直接用返回的JSON数据生成HTML更新容器：

success: function (result) {
    console.log(result);
    let galleryHtml = '';
    // 循环后端返回的PedidoViewModel列表，生成对应HTML结构（示例）
    result.forEach(item => {
        galleryHtml += `
            <div class="gallery-item">
                <p>配送单号：${item.getNumeroEntrega()}</p>
                <!-- 其他展示内容 -->
            </div>
        `;
    });
    // 更新容器内容
    $("#container-galeria-imagenes").html(galleryHtml);
},

如果坚持要用load方法，需去掉URL里的多余空格，避免解析错误：

$("#container-galeria-imagenes").load(window.location.href + " #container-galeria-imagenes");

3. 验证后端路由 #

确认HomeController的Pagination方法没有被自定义路由覆盖，默认MVC路由{controller}/{action}下，Home/Pagination是有效的请求地址。

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