只刷新页面的一部分答案

【问题标题】：Refreshing only part of the page只刷新页面的一部分
【发布时间】：2015-02-19 08:28:33
【问题描述】：

我有一些标签/列表：

<div id="tabs">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("Recs", "Recs", "Home")</li>
                <li>@Html.ActionLink("Software", "Software", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
             </div>

在这些列表中，我有一些 JQuery 幻灯片效果，因此当用户进入网站时 div 会滑入。但它们也会在每次重新加载页面时滑入，例如当用户单击其中一个选项卡时。从长远来看，这可能会很烦人，只有当您进入该站点时它才会很酷。所以我想让它重新加载页面的特定区域（而不是列表）。我发现我可以为此使用 AJAX load(...)，并且我应该使用 Partial View。所以我有一个看起来像这样的部分视图：

@model WebApplication1.Models.PageRefreshModel

<div id="retrievedContentDiv">
   <h2>Some content</h2>
</div>

还有JS文件：

$(document).ready(function () {
    $("#topMenuContentDiv li").click(function () {
        $("#retrievedContentDiv").load("/PageRefresh/RefreshPage", { type: 'POST' });
    });

});

渲染部分视图的 _Layout.cshtml 部分包含以下内容：

    @RenderBody()
    <div>
        @{Html.RenderPartial("_RefreshedHandler");}
    </div>

其中 _RefreshedHandler 是部分视图。到目前为止，Partial View 的 Controller 如下所示：

public ActionResult RefreshPage()
        {
            return PartialView("_RefreshedHandler");
        }

我完全不知道从这里去哪里。最终，部分视图将返回属于单击的选项卡/视图的内容。但现在的问题是如何做到这一点，以便在单击时不会重新加载选项卡/列表部分。

AJAX 的解决方案是我在互联网上搜索了很长时间才找到的。如果有人知道更好的解决方案，或者如果 asp.net mvc 有自己的嵌入式方式来处理这个问题，请分享。也欢迎您推荐更好的解决方案或指出到目前为止我的解决方案存在的问题

【问题讨论】：

标签： ajax asp.net-mvc

【解决方案1】：

没有进入你的代码，但目前有两个构建网站的概念：

经典的逐页方式，每次点击都会加载一个全新的页面
单页应用程序 (SPA) 方法，您可以在其中加载网站一次，然后通过 REST API 仅加载丢失的数据

您的问题看起来像一个 SPA，您加载了网站，然后想要在不重新加载其他部分的情况下操作不同的部分。

目前构建此类应用程序的最佳框架是angular.js。页面上有很好的教程，还有很多如何将其“集成”到 ASP.Net-MVC 中的示例。

其他类似的框架是

knockoutjs
Backbone.js

但在我看来，angularjs 是最先进的。

【讨论】：