MVC5中重新加载含Document Viewer的分部视图问题

核心问题分析 #

• 原文档视图包含完整的<html>/<head>/<body>结构，无法直接嵌入主页面的DOM容器中
• Ajax上传的回调写法错误（done不是jQuery Ajax的配置参数，应为success或链式调用.done()）
• 上传成功后未重新请求最新的文档视图内容，直接用返回值填充不符合需求

分步修复 #

1. 将文档视图改为分部视图 #

删除独立页面的HTML结构，只保留DocumentViewer的渲染代码，因为分部视图无需完整页面框架：

@{
    Layout = null;
}

@using GleamTech.AspNet.Mvc;
@using GleamTech.DocumentUltimate;
@using GleamTech.DocumentUltimate.AspNet;
@using GleamTech.DocumentUltimate.AspNet.UI;

@{
    var documentViewer = new DocumentViewer
    {
        Width = 800,
        Height = 600,
        Document = @ViewBag.documentFile
    };
}

@this.RenderHead(documentViewer)
@this.RenderBody(documentViewer)

同时修改Action返回分部视图：

public ActionResult ViewSanctionDocument(long id)
{
    var lstData = EmployeeMemoServices.GetEmployeeMemo(_usrInfo, id);
    string filePath = "";
    if (lstData.EmployeeDocImg != null)
    {
        filePath = Server.MapPath(lstData.EmployeeDocImg.Substring(3, lstData.EmployeeDocImg.Length - 3).ToString());
    }
    ViewBag.documentFile = filePath;
    return PartialView(); // 改为返回分部视图
}

2. 为主页面的文档显示区域添加容器ID #

确保文档视图的渲染结果被包裹在可定位的容器中，方便后续更新：

<div id="documentContainer">
    @if (Model.EmployeeDocImg != null)
    {
        @Html.Action("ViewSanctionDocument", "TransactionSanction", new { id = @Model.Id })
    }
    else
    {
        <div class="dt-center justify-content-center col-md-12">
            <img class="rounded-lg figure-img img-fluid col-md-8" id="empimgPreview" src="../../Images/no-image.jpg" />
        </div>
    }
</div>

3. 修复上传Ajax代码 #

修正回调逻辑，上传成功后重新请求最新的文档分部视图并更新容器：

$('#btnEmpSancSave').change(function () {
    var empNo = $(this).attr('bId');
    var data = new FormData();
    var files = $(this).get(0).files;

    if (files.length > 0) {
        data.append("MikeImages", files[0]);
        data.append("EmployeeId", empNo);
    }

    $.ajax({
        url: '@Url.Action("SanctionDocumentSavingImage", "TransactionSanction")',
        type: "POST",
        processData: false,
        contentType: false,
        data: data,
        success: function () {
            // 上传成功后重新获取文档视图并替换容器内容
            $.get('@Url.Action("ViewSanctionDocument", "TransactionSanction")', { id: '@Model.Id' }, function (partialHtml) {
                $("#documentContainer").html(partialHtml);
            });
        },
        error: function () {
            alert("文件上传失败");
        }
    });
});

4. 确保上传Action正确更新数据 #

SanctionDocumentSavingImage需完成两个关键操作：

• 将上传文件保存到服务器指定路径
• 更新对应员工记录的EmployeeDocImg字段（数据库），确保ViewSanctionDocument能获取到新的文件路径

额外注意事项 #

• 验证文件上传路径的权限，确保DocumentViewer能访问到上传后的文件
• 若存在缓存问题，可在ViewSanctionDocumentAction中添加禁用缓存的响应头：

Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();

内容的提问来源于stack exchange，提问作者Ephraim Ross Jacinto