如果 ModelState 无效，ASP.NET MVC AJAX 更改 UpdateTargetId

Question

我使用一个内部有两个部分 View 的 View 。

<div id="matches">
    <% foreach (var item in Model)
       { %>
    <% Html.RenderPartial("RenderMatchesListRowUserControl", item); %>
    <% } %>
</div>
<div id="addMatchFormBox">    
    <% Html.RenderPartial("AddNewMatchUserControl");%>
</div>

第一个部分 View “RenderMatchesListRowUserControl”呈现一个简单的 div 元素(用于匹配列表)，第二个部分 View “AddNewMatchUserControl”呈现一个表单以在列表下方创建一个新的匹配项:

AddNewMatchUserControl 的来源:

<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

<% using (Ajax.BeginForm("Create", new AjaxOptions
   {
       UpdateTargetId = "matches",
       InsertionMode = InsertionMode.InsertAfter,
       OnSuccess = "flashit",
       OnFailure = "renderForm"
   }))
   {%>
<fieldset>
    <legend>New Match</legend>
    <p>
        <label for="DurationBetweenMovesInDays">
            Dauer (in Tagen) zwischen den Z&uuml;gen:</label>
        <%= Html.TextBox("DurationBetweenMovesInDays")%>
        <%= Html.ValidationMessage("DurationBetweenMovesInDays", "*")%>
    </p>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
<% } %>

根据 ModelState， Controller 返回新匹配条目的部分 View 或表单的部分 View ，以显示模型错误。

if (Request.IsAjaxRequest()) {
            return ModelState.IsValid ?    PartialView("RenderMatchesListRowUserControl", match) : PartialView("AddNewMatchUserControl");
        }

它工作正常，直到 ModelState 变得无效。在这种情况下，表单将呈现在匹配列表的末尾，因为 updatetargetid 引用包含匹配列表的 div 元素。为避免这种情况，必须更改 updatetargetid 以引用包含表单的 div 元素。但我不知道该怎么做。

Answer 1

我也遇到了同样的问题。如果模型状态无效，我想更新包含表单的 div 中的内容，如果成功保存，我想更新数据集合。所以我使用的技巧是不使用“UpdateTargetId”。我使用“OnSuccess”来处理它。

这是一个例子。

    @using (Ajax.BeginForm("SaveUser", new AjaxOptions{
HttpMethod = "Post",
LoadingElementId = "save-progress",
OnSuccess = "onUpdateSuccess"
InsertionMode = InsertionMode.Replace}))

这是一个 javascript 示例。

function onUpdateSuccess(response, xhr) {
     $('#progress-bar').css({ 'display': 'none' });
     if (response.indexOf('form') != -1) {
        $('#addOrEditUserForm').html(response);

     } else {
       $('#user-table').html(response);
       $('#addOrEditUserForm').html('')
 }

};