第一次提交 Ajax 表单有效，但第二次提交没有任何作用

Question

我想通过 ajax 添加和删除国家/地区对象的本地化名称。因此我建立了两个局部视图。第一个包含国家/地区对象的通用编辑功能，第二个部分视图（将在第一个视图中呈现）包含添加/删除本地化名称的逻辑。

第一个部分视图：

@model CountryViewModel

// scripts here

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
    [...] // the fields of the object to edit...
    </fieldset>
}

// this tag will be updated by the partial view
<div id="localizedNamesOverview"> 

@Html.Partial( "LocalizedNamesOverview",
               Model.LocalizedNames,
              new ViewDataDictionary 
              { 
                 { "countryId", Model.CountryId } 
              } )

</div>

第二个部分视图：

@model IEnumerable<LocalizedNameViewModel>

<table>

@foreach (var item in Model) 
{
    <tr>
        <td> @item.Language </td>
        <td> @item.Name </td>
        <td>
            @Ajax.ActionLink( "Delete",
                              "DeleteLocalizedName",
                              "Country",
                              new { countryId = this.ViewData[ "countryId" ], 
                                    localizedNameId = item.CountryI18nId },
                              new AjaxOptions
                              {
                                 UpdateTargetId="localizedNamesOverview",
                                 InsertionMode=InsertionMode.Replace,
                                 HttpMethod="POST"
                              } )
        </td>
    </tr>
}

@using( Ajax.BeginForm( "AddLocalizedName",
                        "Country",
                        new { countryId = this.ViewData[ "countryId" ] },
                        new AjaxOptions
                        {
                           UpdateTargetId = "localizedNamesOverview",
                           InsertionMode = InsertionMode.Replace,
                           HttpMethod = "POST"
                        } ) )
{
   <tr>
      <td> <input class="text-box single-line" id="LanguageId" name="LanguageId" value="" type="text" /> </td>
      <td> <input class="text-box single-line" id="Name" name="Name" value="" type="text" /> </td>
      <td> <input type="submit" value="Add new localized name" /> </td>
   </tr>
}

</table>

当添加或删除本地化名称时，专用控制器返回第二个部分视图，并通过将内容添加到第一个视图的“localizedNamesOverview”中来替换自身。到目前为止，这符合我的预期。

现在的问题是这种行为只能起作用一次。如果我成功添加或删除了一个名称，我将无法删除/添加第二个名称。目前我看不出问题出在哪里，因为生成的 html 在第一次提交后看起来是相等的。

如有任何帮助，我们将不胜感激。
谢谢

Answer 1

好吧，我弄清楚问题是什么：

当发出第一个请求并且重新渲染第二个部分视图时，它会丢失来自父级的 ViewData 信息（countryId），这是生成工作链接所需的（删除每个现有本地化名称的链接）。

同样的问题也适用于周围的 ajax-form，它也会丢失 id。通过对代码进行一些重新定位，我可以解决这个问题。我将 @using( Ajax.BeginForm... 代码从第二个部分视图放置到父视图中，以便在 ajax 请求后不会重新生成。

第一个部分视图（更新）：

@using( Ajax.BeginForm( "AddLocalizedName",
                        "Country",
                        new { countryId = this.ViewData[ "countryId" ] },
                        new AjaxOptions
                        {
                          UpdateTargetId = "localizedNamesOverview",
                          InsertionMode = InsertionMode.Replace,
                          HttpMethod = "POST"
                        } ) )
{

// this tag will be updated by the partial view
<div id="localizedNamesOverview"> 

@Html.Partial( "LocalizedNamesOverview",
               Model.LocalizedNames,
               new ViewDataDictionary 
               { 
                  { "countryId", Model.CountryId } 
               } )

</div>

}

删除-link 问题可以解决，因为我的模型 LocalizedNameViewModel 还包含专用的 countryId，所以我从那里获取

第二个部分视图（更新）：

@Ajax.ActionLink( "Delete",
                  "DeleteLocalizedName",
                  "Country",
                  new { countryId = item.CountryId, // took countryId from the model
                        localizedNameId = item.CountryI18nId },
                  new AjaxOptions
                      {
                        UpdateTargetId="localizedNamesOverview",
                        InsertionMode=InsertionMode.Replace,
                        HttpMethod="POST"
                      } )