Первая отправка формы Ajax работает, но вторая отправка ничего не делает

#ajax #asp.net-mvc-3 #form-submit

#ajax #asp.net-mvc-3 #форма-отправка

Вопрос:

Я хочу добавлять и удалять локализованные имена для объекта country через ajax. Поэтому я построил два частичных представления. Первая содержит общую функцию редактирования для объекта country, а второе частичное представление (которое будет отображаться внутри первого) содержит логику для добавления / удаления локализованных имен.

1-й частичный просмотр:

 @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>
  

2-й частичный просмотр:

 @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>
  

Выделенный контроллер возвращает 2-е частичное представление при добавлении или удалении локализованного имени и заменяет себя, добавляя содержимое в localizedNamesOverview из 1-го представления. Пока это работает так, как я ожидал.

Проблема сейчас в том, что это поведение работает только один раз. Если я успешно добавил или удалил имя, я не могу удалить / добавить второе. На данный момент я не вижу, в чем проблема, потому что сгенерированный html выглядит равным после первой отправки.

Любая помощь приветствуется.
Спасибо

Ответ №1:

Хорошо, я понял, в чем проблема:

Когда выполняется первый запрос и повторно отображается 2-й частичный вид, он теряет информацию ViewData ( countryId ) от родительского элемента, которая необходима для создания рабочих ссылок (delete-link для каждого существующего локализованного имени).

Та же проблема относится и к исходной ajax-форме, которая также теряет идентификатор. С помощью некоторого изменения положения кода я мог бы решить проблему. Я поместил @using( Ajax.BeginForm... код из 2-го частичного представления в родительское представление, поэтому он не будет восстановлен после ajax-запроса.

1-й частичный просмотр (обновленный):

 @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>

}
  

Проблема с удалением ссылок может быть решена, потому что моя модель LocalizedNameViewModel также содержит выделенную countryId , и поэтому я беру ее оттуда.

2-й частичный просмотр (обновленный):

 @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"
                      } )