大佬教程收集整理的这篇文章主要介绍了带有MVC4内容的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>
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",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>
我的部分视图位于“帐户”子文件夹的“共享”文件夹中.此外,每个局部视图都有自己的模型.除此之外,实施并不特别……
我添加了代码来在两个选项卡上实现Ajax调用. tabs部分上方的代码块包含两个< 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>" />
因为每个部分视图调用都使用(Ajax.beginForm(…))块自己封装,并且我已经给出了每个< form>它自己的id属性,我可以添加JavaScript代码来劫持提交事件.根据按下的提交,它将执行与Ajax.beginForm(…)调用中的指定操作和控制器关联的操作方法.在我的情况下,如果表单数据通过验证,控制器将自动重定向到/ Home / Index.
但是,如果验证失败,则action方法将简单地将部分视图的呈现版本发送回浏览器,并将其放在与< form>关联的AjaxOptions对象的updateTargetId属性中指定的元素中.由于默认的InsertionMode是replace,因此视图引擎将简单地用新版本替换旧版本的部分视图,并填写表单数据和验证消息(如果包含).
我没有包含的唯一与代码相关的项目是我的部分视图,就jQuery选项卡功能而言,这无关紧要.我的部分视图中没有任何其他JavaScript,而且我没有包含的AccountController中的其他代码特定于调用我的外部Web API控制台应用程序和设置授权cookie.我使用谷歌的CDN作为我的jQuery和jQuery UI声明,而不是在本地托管JavaScript.
需要一段时间才能完成您的工作.但是,一旦你得到它,你就得到了它,知识是可以转移的.这不是WebForms,谢天谢地.
以上是大佬教程为你收集整理的带有MVC4内容的jQuery选项卡全部内容,希望文章能够帮你解决带有MVC4内容的jQuery选项卡所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。