Ошибка команды jQuery .append (html)

Question

Я использую вызов jQuery/Ajax для добавления частичного представления к таблице. Когда страница загружается, частичный вид создается правильно. Однако, как только использование пытается добавить другой элемент в таблицу, форматирование неверно, несмотря на то, что используется тот же самый частичный вид.

Вот таблица. Когда эти нагрузки, элементы загружаются на страницу правильно, как на рисунке ниже показано:

 <table id="fixedRows"> 
    <thead> 
     <tr> 
      <th>State Code</th> 
      <th>Agent ID</th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody>  
    @foreach (var item in Model.BankListAgentId) 
    {      
     if (!String.IsNullOrWhiteSpace(item.AgentId) && item.FixedOrVariable.Equals("F")) 
     { 
      @Html.EditorFor(model => item, "FixedPartialView")      
     } 
    } 
</tbody> 
</table> 
<br /> 
<a href="#" class="addFixed">Add Another</a> 

После того, как вы нажмете на Add another ссылку, этот вызов JQuery/Ajax является activiated

<script type="text/javascript"> 
    $(document).ready(function() { 

     $(".addFixed").click(function() { 
      //alert('test'); 
      event.preventDefault();   
      $.ajax({ 
       url: '@Url.Action("BlankFixedRow", "BankListMaster")', 
       cache: false, 
       success: function (html) { $("#fixedRows").append(html); } 
      }); 
     }); 

     $("#addVariable").click(function() { 
      event.preventDefault(); 
      $.ajax({ 
       url: '@Url.Action("BlankFixedRow", "BankListMaster")', 
       cache: false, 
       success: function (html) { $("#variableRows").append(html); } 
      }); 
     }); 

    }); 


</script> 

Этот метод jQuery вызывает этот метод от контроллера

public ViewResult BlankFixedRow() 
    { 
     SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" }); 
     ViewBag.StateCodeList = tmpList; 

     return View("FixedPartialView", new BankListAgentId()); 
    } 

Что вызывает этот частичный вид EDIT (пара человек заметил id тег отсутствует в <tr>, это была просто ошибка копирования/вставки для этой должности, фактический код имеет id тег)

@model Monet.Models.BankListAgentId 

@{ 
    Layout = null; 
} 
    @using (Html.BeginCollectionItem("BankListAgentId")) 
    { 
     <tr id="item-@Model.AgentId"> 
      <td> 
       @Html.DropDownListFor(model => model.StateCode, 
        (SelectList)ViewBag.StateCodeList, Model.StateCode) 
      </td> 
      <td> 
       @Html.EditorFor(model => model.AgentId) 
       @Html.ValidationMessageFor(model => model.AgentId) 
      </td> 
      <td> 
       <a href="#" class="deleteRow">delete</a> 
      </td> 
      @*<td><a href="#" onclick="$('#item-@Model.AgentId').parent().remove();" style="float:right;">Delete</a></td>*@ 
     </tr> 
    } 

Это такое же частичный вид, который вызывается при первой загрузке страницы, какая часть почему я запутался, что конечный результат после удара Add another ссылки оказывается, глядя, как этого

EDIT

Если вы нажмете на ссылку Add another дважды, это результат

EDIT

Я попытался следующие JQuery sucess команды не повезло

success: function (html) { $("#fixedRows > tbody:last").append(html); } 
success: function (html) { $("#fixedRows tr:last").after(html); } 
success: function (html) { $("#fixedRows > tbody").append(html); } 

Вот HTML, который отображается после ссылки Add another. щелкнул. Я включил тег открытия <form> для формы ниже, чтобы показать, что новые строки нигде не найдены.

