手动刷新局部视图在自动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()" }) 

这平变化工作正常，但一旦AJAX刷新已经解雇，任何试图手动提交并刷新局部视图不起作用。它不是刷新父视图中的局部视图，而是重定向到局部视图，并将其显示为屏幕上的唯一内容。如果在自动刷新之前更改下拉菜单，它可以正常工作。

有谁知道可能发生了什么？如果你需要更多的代码发布然后告诉我，我试图保持它以我认为是主要的位开始。

编辑

管窥

@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提交，这是为什么它会回来只有部分。将其更改为：

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