.NET 8 Razor页面提交数据后局部视图未更新问题排查

基于.NET 8.0 Razor框架构建打印业务订单管理Web应用，需求是订单项添加到购物车后局部更新购物车内容。目前提交操作可成功上传图片并保存数据，但返回的局部视图直接覆盖整个页面，而非替换主视图中的<partial>标签。

核心错误点 #

• 表单默认提交未阻止：点击按钮时，浏览器同时执行AJAX请求和表单的默认同步提交，导致页面被局部视图内容替换。
• AJAX文件上传方式错误：serialize()方法无法处理文件类型，实际是默认表单提交完成了文件上传，AJAX请求并未正确传递文件数据。
• Partial标签ID无效：<partial>标签的id属性不会渲染到最终HTML中，JS无法通过$("#orderItems")定位到目标元素。

修复方案 #

1. 阻止表单默认提交行为 #

修改按钮点击事件，添加event.preventDefault()避免同步提交：

document.getElementById('addOrderItem').addEventListener("click", function (event) {
    // 阻止浏览器默认表单提交行为
    event.preventDefault();
    // 后续AJAX逻辑
});

2. 正确处理文件上传的AJAX请求 #

使用FormData对象传递表单数据（包含文件），并配置AJAX的必要参数：

document.getElementById('addOrderItem').addEventListener("click", function (event) {
    event.preventDefault();
    const formData = new FormData(document.getElementById('orderItemForm'));
    $.ajax({
        url: '/CustomerOrder?handler=OrderItem',
        method: "POST",
        data: formData,
        // 必须设置这两个属性以支持文件上传
        processData: false,
        contentType: false,
        success: function (result) {
            $("#orderItemsContainer").html(result);
        }
    });
});

3. 给Partial视图添加可定位的容器 #

<partial>标签本身不会生成带ID的DOM元素，需用容器包裹：

<!-- 替换原<partial>标签 -->
<tbody id="orderItemsContainer">
    <partial name="_OrderItemsPartial" model="Model.Order.OrderItems" />
</tbody>

4. 修正后端异步文件上传逻辑 #

CopyToAsync是异步方法，需添加await确保文件完全写入后再读取尺寸：

using (var fileStream = new FileStream(filePath, FileMode.Create))
{
    await Upload.CopyToAsync(fileStream);
}

5. 修正Partial视图的输出语法 #

@Html.DisplayFor用于模型属性绑定，直接输出变量即可避免多余分号：

@using Printing.Models
@model List<OrderItem>

@foreach (var orderItem in Model)
{
    string fileName = System.IO.Path.GetFileName(orderItem.Artwork.FilePath);
    string itemType = orderItem.ItemType.ToString();
    <tr>
        <td>@fileName</td>
        <td>@orderItem.Artwork.Artist</td>
        <td>@orderItem.HeightInInches</td>
        <td>@orderItem.WidthInInches</td>
        <td>@itemType</td>
        <td>@orderItem.Quantity</td>
    </tr>
}

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