这是我正在积极处理的代码,运行良好:
Login.cshtml
@{
AjaxOptions optsLogin = new AjaxOptions { UpdateTargetId = "login-tab-login" };
AjaxOptions optsRegister = new AjaxOptions { UpdateTargetId = "login-tab-register" };
}
<section id="login-tabs">
<ul>
<li><a href="#login-tab-login">Returning Customers</a></li>
<li><a href="#login-tab-register">New Customers</a></li>
</ul>
@using (Ajax.BeginForm("Login", "Account", optsLogin, new { id = "form-login" }))
{
<div id="login-tab-login">
@Html.Partial("Account/_Login")
</div>
}
@using (Ajax.BeginForm("Register", "Account", optsRegister, new { id = "form-register" }))
{
<div id="login-tab-register">
@Html.Partial("Account/_Register")
</div>
}
</section>
<script type="text/javascript">
$(function() {
$('#login-tabs').tabs();
});
</script>
我的部分视图位于 Account 子文件夹的 Shared 文件夹中。此外,每个局部视图都有自己的模型。除此之外,实现没什么特别的......
更新
我添加了代码以在两个选项卡上实现 Ajax 调用。选项卡部分上方的代码块包含两个 <form> 元素的 AjaxOptions 对象。您的控制器需要如下所示:
AccountController.cs
public class AccountController : Controller
{
...
[HttpGet]
public ActionResult Login()
{
...
return View();
}
[HttpPost]
public ActionResult Login(LoginModel model)
{
...
if (ModelState.IsValid)
return RedirectToAction("Index", "Home")
else
return PartialView("/Account/_Login", model);
}
[HttpPost]
public ActionResult Register(RegisterModel model)
{
...
if (ModelState.IsValid)
return RedirectToAction("Index", "Home")
else
return PartialView("/Account/_Register", model);
}
}
Login GET 操作方法呈现整个页面,包括_Layout.cshtml 和_ViewStart.cshtml 视图。我的部分视图_Login.cshtml 和_Register.cshtml 包含输入表单的HTML 元素。每个局部视图都有自己的提交按钮:
<input type="submit" value="<Whatever you want to display>" />
因为每个部分视图调用都包含在自己的using (Ajax.BeginForm(...)) 块中,并且我为每个<form> 赋予了自己的id 属性,所以我可以添加JavaScript 代码来劫持submit 事件。根据按下的submit,它将执行Ajax.BeginForm(...)调用中与指定动作和控制器相关联的动作方法。在我的例子中,如果表单数据通过验证,控制器会自动重定向到/Home/Index。
但是,如果验证失败,操作方法将简单地将我的局部视图的渲染版本发送回浏览器,并将其放置在与@987654340 关联的AjaxOptions 对象中的UpdateTargetId 属性中指定的元素中@。由于默认的InsertionMode 是Replace,因此视图引擎将简单地将旧版本的部分视图替换为新版本,并包含表单数据和验证消息(如果包含)。
我没有包含的唯一与代码相关的项目是我的部分视图,就 jQuery 选项卡功能而言,这真的无关紧要。我的部分视图中没有任何额外的 JavaScript,我没有包含的 AccountController 中的额外代码专门用于调用我的外部 Web API 控制台应用程序和设置授权 cookie。我将 Google 的 CDN 用于我的 jQuery 和 jQuery UI 声明,而不是在本地托管 JavaScript。
你需要一段时间来思考你必须做的事情。但是,一旦你掌握了它,你就掌握了它并且知识是可以转移的。这不是WebForms,谢天谢地。