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

Posted 2023-04-13

【中文标题】使用 ajax 在 .net 核心中正确重新加载部分视图

【英文标题】：Correctly reload partial view in .net core using ajax

【发布时间】：2021-09-13 22:44:01

【问题描述】：

这里的目标是在 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; 

【参考方案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 ); 

【讨论】：

哈哈。天哪，我只记得在 6 个月前遇到过这个问题，但它的形式不同。是的，我的自定义 html 助手只是使用默认的。非常感谢

刚刚做了。对此感到抱歉