按下按钮刷新页面

Question

新手开发者在这里，这实际上是我关于堆栈溢出的第一个问题。我的第一个角色是开发人员，我的任务是完成其他人启动的应用程序，当用户单击特定按钮时，我很难刷新页面。

该页面有一个项目列表，每个项目旁边都有一个复选框，用户可以勾选该复选框，然后单击“删除项目”按钮。理论上，单击该按钮应该在完成后刷新页面，或者至少刷新包含列表的页面部分......据我所知。该项目正在被删除，但刷新不起作用，因此用户必须在他们选择删除的项目实际从屏幕上消失之前手​​动刷新页面。

这是控制器中按钮背后的内容：

[HttpPost]
        public ActionResult UpdatePartStatus(List<tblPart> parts, tblArea area)
        {
            _LookupService.UpdatePartStatus(parts);
            // return RedirectToAction("Details", area);
            // return Redirect("~/Details");
            return RedirectToAction("Parts", "Menu", false);
            // <% return Response.Redirect(Request.RawUrl); %>
            // return Response.Redirect(Request.RawUrl);
            // return Page.Redirect(Page.Request.RawUrl, false);
            // return Redirect(Request.UrlReferrer.ToString());
            // return View();
            // return Redirect(HttpContext.Request.UrlReferrer.AbsoluteUri);

        }

注释掉的第一行是前一个开发人员留下的方式。注释掉的所有其他行都是我迄今为止尝试过的东西，但都没有奏效。而没有被注释掉的那个恰好是我在发布之前尝试的最后一个。这些尝试中的大多数都是在堆栈溢出时在这里搜索的结果

下面是详细视图中的脚本：

<script>
    $('#btnAjax').click(function () {

            ....validation code I removed for this post....

            $.ajax({
                type: 'post',
                url: '/Parts/UpdatePartStatus',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(data),
                dataType: 'json'
            })
        }
    });
</script>

这是我在其他几篇关于此主题的帖子中看到的 MapRoute 代码：

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Parts", action = "Menu", id = UrlParameter.Optional }

之前的开发人员在离开之前说的最后一句话是，这都是标准的 MVC，没有什么特别之处，但我的想法已经不多了。

感谢任何人提供的任何想法或建议。

谢谢

Answer 1

您共享的代码没有任何内容可以重新加载当前页面。看起来您正在将 ajax 表单提交到服务器。因此，从那里返回重定向响应实际上没有任何意义。

如果要重新加载页面，可以在 ajax 调用的done 事件中进行。

$.ajax({
    type: 'post',
    url: '/Parts/UpdatePartStatus',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data)
}).done(function(res){
    window.location.href = window.location.href; // This will reload the page
}).fail(function(a, b, c) {
    console.log('ajax call failed');
    });

但是再次，如果您要重新加载页面，那么做 ajax 帖子的意义何在？您可以简单地删除您使用 javascript 删除的特定 DOM 元素，而不是重新加载页面。这将为用户提供部分页面更新体验，而无需重新加载整个页面。

如果你知道你删除的项目的 ID，你可以在你的 jQuery 选择器中使用它来删除它。

var idOfDeletedItem = "someDomElementId";
$.ajax({
    type: 'post',
    url: '/Parts/UpdatePartStatus',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data)
}).done(function(res){
    // Let's remove that DOM element from the DOM
    $("#"+idOfDeletedItem).remove();

}).fail(function(a, b, c) {
    console.log('ajax call failed');
});

Answer 2

只需在 ajax 请求中添加一个success 函数即可：

$.ajax({
    type: 'post',
    url: '/Parts/UpdatePartStatus',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data),
    dataType: 'json',
    success: function() {
        location.reload();
    }
})

Answer 3

如果你使用的是 Ajax，那么你应该使用

    public JsonResult UpdatePartStatus(List<tblPart> parts, tblArea area)
    {
        _LookupService.UpdatePartStatus(parts);

        return Json(null); //This will always return a null result to your ajax call indicating a success 
    }

对我来说，我通常会以这种方式返回 json 结果：

try {
    LookupService.UpdatePartStatus(parts);
    return Json(new { Success = true});
}
catch {
    return Json(new { Success = false});
}

在你的 ajax 调用中，这样做：

$.ajax({
type: 'post',
url: '/Parts/UpdatePartStatus',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
dataType: 'json',
success: function(result) {
    if (result.Success)
        location.reload();
    } else {
        alert("Delete failed");
    }

}
})