为什么这种在 ASP.NET Core 7 MVC 中添加动态行的方法似乎在我的 Razor 视图中返回 JSON？

问：

我正在尝试让几个不同的文本框动态输出。遵循此处找到的 ASP.NET Core 7 MVC 中动态添加行的模式，我能够将其实现到一个小型基本项目中，并且感觉我很好地掌握了他动态添加行的方法。

但是，我在尝试将相同的方法放入使用视图模型和 DTO 的大型项目（也是 .NET 7）时遇到了麻烦。我目前的努力只是产生了看起来像 DTO 的 JSON。

关于我做错了什么，或者我在尝试将这种方法实施到更复杂的项目中时是否遗漏了其他东西，有什么想法吗？最终，我试图使用尽可能少的 Javascript 为一个相当直接的排序系统创建动态行。我见过的大多数方法都只显示使用基本模型。

我的一些代码如下：

Razor 视图中显示的当前输出如下所示：

PurchaseOrderLineItemDto { PurchaseOrderLineItemId = 0, LineItemNumber = 0, LineItemDescription = , LineItemQuantity = 0, LineItemUnitPrice = 0, LineItemExtPrice = 0 }

视图

@model MvcApplication.ViewModels.PurchaseOrders.PurchaseOrderCreateViewModel
@{
    ViewData["Title"] = "Create new Order";
}

      <div class="row">
        <div class="container pt-4 table-responsesive text-nowrap" id="orderItemsContainer">
          <table class="table table-borderless" id="tblPurchaseOrderLineItems">
                        <thead>
                            @foreach (var orderLineItem in Model.PurchaseOrderLineItems)
                            {
                            <th>
                                @Html.DisplayNameFor(model => orderLineItem.LineItemDescription)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => orderLineItem.LineItemQuantity)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => orderLineItem.LineItemUnitPrice)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => orderLineItem.LineItemExtPrice)
                            </th>
                            }
                        </thead>
                        <tbody>
                            @Html.EditorFor(model => model.PurchaseOrderLineItems)
                        </tbody>
            
          </table>

查看模型类：

namespace MvcApplication.ViewModels.PurchaseOrders
{
    public record PurchaseOrderCreateViewModel
    {
        [DefaultValue(null)]
        public List<PurchaseOrderLineItemDto> PurchaseOrderLineItems { get; set; }

        public PurchaseOrderCreateViewModel()
        {
            PurchaseOrderLineItems = new List<PurchaseOrderLineItemDto>();
        }
    }
}

编辑器模板

@model MvcApplication.ViewModels.PurchaseOrders.PurchaseOrderCreateViewModel
<tr>
    <td class="col-8">
        @Html.TextBoxFor(m => m.PurchaseOrderLineItems, new {style="width: 100%", @class="form-control rounded-0", @type="text"})
    </td>
    <td>
    <td class="d-flex" style="width:20%;">
        <button class="btnDeleteLineItemRow btn btn-danger rounded-0 flex-fill" id="deleteLineItemRow"><i class="fa fa-trash"></i></button>
    </td>
</tr>

查看（由控制器方法调用以添加新行）EditorTemplate

@model MvcApplication.ViewModels.PurchaseOrders.PurchaseOrderCreateViewModel
@Html.EditorFor(model => model.PurchaseOrderLineItems)

添加新行项的控制器方法：

[HttpPost]
[Route("AddOrderItem")]
public async Task<ActionResult> AddOrderItem([Bind("PurchaseOrderLineItems")] PurchaseOrderCreateViewModel purchaseOrderCreateViewModel)
{
    purchaseOrderCreateViewModel.PurchaseOrderLineItems.Add(new PurchaseOrderLineItemDto());
    return PartialView("PurchaseOrderLineItems", purchaseOrderCreateViewModel);
}