Question

我在索引页面上有一个部分视图，显示了一个记录列表。每隔10秒，这个局部视图会通过jQuery / Ajax自动更新，使用以下代码：

jQuery

我最近在视图中放入了一个图像按钮，显示一个下拉框，允许用户使用不同的参数刷新视图。下拉列表的onchange事件设置为提交视图，然后提交所选值并刷新视图。

$(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正在按预期工作，但是一旦ajax刷新触发，任何手动提交和刷新局部视图的尝试都不起作用。它不是刷新父视图中的局部视图，而是重定向到局部视图并将其显示为屏幕上的唯一视图。如果在自动刷新之前更改下拉列表，则可以正常工作。

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

修改

部分视图

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

控制器

@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>

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刷新后手动刷新部分视图不起作用

1 个答案: