C# 通过对路由的完全支持管理选项卡式内容_C#_Asp.net_.net_Asp.net Mvc_Tabs

C# 通过对路由的完全支持管理选项卡式内容

c# asp.net .net asp.net-mvc tabs

C# 通过对路由的完全支持管理选项卡式内容,c#,asp.net,.net,asp.net-mvc,tabs,C#,Asp.net,.net,Asp.net Mvc,Tabs,我正在构建一个Asp.netmvc3应用程序。我想做的是一个配置文件页面（非常像stackoverflow配置文件页面），该页面的内容将被拆分为多个选项卡，每个选项卡都由一个PartialView表示当用户单击选项卡X时，我只想刷新选项卡区域，而不刷新我的所有页面。同时更改我的URL地址，因此如果用户单击浏览器刷新按钮，它将使用所选选项卡刷新页面。这可能吗我已经知道的是，如何使用AJAX获取数据，并替换视图的内容。我读过，我觉得很有趣，但它刷新了整个页面提前谢谢当用户单击选项卡X时，我只

我正在构建一个

Asp.netmvc3

应用程序。我想做的是一个配置文件页面（非常像stackoverflow配置文件页面），该页面的内容将被拆分为多个选项卡，每个选项卡都由一个

PartialView

表示

当用户单击选项卡X时，我只想刷新选项卡区域，而不刷新我的所有页面。同时更改我的URL地址，因此如果用户单击浏览器刷新按钮，它将使用所选选项卡刷新页面。这可能吗

我已经知道的是，如何使用

AJAX

获取数据，并替换视图的内容。我读过，我觉得很有趣，但它刷新了整个页面

提前谢谢

要实现这一点，您需要插入浏览器的历史API（它是HTML5的一部分，您必须使用某种插件在不支持它的浏览器中获得相同的东西）

曼宁的“面向.net开发人员的HTML5”在这方面有相当好的一节，但仍处于“早期访问”阶段

要实现这一点，您需要插入浏览器的历史API（它是HTML5的一部分，您必须使用某种插件在不支持它的浏览器中获得相同的东西）

曼宁的“面向.net开发人员的HTML5”在这方面有相当好的一节，但它仍处于“早期访问”阶段。

你的思路是正确的。您将需要使用两种ajax来获取要呈现的html而不刷新页面，还需要使用push state来更新URL以包含当前选项卡

您可以将这些操作作为单独的操作来执行，但我建议使用。使用PJAX，您需要在服务器中增加一点逻辑来决定是返回布局完整的html页面，还是只返回部分页面（PJAX请求）

这是我们的Foo控制器。索引有一个默认选中的“栏”选项卡。Bar和Baz操作返回索引视图，但所选选项卡是不同的选项卡。如果是PJAX请求，那么我们只需要填充选项卡内容的部分视图

public class FooController : Controller
{
    public ActionResult Index()
    {
        ViewBag.SelectedTab = "Bar";
        return View();
    }

    public ActionResult Bar()
    {
        if(Request.Headers["X-PJAX"] != null)
            return PartialView();
        ViewBag.SelectedTab = "Bar";
        return View("Index");
    }

    public ActionResult Baz()
    {
        if (Request.Headers["X-PJAX"] != null)
            return PartialView();
        ViewBag.SelectedTab = "Baz";
        return View("Index");
    }
}

在Foo/Index.cshtml中，我们有Razor代码，它将根据

ViewBag.SelectedTab

确定要渲染的部分视图

@{
ViewBag.Title=“Foo”；
}
福




@如果（ViewBag.SelectedTab==“条”）
{
@Html.Partial（“Bar”）
}
@如果（ViewBag.SelectedTab==“Baz”）
{
@Html.Partial（“Baz”）
}
@节脚本
{
$（函数（）{
$（“.tabs”）.pjax（“#tab_内容”）；
})
}

最后的脚本部分是如何连接PJAX的。您正在告诉它，对于所有带有

选项卡

类的超链接，使用pjax将

href

生成的html动态加载并呈现到id为

选项卡内容

的容器中，并将浏览器中的url更新为

href

的url

在这种情况下，每个选项卡的局部视图都相当简单

Bar.cshtml

这是条形选项卡。没有双关语的意思

Baz.cshtml

这是baz选项卡

这显然是一个非常简化的解决方案。您通常希望使用表示模型来处理视图的逻辑。此外，我还特意省略了任何选项卡样式，以证明这种技术可以用于任何类型的链接。它不仅限于选项卡

此示例的示例可以在我的GitHub站点上找到。

您的思路是正确的。您将需要使用两种ajax来获取要呈现的html而不刷新页面，还需要使用push state来更新URL以包含当前选项卡

public class FooController : Controller
{
    public ActionResult Index()
    {
        ViewBag.SelectedTab = "Bar";
        return View();
    }

    public ActionResult Bar()
    {
        if(Request.Headers["X-PJAX"] != null)
            return PartialView();
        ViewBag.SelectedTab = "Bar";
        return View("Index");
    }

    public ActionResult Baz()
    {
        if (Request.Headers["X-PJAX"] != null)
            return PartialView();
        ViewBag.SelectedTab = "Baz";
        return View("Index");
    }
}