自动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 刷新，任何手动提交和刷新局部视图的尝试都不起作用。它不是在父项中刷新局部视图，而是重定向到局部视图并将其作为唯一的东西显示在屏幕上。如果您在自动刷新之前更改下拉菜单，它可以正常工作。

有人知道会发生什么吗？如果您需要更多代码发布，请告诉我，我已尝试将其保留为我认为的主要内​​容。

编辑

局部视图

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