MVC局部视图中Ajax WebGrid分页与排序异常问题求助

嘿，我来帮你解决这些WebGrid的Ajax问题，这几个坑我之前也踩过，咱们一步步来调整：

你的三个问题本质上都是因为WebGrid默认的Ajax配置没有指向正确的局部视图请求地址，且状态维护逻辑有问题：

• 排序/分页默认回发Index页面，没有指定Ajax请求的目标Action
• 上传/删除后没有正确刷新WebGrid的数据源，导致Grid状态丢失或重复执行操作

1. 修正WebGrid的Ajax配置与绑定逻辑 #

首先调整局部视图Upload_doc.cshtml里的WebGrid初始化代码，指定Ajax请求的目标Action和正确的更新容器：

@{ 
    // 指定ajaxUpdateUrl为返回当前局部视图的Action，确保排序/分页请求只刷新Grid区域
    WebGrid doc_upload = new WebGrid(
        null, 
        rowsPerPage: 5, 
        fieldNamePrefix: "g1", 
        pageFieldName: "p1", 
        ajaxUpdateContainerId: "ajaxgrid", // 绑定外层容器ID，确保整个Grid区域被更新
        ajaxUpdateUrl: Url.Action("GetDocuments") // 关键：指定排序/分页的请求目标Action
    ); 
    // 绑定数据时传入真实总条数，不要写死5，否则分页逻辑会出错
    doc_upload.Bind(Model.documents, autoSortAndPage: true, rowCount: Model.totalDocumentCount); 
}

2. 改造文件上传为Ajax提交 #

把普通的上传按钮改成Ajax表单，确保上传完成后直接刷新WebGrid，而不是整页回发：

<div id="ajaxgrid">
    @using (Ajax.BeginForm("UploadDocument", new AjaxOptions { 
        HttpMethod = "Post", 
        InsertionMode = InsertionMode.Replace, 
        UpdateTargetId = "ajaxgrid", // 上传完成后直接更新Grid容器
        OnSuccess = "console.log('上传成功')"
    }))
    {
        <input type="file" id="file" name="file" />
        <input type="submit" class="btn btn-warning" value="上传文档" />
    }

    <!-- WebGrid代码放在这里 -->
    <div>
        @doc_upload.GetHtml(
            htmlAttributes: new { id = "grid" }, 
            tableStyle: "table table-bordered", 
            mode: WebGridPagerModes.All, 
            firstText: "<< First", 
            previousText: "< Prev", 
            nextText: "Next >", 
            lastText: "Last >>", 
            columns: doc_upload.Columns(
                doc_upload.Column("sno", "Serial No.", canSort: true),
                doc_upload.Column("docdesc", "Document Title"),
                doc_upload.Column("docdt", "Document Date", format: (k) => k.docdt != null ? string.Format("{0:dd-MMM-yyyy}", k.docdt) : ""),
                doc_upload.Column(header: "Actions", format: (item) => new HtmlString(
                    Html.ActionLink("View", "ViewDoc", new { sno=item.sno}, new { target = "_blank" }) + " " + 
                    Ajax.ActionLink("Delete", "DeleteDoc", new { sno=item.sno }, new AjaxOptions { 
                        UpdateTargetId = "ajaxgrid", // 删除后直接更新Grid容器
                        HttpMethod = "Post",
                        Confirm = "确定要删除这个文档吗？"
                    })
                ))
            )
        )
    </div>
</div>

3. 后端Action补充（关键） #

需要新增/修改三个Action，确保所有操作都返回局部视图：

① 处理排序/分页的Action #

public ActionResult GetDocuments(string sort, string sortDir, int? p1)
{
    // 1. 根据sort、sortDir参数处理排序逻辑
    // 2. 根据p1参数处理分页逻辑
    var documents = YourDataService.GetDocuments(sort, sortDir, p1 ?? 1, 5);
    var totalCount = YourDataService.GetTotalDocumentCount();
    
    // 返回局部视图，携带最新的文档数据
    return PartialView("Upload_doc", new YourViewModel { 
        documents = documents, 
        totalDocumentCount = totalCount 
    });
}

② 处理文件上传的Action #

[HttpPost]
public ActionResult UploadDocument(HttpPostedFileBase file)
{
    // 处理文件上传逻辑（保存文件、记录到数据库等）
    if (file != null && file.ContentLength > 0)
    {
        // 你的上传代码
    }

    // 上传完成后返回最新的文档列表
    var documents = YourDataService.GetDocuments(null, null, 1, 5);
    var totalCount = YourDataService.GetTotalDocumentCount();
    return PartialView("Upload_doc", new YourViewModel { 
        documents = documents, 
        totalDocumentCount = totalCount 
    });
}

③ 处理删除的Action #

[HttpPost]
public ActionResult DeleteDoc(int sno)
{
    // 处理删除逻辑
    YourDataService.DeleteDocument(sno);

    // 删除后返回最新的文档列表
    var documents = YourDataService.GetDocuments(null, null, 1, 5);
    var totalCount = YourDataService.GetTotalDocumentCount();
    return PartialView("Upload_doc", new YourViewModel { 
        documents = documents, 
        totalDocumentCount = totalCount 
    });
}

• 问题(i)：通过ajaxUpdateUrl指定了排序/分页的请求目标为GetDocumentsAction，该Action只返回局部视图，不会整页回发Index页面
• 问题(ii)：上传用Ajax表单提交，完成后直接更新ajaxgrid容器，WebGrid会重新绑定最新的文档数据，不会消失
• 问题(iii)：删除操作完成后返回最新的WebGrid视图，排序/分页时请求的是最新的文档列表，不会携带之前的删除参数，避免重复执行删除

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