如何在asp.net mvc中通过jquery ajax删除行后更新列表？

Question

我的问题是当我删除一行并删除该行后它会隐藏在我的列表中，当我使用 IE 和 F5 刷新页面但该行仍然显示时。 chorme 和 firefox 工作正常。

列表视图：

@model  IEnumerable<PG.Admin.Models.TimeSheetHeaders.TimeSheetHeaderViewModel>

@{
   ViewBag.Title = "";
   Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")

<div id="unobtrusive">
    @Html.Partial("_TimeSheetList", Model)
</div>

_ListTimeSheet（部分视图）

@model PagedList.IPagedList<PG.Admin.Models.TimeSheetHeaders.TimeSheetHeaderViewModel>
@using PagedList.Mvc;

        <table class="table table-striped">
        <tbody>

            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.First().Date)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.First().PGId)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.First().OutletID)
                </th>
                <th></th>
            </tr>

            @foreach (var group in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(model => group.Date)</td>
                    <td>@Html.DisplayFor(model => group.PGId)</td>
                    <td>@Html.DisplayFor(model => group.OutletID)</td>
                    <td>
                        @Html.ActionLink("Delete", "DeleteTimeSheetConfirmed", new { id = group.Id }, new { @id = group.Id, @class = "delete-timesheet" })
                    </td>
                </tr>
            }
        </tbody>
    </table>

    <div class="dataTable-paging">
        <div class="row">
            <div class="col-xs-6">
                <div class="paging-info">
                    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
                </div>
            </div>
            <div class="col-xs-6">
                <div class="paging-content">
                    @Html.PagedListPager(Model, page => Url.Action("GroupListTimeSheet",
                         new { page, key = ViewBag.CurrentFilterKey, currentFilter = ViewBag.CurrentFilter }),
                                   PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "unobtrusive" }))
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">

    $('.delete-timesheet').on("click", function (e) {
        var flag = confirm('delete ?');
        if (flag) {
            e.preventDefault();
            var id = e.target.id;
            $.ajax({
                url: '@Url.Action("DeleteTimeSheetConfirmed", "TimeSheet")',
                type: 'POST',
                data: { id: id },
                dataType: "json",
                cache: false,
                success: function () {
                    $("#" + id).closest('tr').remove();
                },
                error: function () {
                    alert('Error!');
                }
            });
        }
        return false;
    });
</script>

控制器：

     public ActionResult GroupListTimeSheet(string key, string searchName, string currentFilter, int? page)
    {
        var groupTimeSheet = _timeSheetService.GroupTimeSheetByTimeSheetHeader().ToListViewModel();

        if (searchName != null)
        {
            page = 1;
        }
        else
        {
            searchName = currentFilter;
        }

        ViewBag.CurrentFilter = searchName;
        ViewBag.CurrentFilterKey = key;

        if (!String.IsNullOrEmpty(searchName) && key == "pgcode")
        {
            groupTimeSheet = groupTimeSheet.Where(m => m.PGId.Contains(searchName)).ToList();
        }

        if (!String.IsNullOrEmpty(searchName) && key == "quancode")
        {
            groupTimeSheet = groupTimeSheet.Where(m => m.OutletID.Contains(searchName)).ToList();
        }

        if (!String.IsNullOrEmpty(searchName) && key == "date")
        {
            groupTimeSheet = groupTimeSheet.Where(m => Convert.ToString(m.Date).Contains(searchName)).ToList();
        }

        int pageSize = 15;
        int pageNumber = (page ?? 1);

        if (Request.IsAjaxRequest())
        {
            return (ActionResult)PartialView("_TimeSheetList", groupTimeSheet.ToPagedList(pageNumber, pageSize));
        }
        else
        {
            return View(groupTimeSheet.ToPagedList(pageNumber, pageSize));
        }
    }

        [HttpPost]
        public ActionResult DeleteTimeSheetConfirmed(Int64 id)
        {
            var timeSheetHeader = _timeSheetService.GetTimeSheetHeaderById(id);

            if (timeSheetHeader == null)
                return RedirectToAction("Index");

            _timeSheetService.DeleteTimeSheet(timeSheetHeader);

            return Json(true, JsonRequestBehavior.AllowGet);
        }

时间表服务：

public IQueryable<TimeSheetHeader> GroupTimeSheetByTimeSheetHeader()
    {
        var groupTimeSheet = from tsh in _timeSheetHeaderRepository
                                 .IncludeTable(
                                    m => m.TimeSheetDetails,
                                    m => m.PGProfile,
                                    m => m.Quan,
                                    m => m.WorkType).OrderByDescending(m => m.Date)
                             select tsh;
        return groupTimeSheet.AsQueryable();
    }

Answer 1

听起来您的局部视图正在缓存。

对于部分视图，将[OutputCache(Duration=1)] 添加到操作中（由于某种原因，部分视图中不允许使用 0）。

要查看完整视图，有几个选项

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]

或者只是

[OutputCache(Duration=0)]