<form action="/BankListMaster/Edit/11" method="post">   
    <fieldset> 
     <legend>Stat(s) Fixed</legend> 
     <table id="fixedRows"> 
      <tr> 
       <th>State Code</th> 
       <th>Agent ID</th> 
       <th></th> 
       <th></th> 
      </tr> 

      <tr id="item-1164998320"> 
       <td> 
        <select id="item_StateCode" name="item.StateCode"><option value="">HI</option> 
         <option>AL</option> 
         .. 
         <option>WY</option> 
        </select> 
       </td> 
       <td> 
        <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998320" /> 
        <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span> 
       </td> 
       <td> 
        <a href="#" class="deleteRow">delete</a> 
       </td> 
      </tr>  
      <tr id="item-1164998219"> 
       <td> 
        <select id="item_StateCode" name="item.StateCode"> 
         <option value="">HI</option> 
         <option>AL</option> 
         .. 
         <option>WY</option> 
        </select> 
       </td> 
       <td> 
        <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998219" /> 
        <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span> 
       </td> 
       <td> 
        <a href="#" class="deleteRow">delete</a> 
       </td> 
      </tr>  
      <tr id="item-0352926603"> 
       <td> 
        <select id="item_StateCode" name="item.StateCode"> 
         <option value="">GA</option> 
         <option>AL</option> 
         .. 
         <option>WY</option> 
        </select> 
       </td> 
       <td> 
        <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="0352926603" /> 
        <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span> 
       </td> 
       <td> 
        <a href="#" class="deleteRow">delete</a> 
       </td> 
      </tr>    
     </table> 
     <br /> 
     <a href="#" class="addFixed">Add Another</a> 
    </fieldset> 
</form>  
<a href="#" class="addFixed">Add Another</a> 
<form action="/BankListMaster/Edit/11" method="post"> 

EDIT

Вот снимок экрана стола в отладчике Chrome после ссылку Add Another щелкают. Как вы можете видеть, данные, вытащенные из таблицы, загружаются должным образом в соответствующие теги <tr>, однако пустая строка (которая отправляется через тот же частичный вид, что и остальные) не имеет ни одного из элементов таблицы.Снимок экрана ниже, показывает ответ, однако, который не включает в себя <tr> теги

EDIT

Я поставил console.log(html) строку в функции success Ajax, так что теперь читает

  success: function (html) { 
       console.log(html); 
       $("#fixedRows > tbody").append(html); 
      } 

Вот консольный выход (состояние отредактировано для удобства чтения)

<input type="hidden" name="BankListAgentId.index" autocomplete="off" value="3f7e0a92-8f20-4350-a188-0725919f9558" /> 
     <tr> 
      <td> 
       <select id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__StateCode" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].StateCode"> 
        <option>AL</option> 
        .. 
        <option>WY</option> 
       </select> 
      </td> 
      <td> 
       <input class="text-box single-line" id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__AgentId" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].AgentId" type="text" value="" />     
      </td> 
      <td> 
       <a href="javascript:void(0)" class="deleteRow">delete</a> 
      </td>    
     </tr> 

Answer 1

Какой полный кошмар ...

Во-первых, HTML, который возвращается, как просматриваться в отладчике Chrome был хорошо, однако, когда я нажал на «View Source» для страницы, я не мог видеть ничего но то, что первоначально было загружено. Найдя this post, я обнаружил, что это нормально. Затем я использовал this Chrome add-on, чтобы наконец увидеть, что теги <tr> и <td> были удалены. Просто добавив тег открытия и закрытия в оператор append, я получил возвращенные элементы для добавления в таблицу.

$(".addFixed").click(function() { 
     $.ajax({ 
      url: '@Url.Action("BlankFixedRow", "BankListMaster")', 
      dataType: 'html', 
      cache: false, 
      success: function (html) { 
       $("#fixedRows > tbody").append('<tr>' + html + '</tr>'); 
      } 
     }); 
    }); 

Answer 2

Я вижу здесь несколько вещей. Вы ссылаетесь на <tbody> в некоторых своих кодах, но я не вижу его нигде на странице. Поэтому сначала я бы предложил использовать <thead> и <tbody>. В вашем частичном представлении я вижу <tr "item-@Model.AgentId">, который должен иметь идентификатор.

Вы также должны удалить обработчик onclick и кнопку удаления и вставить его вместе с остальной частью вашего JavaScript. Вместо этого установите класс в своих ссылках на удаление.

Для ссылки, которые не нуждаются в URLs и используются только для подключения обработчиков JavaScript, я рекомендую использовать href="javascript:void(0)" как это предотвратит браузер от делать ничего особенного с href="#" так, то вы будете в состоянии удалить вызовы preventDefault() ,

Что касается источника вашей проблемы, то $("#fixedRows tbody").append(html) - это код, который вы хотите, поэтому не нужно попробовать after(). Похоже, ваш html становится лишенным. Попробуйте установить атрибут dataType в вызове $.ajax() на номер html.