Question

我有一些标签/列表：

<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是部分视图。到目前为止，部分视图的控制器看起来像这样：

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

我完全迷失在哪里。最终，部分视图将返回属于单击的选项卡/视图的内容。但现在的问题是我如何能够实现它，以便点击时不会重新加载标签/列表部分。

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

Answer 1

不进入您的代码，但目前有两个构建webistes的概念：

经典页面approch，每次点击都会加载一个完整的新页面
单页应用程序（SPA）approch，您只需加载一次站点，然后只通过REST API加载缺少的数据

您的问题看起来像SPA，您加载网站然后想要操作不同的部分而不重新加载其他部分。

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

其他类似的框架是

knockoutjs
Backbone.js的

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

仅刷新页面的一部分

1 个答案: