【发布时间】：2012-04-13 19:40:05
【问题描述】：
总结
我目前正在尝试使用 MVC 3 架构和 jQuery UI 控件构建一个 Web 应用程序。到目前为止，我已经能够显示标签并在它们之间导航。
现在，我可以让登录页面显示在我的第一个选项卡上，因为这是此应用程序所需的第一个操作。
一旦通过身份验证，我希望能够添加一些允许使用此应用程序的其他选项卡。
该应用程序是关于包含已知人邮寄地址的电话簿列表。
也就是说，这个应用程序的工作流程是：
- 在首次到达网站时进行身份验证；
- 如果用户尚未注册，应用程序应让该用户一劳永逸地注册，使用相同的 jQuery UI 选项卡，或者可能显示新的注册选项卡或模式对话框；
- 通过第 1 步的身份验证后，用户现在可以访问网站的不同功能。
例如，假设我想注册一个新用户，我是这个网络应用程序管理员。我将首先针对此应用程序进行身份验证，然后我将看到任何用户都可以看到的常用选项卡，以及一个用于创建/注册能够针对此应用程序进行身份验证的新用户的特殊选项卡。网站管理员注册成功后。
我已经能够显示 LogOn 视图，我删除了模板创建的初始视图以重新创建为部分视图，以便能够将其包含在 jQuery UI 选项卡正文中。这很好用。
我的 HomeController 中还有一个 SelectTab 方法，它会根据作为输入参数传入的 id 的值知道要显示的部分视图。
现在，当我尝试从第一个 jQuery UI 选项卡上的 LogOn 局部视图导航时，这实际上是唯一可用的选项，单击“注册”链接不会让我在同一选项卡中显示“注册”局部视图。
代码示例
HomeController 类：
public class HomeController : Controller {
public ActionResult Index() { return View(); }
public ActionResult SelectTab(int id) {
switch (id) {
case 0: return RedirectToAction("Register", "Account");
default: return RedirectToAction("LogOn", "Account");
}
}
}
AccountController 类：
public class AccountController {
public ActionResult LogOn() { return PartialView(new LogOnModel()); }
public ActionResult Register() { return PartialView(new RegisterModel()); }
}
此处所述的两个模型（LogOnModel、RegisterModel）都是模板的默认值。
还有我的 _Layout.cshtml 共享视图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/south-street/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(window).load(function () {
$("#tabs").tabs({ select: function (event, ui) { selectTab(getSelectedTab()); } });
logIn();
});
function logIn() {
selectTab(-1);
selectTab(0);
}
function selectTab(index) {
var url = '@Url.Content("~/Home/SelectTab/")' + index;
var targetDiv = "#tab" + index;
$.get(url, null, function(result) { $(targetDiv).html(result); });
}
function getSelectedTab() { return $("#tabs").tabs("option", "selected"); }
function setSelectedTab(index) { $("#tabs").tabs("option", "selected", index); }
</script>
</head>
<body>
<div id="tabs">
<ul id="menu">
<li><a href="#tab0"><span>Authenticate</span></a></li>
@if (Request.IsAuthenticated) {
<li><a href="#tab1"><span>About</span></a></li>
}
</ul>
<div id="tab0"></div><div id="tab1"></div>
</div>
@RenderBody()
</body>
开发环境
我正在使用：
- VS2010 和 .NET 4.0；
- jQuery UI（版本和样式模板见_Layout.csthml代码示例）；
- ASP.NET MVC3.
问题
*如何在单击“登录”部分视图中包含的“注册”链接到同一选项卡后呈现注册部分视图？
也许隐藏实际标签并显示另一个进行注册似乎更简单？然而，如何实现呢？*
【问题讨论】：
-
登录后是否刷新页面？
-
我想我可以避免它，如果这是可行的。
标签： asp.net-mvc-3 jquery-ui partial-views jquery-ui-tabs