gpt4 book ai didi

具有 MVC4 内容的 jQuery 选项卡

转载 作者:行者123 更新时间:2023-12-03 23:05:37 27 4
gpt4 key购买 nike

我正在尝试让一些 MVC4 View 显示在 jQuery 选项卡中。这是我的代码:

<div id="tabs">
<ul>
<li><a href="#appone">App One</a></li>
<li><a href="#apptwo">App Two</a></li>
</ul>
<div id="appone">
@{ Html.RenderPartial("~/Views/AppOne/Index.cshtml"); }
</div>
<div id="apptwo">
@{ Html.RenderPartial("~/Views/AppTwo/Index.cshtml"); }
</div>
</div>

问题是第一个选项卡内容显示得很好,但第二个选项卡是空的。看来部分 View 没有渲染。

有没有办法强制 jQuery 选项卡在页面加载时更新所有选项卡的内容,或者强制我的部分 View 在页面加载时呈现?

最佳答案

这是我正在积极开发的代码,运行良好:

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>

我的部分 View 位于帐户子文件夹中的共享文件夹中。此外,每个局部 View 都有自己的模型。除此之外,实现没有什么特别的......

更新

我添加了代码来在两个选项卡上实现 Ajax 调用。选项卡部分上方的代码块包含 AjaxOptions两人的对象<form>元素。您的 Controller 需要看起来像这样:

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 action 方法渲染整个页面,包括 _Layout.cshtml_ViewStart.cshtml意见。我的部分看法,_Login.cshtml_Register.cshtml ,保存条目表单的 HTML 元素。每个部分 View 都有自己的提交按钮:

<input type="submit" value="<Whatever you want to display>" />

因为每个部分 View 调用都包含在自己的 using (Ajax.BeginForm(...)) 中 block 和我都给出了每个 <form>自己的id属性,我可以添加 JavaScript 代码来劫持 submit事件。取决于哪个submit按下后,它将执行 Ajax.BeginForm(...) 中与指定 Action 和 Controller 关联的 Action 方法。称呼。就我而言,如果表单数据通过验证, Controller 将自动重定向到 /Home/Index .

但是,如果验证失败,操作方法只会将部分 View 的渲染版本发送回浏览器,并将其放置在 UpdateTargetId 中指定的元素中。属性(property)在AjaxOptions<form> 关联的对象。由于默认InsertionModeReplace , View 引擎将简单地用新版本替换旧版本的部分 View ,并包含表单数据和验证消息(如果包含)。

我没有包含的唯一与代码相关的项目是我的部分 View ,就 jQuery 选项卡功能而言,这实际上并不重要。我的部分 View 中没有任何额外的 JavaScript,AccountController 中没有任何额外的代码。我没有包括特定于调用我的外部 Web API 控制台应用程序和设置授权 cookie 的内容。我使用 Google 的 CDN 进行 jQuery 和 jQuery UI 声明,而不是在本地托管 JavaScript。

你需要花一些时间来思考你必须做的事情。然而,一旦你掌握了它,你就掌握了它,并且知识是可以转移的。感谢上帝,这不是 WebForms。

关于具有 MVC4 内容的 jQuery 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16048183/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com