自动 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);
  }
});

自动 ajax 刷新后，手动刷新局部视图不起作用

Manually refreshing partial view doesn't work after automatic ajax refresh

ajax

asp.net-mvc

jquery

partial-views