你如何建立一个单一的网页界面ASP.NET 视?

StackOverflow https://stackoverflow.com/questions/1573824

题

我想建立一个web用"的单页界面"，使用ASP.NET 视.

我已经搜查了如果这至少是可能的而且我认为答案是：不是由简单的手段(阅读 http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2 第二最后的段落；该条是可以从2008年，虽然).

我发现其他的例子其实施通过编黑字.然而，我在寻找一个干净的解决方案，使用的标准。净的办法，如果可能的话。

我想要什么恰恰是相同的功能在创建一个新的"视网的应用程序"。然而，链接"/Home/约"，其中重新载入在整个页面上，我要链接到"#家庭/约"，其中仅加载的新的组成部分通过阿贾克斯。

标准的做法的呼吁的模板(部分的意见)与Html。RenderPartial正是我想要的，只有随后载他们在通过阿贾克斯-的请求。

当然，这可能是我不能使用 这些 模板，呈现的主页由于某些原因(也许是预期总是被称为在一定背景下从某个地方或如此)。但也许还有另一个干净的解决方案如何建立自己的模板页面和获取他们自的主页。

谁有一个很好的解决方案实现这样的事情，一个单一的页面接口？

PS:我正在开发视觉网页开发人员2008年表达版软1.0安装，在C#

[编辑] 下面我读工作，与模板是可能的，而且jQuery看起来的确像是不可避免的，所以我进行了测试。以下代码转换的经常创建的链接，通过Html。ActionLink入锚链接(与#)包含历史，然后获取的网页通过阿贾克斯和只有注射html部分我感兴趣的(即部分页的内部div#partialView):

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

这些联系也有助于优雅的退化.

但我必须离开现在，仍然是获取 整个 页，而不是仅仅部分的页面。更改控制器没有帮助；它还提供了我html的整个网页，与所有这些发言：

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

怎么可能，我只有回报的内容的一部分我感兴趣的(即内容Home/。aspx)?我想是发布的价值与阿贾克斯(例如"requesttype=阿贾克斯")，以便我知道控制器的页面获取经由阿贾克斯和只有返回的部分网页；否则它将返回的整个网页(即当你参观/家庭/约，而不是#家庭/约).

是一个很好的做法，改变全球性的。asax.cs也许，创建一个新的路由架构的AJAX的话，它只会返回部分的页面?(我还没看到这么多，但。)

[edit2] 罗伯特*Koritnik是正确的：我还需要一个有关。ascx页(用户控件)只有小HTML内容的页。第一线。aspx与主页的通过 MasterPageFile="~/..../Site.master" 这引起所有HTML。

但是能够执行下列在我的控制器：

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);
}
有帮助吗？

解决方案

全视角与局部图

好像你已经搞砸了一些东西。如果创建一个 About.aspx 网页与所有HTML需要显示整个网页它并不真正的问题，如果你说的

return PartialView('About');

图仍然返回的所有HTML编写的。

你应该创建一个独立的 About.ascx 这只会有网页的内容本身没有头和其它东西，是整体的一部分网页。

你原来页 About.aspx 会有这样的事情在它的内容(以避免重复编写的内容相同的两倍):

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

而你可以有两个控制器的行动。一个返回经常查看和一，返回的部分观点：

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

有关路线，在全球性的。asax

而不是写单独的路线为阿贾克斯的电话你想写一个行动过滤器，将工作类似的作为 AcceptVerbsAttribute 行动过滤器。这样你的要求客户将会保持相同(因而防止用户手动请求是错误的东西)，但这取决于请求的种类型的正确的控制器的行动将得到执行。

其他提示

好了，你可以载的局部图通过阿贾克斯的请求。在示例，我将使用jquery使阿贾克斯的电话。

这些可能的行动控制器(名HomeController):

public ActionResult About()
    {
        //Do some logic...
        //AboutView is the name of your partial view
        return View("AboutView");
    }

JQuery阿贾克斯呼吁地方的经退html在的地方，你想：

var resultDiv = $('#contentDIV');

    $.ajax({
        type: "POST",
        url: "/Home/About",
        success: function(responseHTML) {
            resultDiv.replaceWith(responseHTML);
        }
    });

[编辑的问题是更新]

这是可以做到的你想要什么。第一个控制器行动可以给你回局部视图，所以我的"AboutView"可能已经像这样的东西: 

<table>
<tr>
    <th>
        Column1Header
    </th>
    <th>
        Column2Header
    </th>
</tr>
<tr>
    <td>
    ...
    </td>
    <td>
    ...
    </td>
</tr>

这HTML是什么你要在responseHTML上成功处理在jquery阿贾克斯的方法。

第二，可以区分出在控制器的行动，如果该请求是阿贾克斯要求：

public ActionResult About()
    {
        //partial AboutView is returned if request is ajax
        if (Request.IsAjaxRequest())
            return View("AboutView");
        else //else it will be the default view (page) for this action: "About"
            return View();
    }

我们已经有了一个网站，正是这样做的，你真的想使用延路线在这里-很容易实现的长远目标。你可以很容易使它地降低对谁没有javascript启用--如谷歌。

它并不是所有的清楚什么是您要求的，它是一个完整的例子，或一些特定的功能？你应该能做到这一点没有JQuery为简单的方案，可以使用的Ajax视的助手像ActionLink方法。还有，我真的不明白什么是你的问题RenderPartial，但也许你在寻找的东西喜欢RenderAction从ASP.NET 视未来。

ASP.NET 软4(现在是在测试版)支持单个网页应用软.

http://www.asp.net/single-page-application

更新：...和他们移除它从软4RC

更新：...和它是回到2012年秋天更新

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top