Question

我正在使用.NET Core 3.0构建一个Web应用程序，其中包含用于值列表的EditorTemplate。此EditorTemplate在PartialView内部。每当我从列表中添加或删除记录时，都会从ActionMethod返回PartialView。

困惑是，每当我从列表的顶部/中间删除一条记录时，EditorTemplate就会混乱。请检查下面的图像。

问题1：为什么会发生以及如何解决？

问题2：为什么在我使用<input type="text" asp-for="FilterId" class="form-control" />和<input type="text" value="@Model.FilterId" />时值会有所不同

删除之前

删除后

AdvancedFilterVM EditorTemplate

@model SSAQ.Web.ViewModels.AdvancedFilterVM

<tr>
    <td>
        <input type="text" asp-for="FilterId" class="form-control" />
    </td>
    <td>
        @Html.TextBoxFor(m => m.FilterId, new { @class="form-control" })
    </td>
    <td>
        <input type="text" value="@Model.FilterId" class="form-control" />
    </td>
    <td style="text-align:center;vertical-align:middle;">
        <a href="#" class="deleteFilter" data-filterid="@Model.FilterId"><i style="font-size:20px;" class="fa fa-times"></i></a>
    </td>
</tr>

_SurveyFilter PartialView

@model SSAQ.Web.ViewModels.SurveySubmissionViewModel
@if (Model.AdvancedFilter?.Any() == true)
{
<table class="table" id="tblFilter">
    <thead>
        <tr>
            <th>Using asp-for=FilterId</th>
            <th>Using @@Html.TextBoxFor(m => m.FilterId)</th>
            <th>Using value=@@Model.FilterId</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody id="tblFilterSurvey">
        @Html.EditorFor(m => m.AdvancedFilter)
    </tbody>
</table>
}

jQuery删除行

$('body').on('click', '.deleteFilter', function (e) {
    e.preventDefault();
    var filterId = $(this).data('filterid');
    var formData = $("#formFilter").serializeArray();
    formData.push({ name: 'filterId', value: filterId });
    $.ajax({
        type: 'POST',
        context: this,
        url: '@Url.Content("~/Survey/DeleteFilterRow")',
        data: formData,
        success: function (response) {
            $('#filterTableDiv').html(response);
        }
    });
});

DeleteFilterRow操作方法

public IActionResult DeleteFilterRow(SurveySubmissionViewModel surveySubmissionVM, Guid filterIdToRemove)
{
    surveySubmissionVM.AdvancedFilter.Remove(surveySubmissionVM.AdvancedFilter.Single(m => m.FilterId == filterIdToRemove));
    return PartialView("_SurveyFilter", surveySubmissionVM);
}

Answer 1

我可以重现同样的问题。我以为是缓存造成的。但事实并非如此。它确实使我耳熟能详：EditorFor在Model之前使用ModelState渲染模板。

快速修复：

在渲染之前清除ModelState：

ModelState.Clear();
return PartialView("_SurveyFilter", surveySubmissionVM);

其他技术信息：

引自MSDN Blog：

ASP.NET MVC假定... 因此，Html帮助器实际上会在查看模型状态之前在ModelState中检入要显示在字段中的值。这样，他们可以重新显示用户输入的错误数据，并在需要时显示匹配的错误消息。

还有一些在线话题在线讨论这种行为：

（尽管它们都是关于ASP.NET的，但该理论也适用于ASP.NET Core）

EditorTemplate asp-for =“ Property” vs value =“ @ Model.Property”

1 个答案:

快速修复：

其他技术信息：