使用 ajax 在 .net 核心中正确重新加载部分视图

Question

这里的目标是在 ajax 的创建请求通过后完全重新加载/刷新任务手风琴卡，以便可以重新创建下一个。我已经让它“工作”到了重新加载除名称、层和说明之外的所有其他内容的地步。这是重新加载结果的照片（bbbbb 和 Four 是用于创建最后一个任务的旧值）。 the result of the partial is reloaded。名称应该是 test，tier 是二。

在 ajax 调用之后调用 partialView 时，我检查了新的 viewModel 确实被传回，TaskingName 设置为 test，tier 设置为 2，并且填充了工作项列表。我只是不明白为什么原始值仍然显示为最后的值。谢谢

这是我负责返回部分视图的控制器操作

public ActionResult CreateTasking(TaskingTemplateModel viewmodel)
        => return PartialView("_TaskingTemplate", new TaskingTemplateModel { TaskingName = "test", TaskingTier = "Two", WorkItems = viewmodel.WorkItems });

这是我的ajax请求，cardBody是需要刷新内容的div容器

$('.create-for-parent').click((e) => {
  $.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize(),
    success(data) {
      cardBody.html(data);
    },
    error() {
      alert('couldnt refresh the view');
    },
  });
});

这是部分本身的 html 代码

<form id="create-tasking" action="/Workflow/CreateTasking" method="post" class="validate-submit">
            <div class="form-group form-inline">
                @Html.TextBoxGroupFor(m => m.TaskingName, new { @class = "h5" }, new { @class = "form-control flex-fill" })
            </div>
            <div class="form-group form-inline">
                @Html.DropdownGroupFor(m => m.TaskingTier, Model.TierOptions, new { @class = "h5" }, new { @class = "form-control flex-fill" })
            </div>
            <div class="form-group form-inline">
                @Html.TextAreaGroupFor(m => m.Instructions, 2, 12, new { @class = "h5" }, new { @class = "form-control flex-fill" })
            </div>
            <!--Task-->
            <div class="mb-2">
                <h5 class="d-inline-block">Subtaskings</h5>
            </div>
            <table id="subtaskings-table" class="table table-medium table-hover">
                <thead class="bg-info">
                    <tr>
                        <th>Potential Subtaskings</th>
                        <th>Work Order</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <partial name="_WorkTable" for="@Model.WorkItems" />
                </tbody>
            </table>
        </form>

最后，这是视图模型

public string TaskingName { get; set; }
public string TaskingTier { get; set; }
private string _instructions;
public string Instructions { get => _instructions; set => _instructions = value?.Trim(); }
public List<TableEntryModel> WorkItems { get; set; }

Answer 1

不确定如何自定义 Html 帮助程序，但我使用默认的 Html 帮助程序重现了该问题。默认 Html 助手显示 ModelState 值而不是 Model。只需在返回 Partial View 之前添加ModelState.Clear()：

public IActionResult CreateTasking(TaskingTemplateModel viewmodel)
{
    ModelState.Clear();
    return PartialView("_TaskingTemplate", new TaskingTemplateModel { TaskingName = "test", TaskingTier = "Two", WorkItems = viewmodel.WorkItems }); 
}