Вновь обновляемый частичный вид не работает после автоматического обновления ajax

Question

У меня есть частичный вид на моей индексной странице, на которой показан список записей. Каждые 10 секунд этот частичный вид обновляется автоматически с помощью JQuery/Ajax, используя следующий код:

$(document).ready(function() { 
     setInterval(function() {    
      ReloadSummary(); 
     }, 10000); 

    }); 

function ReloadSummary() 
{ 
     $.ajax({ 
      url: "@Url.Action("FaultSummary", "Fault")", 
      type: 'GET', 
     dataType: 'html', 
     cache: false, 
     success: function (html) { 
      $('#FaultSummary').html(html); 
     } 
    }); 
} 

Я недавно положил в графическую кнопку внутри самого представления, который показывает выпадающее меню и позволяет пользователю, чтобы обновить просмотр с различными параметрами. Событие onchange выпадающего меню, чтобы отправить представление, которое затем отправляет выбранное значение и обновляет представление.

@Html.DropDownList("area", (SelectList)ViewData["Area"], "Select...", new { @class = "form-control", @onchange = "this.form.submit()" }) 

Это OnChange работает, как ожидалось, но после того, как Ajax обновления уволила, любая попытка вручную представить и обновить частичный вид не работает. Вместо обновления частичного представления внутри родителя он перенаправляет на частичный вид и отображает это как единственную вещь на экране. Если вы измените раскрывающийся список перед автоматическим обновлением, он отлично работает.

Кто-нибудь знает, что может случиться? Если вам нужна дополнительная проводка кода, дайте мне знать, я попытался сохранить ее в соответствии с тем, что, по моему мнению, было основным битом.

EDIT

Частичный вид

@using (Html.BeginForm("FaultSummary", "Fault", FormMethod.Get, new { id = "summaryForm" })) 
{ 
    <div class="col-sm-12" style="padding-left: 0; padding-right:0;"> 
     <div class="summarybox summaryboxshadow" style="padding-bottom:0;padding-left: 0; padding-right:0;"> 
      <div class=""> 
       <div style="padding-top:10px"></div> 
       <div class="summaryTag-Green" style="white-space:nowrap"> 
        <div class="row"> 
         <div class="col-sm-9"> 
          <h4 style="display: inline-block"><span>Jobs Assigned to @ViewData["Area"] [@Model.Count().ToString()]</span></h4> 
         </div> 
         <div class="col-sm-2"> 
          <span id="areaDropdown" style="padding-top:3px; visibility:hidden;"> 
           @Html.DropDownList("area", (SelectList)ViewData["Area"], "Select...", new { @class = "form-control", }) 
          </span> 
         </div> 
         <div class="col-sm-1" style="float:right;"> 
          <img class="areaIcon" src="~/Content/Images/area.png" alt="Change Area" title="Change Area" onclick="toggleArea()" /> 
         </div> 
        </div> 
       </div> 
       <div style="padding-left: 15px; padding-right:15px;"> 
        <div style="max-height: 400px; overflow-y: auto;"> 
         <table class="table table-responsive"> 
          <tr> 
           <th></th> 
           <th> 
            @Html.DisplayNameFor(model => model.ReportedDate) 
           </th> 
           <th> 
            @Html.DisplayNameFor(model => model.ReportedBy) 
           </th> 
           <th> 
            @Html.DisplayNameFor(model => model.Description) 
           </th> 
           <th> 
            @Html.DisplayNameFor(model => model.JobStatus) 
           </th> 
           <th> 
            @Html.DisplayNameFor(model => model.Priority) 
           </th> 
           <th> 
            @Html.DisplayNameFor(model => model.assigned_to) 
           </th> 
           <th> 
            @Html.DisplayNameFor(model => model.assigned_by) 
           </th> 
           <th> 
            @Html.DisplayNameFor(model => model.Last_edit_dt) 
           </th> 
          </tr> 
          @foreach (var item in Model.Take(5)) 
          { 
           <tr> 
            <td> 
             @Html.ActionLink(item.ID.ToString(), "Edit", new { id = item.ID }) 
            </td> 
            <td> 
             @Html.DisplayFor(modelItem => item.ReportedDate) 
             @Html.DisplayFor(modelItem => item.ReportedTime) 
            </td> 
            <td> 
             @Html.DisplayFor(modelItem => item.ReportedBy) 
            </td> 
            <td> 
             @Html.DisplayFor(modelItem => item.Description) 
            </td> 
            <td> 
             @Html.DisplayForLookup(modelItem => item.JobStatus, "JobStatus") 
            </td> 
            <td> 
             @Html.DisplayFor(modelItem => item.Priority) 
            </td> 
            <td> 
             @Html.DisplayForUserCode(modelItem => item.assigned_to) 
            </td> 
            <td> 
             @Html.DisplayFor(modelItem => item.assigned_by) 
            </td> 
            <td> 
             @Html.DisplayFor(modelItem => item.Last_edit_dt) 
            </td> 
           </tr> 
          } 
         </table> 
        </div> 
        @if (Model.Count() > 5) 
        { 
         <div> 
          @Html.ActionLink("Load More...", "Index", "Fault", new { Area = ViewData["Area"] }, null) 
         </div> 
        } 
       </div> 
      </div> 
     </div> 
    </div> 
} 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#area").change(function(){ 
      $("#summaryForm").submit(); 
     }); 
    }); 

    function toggleArea() { 
    if ($('#areaDropdown').css('visibility') == 'hidden') 
     $('#areaDropdown').css('visibility', 'visible'); 
    else 
     $('#areaDropdown').css('visibility', 'hidden'); 
} 
</script> 

Контроллер

public PartialViewResult FaultSummary(string area = null) 
{ 
    IList<tblfault> results; 

    ViewData["ShowArea"] = area; 
    ViewData["Area"] = new SelectList(_faultRepository.GetAreas(), "areacode", "areaname", null); 

    results = _faultRepository.GetSummary(area); 

    return PartialView("_FaultSummary", results); 

} 

Answer 1

Вызов $('#summaryForm').submit() вызовет форму, чтобы сделать полный постбэк, не Аякса представить, что это почему он возвращается только частичный. Измените его так:

$.ajax({ 
    url: '@Url.Action("FaultSummary", "Fault")', 
    type: 'GET', 
    data: { area: $('#summaryForm').serialize() } 
    dataType: 'html', 
    cache: false, 
    success: function (html) { 
    $('#FaultSummary').html(html); 
    } 
});