手動刷新局部視圖在自動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); 
    } 
});