通过AJAX调用修改模型属性值时遭遇404错误求助

问题分析 #

404错误的核心原因是请求路径与实际控制器不匹配：你的Edit链接指定控制器为AdminBlogPost，说明控制器类是AdminBlogPostController，但JS里请求的路径是/AdminBlog/List，对应AdminBlogController，路径错误导致接口找不到。此外，当前写法仅发送请求未处理返回内容，就算路径正确也无法更新表格。

修复步骤 #

1. 修正JS请求路径并添加回调处理

修改JS代码，将请求路径改为与控制器匹配的/AdminBlogPost/List，同时添加回调函数处理返回的HTML，替换页面上的表格：

$("#updateBtn").click(function () {
    $.post('/AdminBlogPost/List', { sampType: "goku" }, function(response) {
        $("#tableContainer").html(response);
    }).fail(function() {
        alert('更新失败，请检查请求路径');
    });
});

2. 将表格代码抽为局部视图

创建名为_BlogPostsTable.cshtml的局部视图，把表格核心代码迁移进去：

@model IEnumerable<你的命名空间.BlogPost>
<table class="table">
    <thead>
        <tr>
            <td>Id</td>
            <td>Heading</td>
            <td>Tags</td>
            <td> </td>
        </tr>
    </thead>
    <tbody>
        @foreach (var blogPost in Model)
        {
            <tr>
                <td>@blogPost.Id</td>
                <td>@blogPost.Heading</td>
                <td>
                   <div class="d-flex">
                        @foreach (var tag in blogPost.Tags)
                        {
                            <span class="badge bg-secondary me-2">@tag.Name</span>
                        }
                    </div>   
                </td>
                <td>
                    <a asp-area =""
                       asp-controller="AdminBlogPost" 
                       asp-action="Edit"
                       asp-route-id="@blogPost.Id">
                       Edit
                    </a>
                </td>
            </tr>
        }
    </tbody>
</table>

3. 修改主视图，用容器包裹局部视图

在主视图中，将原表格代码替换为局部视图，并添加容器用于后续更新：

@if(Model != null && Model.Any())
{
    <button id="updateBtn" class="btn btn-primary mb-2">Update</button>
    <div id="tableContainer">
        @await Html.PartialAsync("_BlogPostsTable", Model)
    </div>
}

4. 修改控制器POST方法，返回局部视图

将POST方法的返回类型从View改为PartialView，仅返回表格的HTML内容：

[HttpPost]
public async Task<IActionResult> List(string sampType)
{
    var blogPosts = await blogPostRepository.GetAllAsync();

    var filteredPosts = sampType == "goku" 
        ? blogPosts.Where(x => x.Heading == "Goku") 
        : blogPosts;

    return PartialView("_BlogPostsTable", filteredPosts);
}

完成上述修改后，点击Update按钮即可正确发送请求，获取过滤后的表格HTML并更新页面内容。

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