Watch this tutorial on YouTube
1. _Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/jquery-1.12.4.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive-ajax.js")
@Scripts.Render("~/Scripts/jquery-ui-1.12.1.js")
@Scripts.Render("~/Scripts/jquery.validate.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
2. Model - Customer
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace MVCJQueryTabs.Models
{
public class Customer
{
[StringLength(5, MinimumLength =2, ErrorMessage ="{0} must be 2 to 5 chars long")]
public string FristName { get; set; }
[StringLength(5, MinimumLength = 2, ErrorMessage = "{0} must be 2 to 5 chars long")]
public string LastName { get; set; }
[StringLength(5, MinimumLength = 2, ErrorMessage = "{0} must be 2 to 5 chars long")]
public string Address { get; set; }
[StringLength(5, MinimumLength = 2, ErrorMessage = "{0} must be 2 to 5 chars long")]
public string Country { get; set; }
}
}
3. Controller - Home
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCJQueryTabs.Models;
namespace MVCJQueryTabs.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
Customer c = new Customer();
return View(c);
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
4. View - Index
@model MVCJQueryTabs.Models.Customer
<form>
<div class="container">
<ul class="tabs">
<li class="tab-link tab-1 current" data-tab="tab-1">TAB ONE</li>
<li class="tab-link tab-2" data-tab="tab-2">TAB TWO</li>
<li class="tab-link tab-3" data-tab="tab-3">TAB THREE</li>
<li class="tab-link tab-4" data-tab="tab-4">TAB FOUR</li>
</ul>
<div id="tab-1" class="tab-content current">
@Html.LabelFor(x => x.FristName)
@Html.TextBoxFor(x => x.FristName)
@Html.ValidationMessageFor(x => x.FristName)
</div>
<div id="tab-2" class="tab-content">
@Html.LabelFor(x => x.LastName)
@Html.TextBoxFor(x => x.LastName)
@Html.ValidationMessageFor(x => x.LastName)
</div>
<div id="tab-3" class="tab-content">
@Html.LabelFor(x => x.Address)
@Html.TextBoxFor(x => x.Address)
@Html.ValidationMessageFor(x => x.Address)
</div>
<div id="tab-4" class="tab-content">
@Html.LabelFor(x => x.Country)
@Html.TextBoxFor(x => x.Country)
@Html.ValidationMessageFor(x => x.Country)
</div>
</div>
<br />
<input type="submit" value="save" id="btnSave" />
</form>
<script>
$(document).ready(function () {
$("#btnSave").click(function () {
$("form").data("validator").settings.ignore = "";
var validator = $("form").validate();
var isValid = $("form").valid();
if (!isValid) {
var tab_id = jQuery(validator.errorList[0].element).closest(".tab-content").attr('id');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$("." + tab_id).addClass('current');
$("#" + tab_id).addClass('current');
}
});
$('ul.tabs li').click(function () {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
$('ul.tabs li').mouseover(function () {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
});
</script>
5. CSS
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
ul.tabs{
width: 15%;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
width: 100%;
background: none;
color: red;
display: inline-block;
padding: 10px 0px;
background-color: green;
}
ul.tabs li.current{
color: blue;
background-color: yellow;
}
.tab-content{
width: 60%;
height: 100%;
float: left;
display:none;
background: white;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
No comments:
Post a Comment