Index.cshtml
<html>
<head>
<title></title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
#root-container {
margin: 20px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.nav li a').click(function () {
$(this).parentsUntil('#root-container').last().children().removeClass('active');
var $url = $(this).attr('href');
$.ajax({
url: $url,
type: 'POST',
success: function ($data) {
$('#tab-container').html($data);
}
});
if (location.pathname != $url) {
window.history.pushState({ path: $url }, $(this).text(), $url);
}
$(this).parent().addClass('active');
return false;
});
$('.nav li a').each(function () {
if (location.pathname == $(this).attr('href')) {
$(this).click();
return false;
}
});
if ($('.nav li.active').size() == 0) {
$('.nav li a').first().click();
}
});
</script>
</head>
<body>
<input type="hidden" id="current-path" value="@ViewBag.CurrentPath" />
<div id="root-container">
<ul class="nav nav-tabs">
<li><a href="~/Home/jQuery">What is jQuery?</a></li>
<li><a href="~/Home/jQueryUI">jQueryUI</a></li>
<li><a href="~/Home/Bootstrap">Bootstrap</a></li>
</ul>
<div id="tab-container"></div>
</div>
</body>
</html>
HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.CurrentPath = Request.Url.AbsolutePath;
return View();
}
public ActionResult jQuery()
{
switch (Request.HttpMethod)
{
case "POST":
return View();
default:
return View("Index");
}
}
public ActionResult jQueryUI()
{
switch (Request.HttpMethod)
{
case "POST":
return View();
default:
return View("Index");
}
}
public ActionResult Bootstrap()
{
switch (Request.HttpMethod)
{
case "POST":
return View();
default:
return View("Index");
}
}
}
}
Reference: Manipulating the browser history
Posts
