为什么部分错误时会返回重复的部分视图

Question

我有一个呈现部分视图的 .net MVC 项目。

按钮应该使用 jquery 附加一个部分，该部分工作正常，但当我发送表单时会出现问题。

附加 HTML 的代码：

function OnPpaContainerClick() {
  const ppaBtn = $(".add-ppa-btn");
  ppaBtn.off();

  ppaBtn.on("click", function (event) {
    event.preventDefault();

    const mfoContainer = $(this).parents(".mfo-container");
    const mfoIdx = mfoContainer.data("mfoidx");
    const ppaIdx = mfoContainer.children(".ppa-container").length;

    $(mfoContainer).append(CreatePpa(mfoIdx, ppaIdx));
  });
}

部分家长：

@for (int i = 0; i < Model.Mfos.Count; i++)
  {

    ViewData["MfoIndex"] = i;
    <div class="custom-border-color mfo-container mt-2 border border-2 rounded" data-mfoidx="@i">
      <div class="p-2 pe-0 d-flex flex-row gap-2">
        @* <input type="hidden" name="Mfos[@i].Id" value="@(Model.Mfos[@i].Id)" /> *@

        <div class="form-floating form-group col-1 gap-2">
          <input style="height: 4rem" type="text" id="Mfos[@i].Title" name="Mfos[@i].Title" class="form-control"
            value="@(Model.Mfos[@i].Title)" />
          <label name="Mfos[@i].Title" class="control-label text-black">MFO No.</label>
        </div>

        <div class="form-floating form-group col-3 gap-2">
          <textarea style="height: 4rem" class="form-control" name="Mfos[@i].Description"
            value="@(Model.Mfos[@i].Description)"> </textarea>
          <label id="Mfos[@i].Description" name="Mfos[@i].Description" class="control-label text-black">
            Title</label>
        </div>

        <div class="my-auto">
          <button type="button" class="add-ppa-btn btn btn-primary">Add PPA</button>
        </div>
      </div>
      @for (int ppaIdx = 0; ppaIdx < Model.Mfos[i].Ppas.Count; ppaIdx++)
      {
        ViewData["ppaIdx"] = ppaIdx;
        <partial name="Shared/_Ppa" view-data="ViewData" />
      }
    </div>
  }

偏孩子

<div class="ppa-container">
  @for (int ppaIdx = 0; ppaIdx < @Model.Mfos[MfoIndex].Ppas.Count; ppaIdx++)
  {
    @ppaIdx
    <div class="ppa-case ps-2 pb-0 d-flex flex-row">
      @* <input type="hidden" name="Mfos[@MfoIndex].Ppas[@ppaIdx].Id" value="@(Model.Mfos[@MfoIndex].Ppas[@ppaIdx].Id)" />
    *@

      <div class="form-floating form-group col-2">
        <input style="height: 4rem" id="Mfos[@MfoIndex].Ppas[@ppaIdx].Title" name="Mfos[@MfoIndex].Ppas[@ppaIdx].Title"
          class="form-control border-bottom-0 border-end-0 rounded-0 pe-0"
          value="@Model.Mfos[@MfoIndex].Ppas[@ppaIdx].Title" />
        <label name="Mfos[@MfoIndex].Ppas[@ppaIdx].Title" class="control-label text-black">PPA No.</label>
      </div>

      <div class="form-floating form-group col-3">
        <textarea style="height: 4rem" class="form-control border-bottom-0 rounded-0"
          name="Mfos[@MfoIndex].Ppas[@ppaIdx].Description"
          value="@Model.Mfos[@MfoIndex].Ppas[@ppaIdx].Description"> </textarea>
        <label id="Mfos[@MfoIndex].Ppas[@ppaIdx].Description" name="Mfos[@MfoIndex].Ppas[@ppaIdx].Description"
          class="control-label text-black">
          Title
        </label>
      </div>
    </div>
  }
</div>

创建控制器：

 public async Task<ActionResult> Create(OpcrVM model)
  {
    if (ModelState.IsValid)
    {
      await _opcrService.Create(model);
      return RedirectToAction(nameof(Index));
    }
    ViewData["UserSelectList"] = await GetUserSelectList();
    ViewData["TimelinessOptions"] = GenerateTimelinessOptions();

    return View(model);
  }

我还会检查模型是否数据重复，但事实并非如此。

我还检查浏览器上发送的http请求除了响应之外是否正确。它呈现重复项。

浏览器请求：

浏览器响应：

Answer 1

提交表单时，如果出现错误（例如，如果

ModelState.IsValid

为

false

），则会使用

View(model);

操作中的

Create

语句重新渲染表单。

这会导致视图包含每个

Mfo

的现有部分视图，包括任何附加的部分视图，从而导致重复，因为客户端 javascript 还会附加额外的部分视图。