ajax - 如何在 ASP.NET MVC 中构建单页界面？

Question

我想使用 ASP.NET MVC 构建一个带有“单页界面”的网络应用程序。

我已经搜索过这是否至少可行，我认为答案是:不是通过简单的方式(阅读 http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2 倒数第二段；尽管那篇文章是从 2008 年 5 月开始的)。

我找到了其他通过使用 jQuery 进行编码/破解来实现此功能的示例。但是，我正在寻找一个干净的解决方案，如果可能的话，使用标准的 .NET 方法。

当您创建一个新的“MVC Web 应用程序”时，我想要的是完全相同的功能。但是，我想要链接到“#Home/About”，而不是重新加载整个页面的“/Home/About”链接，它仅通过 AJAX 加载新部分。

使用 Html.RenderPartial 调用模板(部分 View )的标准方法正是我想要的，然后才通过 AJAX 请求加载它们。

当然，可能是因为某些原因我不能使用母版页呈现的这些模板(也许它期望总是在特定的上下文中从特定的环境中调用地方左右)。但对于如何构建模板页面并从母版页面获取它们，也许还有另一种干净的解决方案。

谁有一个很好的解决方案来实现这样的东西，一个单页界面？

PS:我正在使用安装了 MVC 1.0 的 Visual Web Developer 2008 Express Edition 在 C# 中进行开发

[编辑]在下面我读到使用模板是可能的，而且 jQuery 看起来确实是不可避免的，所以我测试了它。以下代码将 Html.ActionLink 创建的常规链接转换为 anchor 链接(带#)以包含历史记录，然后通过 AJAX 获取页面并仅注入(inject)我感兴趣的 html 部分(即 div 中的部分页面#局部 View ):

$("a").each(function() {
    $(this).click(function() {
        $("div#partialView").load($(this).attr("href") + " div#partialView");
        location.hash = $(this).attr("href");
        return false;
    });
});

这些链接还允许优雅降级。

但我现在剩下的，仍然是获取整个页面，而不是只获取部分页面。改变 Controller 没有帮助；它仍然为我提供了整个页面的 html，其中包含所有这些语句:

public ActionResult About()
{
    return View();
    return View("About");
    return PartialView();
    return PartialView("About");
}

如何只返回我感兴趣的部分内容(即Home/About.aspx的内容)？我想要的是使用 AJAX 发布一个值(例如“requesttype=ajax”)，以便我的 Controller 知道该页面是通过 AJAX 获取的并且只返回部分页面；否则它将返回整个页面(即当您访问/Home/About 而不是 #Home/About 时)。

改变 Global.asax.cs 是否是一个好习惯，为 AJAX 调用创建一个新的路由模式，它只会返回部分页面？ (我还没有研究这么多。)

[编辑2]Robert Koritnik 是对的:我还需要一个 About.ascx 页面(用户控件)，其中只有该页面的小 HTML 内容。 About.aspx 的第一行通过 MasterPageFile="~/..../Site.master" 链接到母版页，这导致打印所有 HTML。

但是为了能够在我的 Controller 中执行以下操作:

public ActionResult About()
{
    return Request.IsAjaxRequest() ? (ActionResult)PartialView() : View();
}

我需要改变 PartialView(.ascx 文件)和 View(.aspx)文件的查找方式，否则这两种方法将返回相同的页面( About.aspx，最终导致死循环)。将以下内容放入 Global.asax.cs 后，将使用 PartialView() 和 View() 返回正确的页面:

protected void Application_Start()
{
    foreach (WebFormViewEngine engine in ViewEngines.Engines.Where(c => c is WebFormViewEngine))
    {
        /* Normal search order:
        new string[] { "~/Views/{1}/{0}.aspx",
            "~/Views/{1}/{0}.ascx",
            "~/Views/Shared/{0}.aspx"
            "~/Views/Shared/{0}.ascx"
        };
        */

        // PartialViews match with .ascx files
        engine.PartialViewLocationFormats = new string[] { "~/Views/{1}/{0}.ascx", "~/Views/Shared/{0}.ascx" };

        // Views match with .aspx files
        engine.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.aspx", "~/Views/Shared/{0}.aspx" };
    }

    RegisterRoutes(RouteTable.Routes);
}

Answer 1

完整 View 与局部 View

你好像搞砸了什么。如果您创建一个包含显示整个页面所需的所有 HTML 的 About.aspx 页面，那么您是否说

并不重要

return PartialView('About');

View 仍会返回其中写入的所有 HTML。

您应该创建一个单独的 About.ascx，它只包含页面本身的内容，没有页眉和整个页面的其他内容。

您的原始页面 About.aspx 的内容中将包含类似这样的内容(以避免重复编写相同的内容两次):

<%= Html.RenderPartial("About") %>

你可以有两个 Controller Action 。一个返回常规 View ，一个返回局部 View :

return View("About"); // returns About.aspx that holds the content of the About.ascx as well
return PartialView("About"); // only returns the partial About.ascx

关于 Global.asax 中的路由

与其为 Ajax 调用编写单独的路由，不如编写一个类似于 AcceptVerbsAttribute 操作过滤器的操作过滤器。这样，来自客户端的请求将保持不变(从而防止用户手动请求错误的内容)，但根据请求类型，将执行正确的 Controller 操作。