Develop Reference

Using React 18 hydrateRoot or other design patterns for rendering slow component(s)

I have a rather large web application that I'm upgrading from React 16 to React 18 and overhauling completely, it uses .NET 6. Currently, it's not using any of the hydration SSR techniques. I've looked into this for quite some time now, but am not finding any solid examples to help me through this technique. I thought this might be a good thread to make for future developers who may be doing the same. Basically, I have pages with a collection of 'widgets' (React Components), some of the components require more data to load than others, some don't need any data. The issue is that all the data is loaded from the C# controller via API calls and put into a big model/object, which contains the data for each individual widget on the page, so no widgets are loaded until all the data is gathered and passed in from the controller. Give examples of how to make this work best, using available React techniques, I'm sure there is probably a couple of great designs for this. I'd like to get things set-up so that I can at least do one of the two techniques, the first being the preferred method:
Load data from the C# Controller to each individual React Component directly as the data is gathered, having the individual widget render at that time. Then, when the data is ready for another widget, it's passed into the particular component and rendered on screen. This will make it so that no component depends on the data needing to be loaded for other components for it to load.
Something I want to avoid: Some of the 'pages' currently use Fetch (GET/POST) calls from the JSX files to load data from the API, rather than from the controller when the page link is clicked. This has caused issues in the past from having too many fetch calls going at the same time from different widgets loading (collisions/etc), which was just causing them to crash a lot, so I've been modifying all of these widget's data to be loaded from the controller beforehand.
Having a 'loading' screen of sorts show up or even just the widgets' container html, appear until all of the data is passed from the controller via the data model.
How I currently have everything set-up:
-> From home page, user clicks on link to go to their Account profile at 'Account\Index\userId'
-> Example of current AccountController.cs Index call:
[HttpGet]
public async Task<ActionResult> Index(int? userId) {
var model = new AccountViewModelContract();
model.NameData = await ApiClient1.GetNameViewModelAsync(userId);
model.AccountSecurityData = await ApiClient2.GetAccountSecurityViewModelAsync(userId);
model.EmailData = await ApiClient2.GetEmailViewModelAsync(userId);
model.PhoneData = await ApiClient2.GetPhoneViewModelAsync(userId);
model.AddressData = await ApiClient3.GetAddressViewModelAsync(userId);
model.LoadedFromController = true;
return View(model);
}
-> Example of current Account's View, Index.cshtml
#using App.Models
#model AccountViewModelContract
<input id="accountPageData" type='hidden' value="#System.Text.Json.JsonSerializer.Serialize(Model)" />
<div id="accountDash" style="height:100%;"> </div>
#section ReactBundle{
<script src="#Url.Content("~/Dist/AccountDashboard.bundle.js")" type="text/javascript"></script>
}
-> Example of current AccountDashboard.jsx:
import React from 'react';
import { createRoot } from 'react-dom/client';
import BootstrapFooter from 'Shared/BootstrapFooter';
import AccountSecurity from './AccountSecurity/AccountSecurity';
import Address from 'Account/Address/Address';
import EmailSettings from 'Account/Email/EmailSettings';
import Name from 'Account/Name/Name';
import Phone from 'Account/Phone/Phone';
import PropTypes from 'prop-types';
import BootstrapHeaderMenu from '../Shared/BootstrapHeaderMenu';
class AccountDashboard extends React.Component {
constructor(props) {
super(props);
const data = JSON.parse(props.accountPageData);
this.state = { data };
}
render() {
const { data } = this.state;
return (
<div className="container">
<div className="row">
<BootstrapHeaderMenu/>
</div>
<div>My Account</div>
<div className="row">
<div className="col">
<Name value={data.NameData} />
</div>
<div className="col">
<Phone value={data.PhoneData} />
</div>
<div className="col">
<Address value={data.AddressData} />
</div>
<div className="col">
<AccountSecurity value={data.AccountSecurityData} />
</div>
<div className="col">
<EmailSettings value={data.EmailData} />
</div>
</div>
<div className="row">
<BootstrapFooter/>
</div>
</div>
);
}
}
AccountDashboard.propTypes = {
accountPageData: PropTypes.string.isRequired
};
createRoot(document.getElementById('accountDash')).render(<AccountDashboard accountPageData={document.getElementById('accountPageData').value} />);
-> Example of one of the Widget's (Name.jsx), code condensed to not complicate things
import React from 'react';
import BlueCard from 'Controls/BlueCard';
import LoadingEllipsis from 'Controls/LoadingEllipsis';
class Name extends React.Component {
constructor(props) {
super(props);
const data = props.value;
this.state = {
isLoaded: false,
.....
loadedFromController: props.value.LoadedFromController,
};
if (props.value.LoadedFromController) {
...set more state data
}
}
componentDidMount() {
if (!this.state.isLoaded && !this.state.loadedFromController) {
..//go to server to get data, widget sometimes loads this way in odd certain cases, pay no attention
} else {
this.setState({
isLoaded: true
});
}
render() {
let content = <LoadingEllipsis>Loading Name</LoadingEllipsis>;
const { ... } = this.state;
if (isLoaded === true) {
content = (<div>....fill content from state data</div>);
}
return (<BlueCard icon="../../Content/Images/Icon1.png" title="Name" banner={banner} content={content} />);
}
}
export default Name;
What are some methods, techniques, or design patterns for accomplishing these goals and give detailed examples of how it can be done and why it works better than alternatives. Use the above example class names in your examples.

Regarding the mentioned approaches:
Load data from the C# Controller to each individual React Component
directly as the data is gathered, having the individual widget render at that time. Then, when the data is ready for another widget, it's passed into the particular component and rendered on screen. This will make it so that no component depends on the data needing to be loaded for other components for it to load.
In order to create something like this, the use of Fetch calls in React are needed, to render the data from the Controller. You would just fetch the data for each widget/component within the react component. Unfortunately, it goes against MVC and React patterns to inject html directly to the view from the controller. In addition, there's no way to hand over control of the browser to the controller dynamically in a way where you could inject/return multiple individual views at different times, depending on when data is loaded from API calls.
Having a 'loading' screen of sorts show up or even just the widgets'
container html, appear until all of the data is passed from the
controller via the data model.
The issue mentioned with the above approach is that when a user clicks to go to a next page, the controller is called in order to decide what View to return. You cannot return a quick view and then return another view when the data is loaded for it. When you return control to the view, the controller is then useless.
The approach that I took instead:
I created a Main View that's used everywhere, switched to routing (react-router-dom), lazy loading, and now mostly utilize only one main controller.
Example:
Main.cs
[Authorize]
[HttpGet]
public async Task<ActionResult> Index(int? id) {
if(User.Identity != null && User.Identity.IsAuthenticated) {
var model = await GetMainViewModel(id);
return View(model);
}
return View();
}
[HttpGet]
[Route("AccountDashboard")]
public async Task<ActionResult> AccountDashboard(int? id) {
if(User.Identity != null && User.Identity.IsAuthenticated) {
var model = await GetMainViewModel(id);
return View(model);
}
return View();
}
[HttpGet]
[Route("AnotherDashboard")]
public async Task<ActionResult> AnotherDashboard(int? id) {
if(User.Identity != null && User.Identity.IsAuthenticated) {
var model = await GetMainViewModel(id);
return View(model);
}
return View();
}
Example Index.html that's used by every dashboard:
#using Main.Models
#model MainViewModel
<input id="PageData" type='hidden' value="#System.Text.Json.JsonSerializer.Serialize(Model)" />
<div id="root"></div>
#section ReactBundle{
<script src="#Url.Content("~/Dist/Main.bundle.js")"></script>
}
Example Main.jsx:
import { createRoot } from 'react-dom/client';
import { Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import BootstrapHeader from "BootstrapHeader";
import BootstrapFooter from "BootstrapFooter";
import LandingPage from "./LandingPage";
const AccountDashboard = React.lazy(() => import('../AccountDashboard'));
const AnotherDashboard = React.lazy(() => import('../AnotherDashboard'));
class Main extends React.Component {
constructor(props) {
super(props);
var data = JSON.parse(props.PageData);
this.state = {
data: data,
};
}
render() {
return(
<BrowserRouter>
<div className={} style={{ minHeight: '100vh' }}>
<div style={{ minHeight: '11vh' }}>
<BootstrapHeader value={this.state.data} />
</div>
<div className="container-column" style={{ minHeight: '75vh' }}>
<Routes>
<Route exact path="/" element={<Suspense fallback={<div>Loading...</div>}><LandingPage PageData={this.state.data}/></Suspense>} />
<Route exact path="/AccountDashboard" element={<Suspense fallback={<div>Loading...</div>}><AccountDashboard AccountData={this.state.data.AccountModels} /></Suspense>} />
<Route exact path="/AnotherDashboard" element={<Suspense fallback={<div>Loading...</div>}><AnotherDashboard AnotherData={this.state.data.AnotherModels} /></Suspense>} />
</Routes>
</div>
<div style={{ minHeight: '14vh' }}>
<BootstrapFooter value={this.state.data} />
</div>
</div>
</BrowserRouter>
);
}
}
createRoot(document.getElementById('root')).render(<Main PageData={document.getElementById('PageData').value} />);
Each Dashboard has it's own widgets, which rely on data from the main model. Basically, all of the data is grabbed up front for each user, for the whole website. I found that the amount of data was worth just grabbing ahead of time rather than right before each widget loads. With the use of caching techniques, the App is running super fast now. Putting in the Route names as methods in the Main.cs allowed is so that the page can be reloaded and not fail, which is common with routing.

How to pass a model and a variable to a post method with one input

I'm trying to have one post route that takes care of multiple operations.
Here's the Controller:
[HttpPost("dish/{operation}")]
public IActionResult Dish(string operation, Dish dish)
{
if (operation == "RedEdit")
{
return RedirectToAction("EditDish", dish);
}
if (ModelState.IsValid)
{
if (operation == "Add")
{
_context.Add(dish);
_context.SaveChanges();
return RedirectToAction("Index");
}
else //Unused currently
{
Console.WriteLine("Oops");
_context.Add(dish);
_context.SaveChanges();
return RedirectToAction("Index");
}
}
else
{
return View("DishForm");
}
}
The POST route will take a string, which is the operation it'll do, and depending on the operation it'll run something different. Right now I don't have all the operations, and my else within the validation isn't what it's going to be. The problem I'm having currently is with the "RedEdit," which is just a method to redirect to the edit page. Here's my view and what I'd like to do:
#{
ViewData["Title"] = "Add a dish!";
ViewData["Header"] = "Add a new Dish!";
ViewData["Home"] = true;
ViewData["Add"] = false;
var parms = new Dictionary<string, string>
{
{"operation", ""}
};
}
#model RichCRUDelicious.Models.Dish
<div class="container d-flex flex-column text-center">
<h3><u>#Model.Name by #Model.Chef</u></h3>
<p>#Model.Description</p>
<p>Calories: #Model.Calories</p>
<p>Tastiness: #Model.Tastiness</p>
<footer>
#using (Html.BeginForm("Dish", "Home", "operation", FormMethod.Post)){
//Two Buttons with Edit and Delete
}
</footer>
</div>
I'd essentially like to have one form, which has two buttons, one for edit and delete. The button for edit will change my operation value in parms to "RedEdit," while delete will change it to "Delete" (which I don't have a route set up for currently but that's not the issue.) I've tried a couple different methods, and mostly the issue comes down to the parameters within the post method, I'm not sure how I can pass the model in AND the operation value. I don't mind if they're split up into two different forms, but I'd really like just one post method for this controller.
I've tried using a generic HTML Form with:
<form asp-action="Dish" asp-controller="Home" asp-all-route-data="parms" method="post">
But my issue wasn't resolved using this method either, I'm thinking a hidden input with two different forms will work, but if there's a better way I'd like to hear.

If you want to use a form with two buttons which go to the same action,you can try to add asp-route-operation to your buttons,here is a simple demo:
Dish:
public class Dish {
public int Id { get; set; }
public string Name { get; set; }
}
view:
<form method="post">
<input hidden name="Id" value="1" />
<input hidden name="Name" value="test" />
<button asp-controller="Home" asp-action="Dish" asp-route-operation="RedEdit">RedEdit</button>
<button asp-controller="Home" asp-action="Dish" asp-route-operation="Delete">Delete</button>
</form>
action:
[HttpPost("dish/{operation}")]
public IActionResult Dish(string operation, Dish dish)
{
...
}
}
Hidden inputs will help you pass the value of Dish to the action,asp-route-operation will help pass different operation values to the action.When clicking RedEdit button,the value of operation will be RedEdit.With Delete button,it will be Delete.

Best way to handle add/view/delete on one page

What I want to do
I am very new to MVC.
I'm trying to create a page that allows users to perform the following actions on the same page:
View the list (table)
Add a new item (Filling the form and clicking the Add button should update the table)
Delete an item from the list (Clicking the Delete button in a row should update the table)
A simple example looks like this but I actually have two lists on one page (Fees and Costs):
Question
What would be the best way to achieve this?
Should I go with Dylan Beattie's method posted here which would look something like this?
public ActionResult MyAction(string submitButton, MyViewModel form)
{
switch (submitButton)
{
case "AddFee":
return (AddFee(form));
case "AddCost":
return (AddCost(form));
case "RemoveFee":
return (RemoveFee(form));
case "RemoveCost":
return (RemoveCost(form));
}
}
public ActionResult AddFee(MyViewModel form)
{
Fee newFee = ....; // Get entered data from `form`
_repository.InsertFee(newFee);
return View("Create"); //Back to the original page
}
Or is there any other recommended methods to handle this such as using JavaScript?

You could create the table as a partial view and re render this via ajax.
Wrap the partial view in a div and Wrap the form in #using (Ajax.BeginForm(.... and target the wrapper div. Your controller action that is targeted by the ajax request will need to return a partial view.
Here is a simple example
public class HomeController : Controller
{
public ActionResult Index()
{
MYvm vm = new MYvm() { id = 1, name = "This is my View Model" };
return View(vm);
}
public ActionResult DA(MYvm vm)
{
vm.name = "CHANGED";
return PartialView("Part", vm);
}
View:
#model MvcApplication1.Controllers.HomeController.MYvm
#{
ViewBag.Title = "Home Page";
}
#using (Ajax.BeginForm("DA", "Home", new AjaxOptions() { UpdateTargetId = "cont", HttpMethod = "Get" }))
{
<div>
Id: #Html.EditorFor(model => model.id)
</div>
<div>
Name: #Html.EditorFor(model => model.name)
</div>
<input type="submit" value="SubmitForm" />
}
<div id="cont">
#{Html.RenderPartial("part", Model);}
</div>
Partial View
#model MvcApplication1.Controllers.HomeController.MYvm
#{
ViewBag.Title = "part";
}
<h2>part</h2>
#Model.name

Should I go with [previous SO answer]
No. That answer was for a different scenario where the question had a form with two submit buttons that wanted to do two different actions (and wasn't even the accepted answer to that question).
Your sample screenshot indicates that some javascript/jquery and ajax would solve the issue cleanly.
As you're new to MVC, try to keep it relatively simple. Break up the page into separate parts:
the containing page
the edit form
the list with remove
the edit/list work independently and should be written in a way that they could be put on any other page - the page is just there to contain them and doesn't do much else (obviously your real page will contain more, but add those parts as separate components as well).
1 Create actions for your list and edit forms that return partialviews - just the parts that are needed for that view (self-contained)
controller:
[HttpGet]
public ActionResult AddCost()
{
var model = new Cost();
return PartialView(model);
}
[HttpPost]
public void AddCost(Cost model)
{
if (ModelState.IsValid) {
db.SaveCost(model);...
}
}
form Views/Home/AddCost.cshtml:
#using (Ajax.BeginForm(...
{
<div class='editor-label'>#Html.LabelFor(model=>model.Description)</div>
...etc...
}
I'll leave you to set the Ajax.BeginForm properties. But make sure the on-success calls reloadCostList() (see below)
controller
public ActionResult CostList()
{
var model = db.loadCosts(); ...
return PartialView(model);
}
list, Views/Home/CostList.cshtml
#model IEnumerable<ViewModels.Cost>
<table>
<thead>
<tr>
<th>Cost Description</th>
...
<tbody>
#foreach (var cost in Model.Costs)
{
<tr data-id='#cost.Id'>
<td>#Html.DisplayFor(x=>cost.Description)</td>
...
<td><a href='#' class='remove-button'>Remove</a></td>
}
...
2 Create an action + view for the main page with placeholder for the form and calls the list partial-action, eg:
<div id="body">
<div id="formWrapper">
#Html.Action("AddCost")
</div>
<div id="listWrapper">
#Html.Action("ListView")
</div>
</div>
if you already load the data for the page, you can pass it directly to the partial, but there's no need:
#Html.Partial("ListView", Model.Costs)
this allows you to refresh the list via an ajax call, something like:
function reloadCostList() {
$(".listWrapper").load("Home/CostList");
}
(ideally, $.ajax and add some fancy UI to indicate loading)
3 Add a remove action to your controller
[HttpPost]
public void RemoveCost(int id)
{
}
4 Wire up the Remove link
$(function() {
$(".remove-button").click(function() {
var id = $(this).closest("tr").attr("id");
$.post("/Home/RemoveCost/" + id, null, function() {
$(".listWrapper").load("Home/CostList");
// or reloadCostList(); from above
// or:
//$(".listWrapper tr[id=" + id + "]").hide();
});
});
}
rather than re-load the entire list, you could just remove the row (add some fancy UI like fade-out...)

accessing controller method on button click

I am new to C# and MVC, while I understand the Controller and the Model side. I have encountered a problem when accessing methods within a controller in order to do a simple conversion that I can then return to my View.
My Controller:
public class Exercise05Controller : Controller
{
//
// GET: /Exercise05/
public ViewResult Index()
{
return View();
}
public ActionResult GramsToOunces(double? grams)
{
ViewData["grams"] = grams;
ViewData["ounces"] = (grams * 0.035d);
if (grams < 5)
{
return RedirectToAction("Index", "Home");
}
else if (grams > 5)
{
return View("GramsToOunces");
}
return RedirectToRoute(new
{
controller = "Exercise05",
action = "Index"
});
}
}
My Index View:
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<form action="/Exercise05/GramsToOunces" method="post">
<input name="grams" type="text" placeholder="Insert grams to convert to ounces" />
<input type="submit" value="Convert Grams to Ounces" />
</form>
My GramsToOunces View:
#{
ViewBag.Title = "Index";
}
<h2>GramsToOunces</h2>
<!-- Currently nothing else here -->
I believe my issue is arising somewhere on this line; action="/Exercise05/GramsToOunces". Using debugging has shown me that the the controller processes all the information and gets ready to return the view to suddenly just not return anything. I wish to do a simple conversion and then return this as a view. Would someone be able to point me as to where I am going wrong?

As long as your view is named the same as the controller action, try:
#using (Html.BeginForm())
{
<input name="grams" type="text" placeholder="Insert grams to convert to ounces" />
<input type="submit" value="Convert Grams to Ounces" />
}

This is just a sanity check, but you are using the line return View("GramsToOunces", "ounces");. According to the docs http://msdn.microsoft.com/en-us/library/dd470743(v=vs.118).aspx, first string is the view name and second string is the master page. Do you have a master page called "ounces"? If not that could explain why no result is returning. Perhaps you want to use return View("GramsToOunces");

If you simply want to do the conversion and show the result to user. Just make it Ajaxified. Do not post the entire form.Make an ajax call and get the result and show it to user.
Assuming you have jQuery loaded to your form.
#using(Html.BeginForm("GramsToOunce","Exercise5"))
{
<input name="grams" id="gram" type="text" placeholder="Insert grams" />
<input type="submit" id="btnSubmit" value="Convert Grams to Ounces" />
<div id="result"></div>
}
<script type="text/javascript">
$(function(){
$("#btnSubmit").click(function(e){
e.preventDefault();
var url=$(this).closest("form").attr("action");
$.post(url,{ grams : $("#gram").val()} ,function(res){
$("#result").html(res);
});
});
});
</script>
Let's make sure that our action method returns the value.
[HttpPost]
public string GramsToOunces(double? grams)
{
var result=grams * 0.035d;
return result.ToString();
}
Also if you simply want to do the multiplication, just do it in the client side(javascript). No need of a server call.

According to the documentation this line:
return View("GramsToOunces", "ounces");
Tries to return the view with the specified master page. However it seems there is no master page "ounces" in your project. So most likely what you need here is simply:
return View("GramsToOunces");
Note that you do not need to pass any models whatsoever because you are already using the ViewData.

Reloading Partial View with JQuery

I have a page with a video at the top and a list of videos you can choose from. Currently, clicking a link in the video list will reload the entire page. I need it to only refresh the partial view I have containing the video at the top of the page.
I saw several posts here on SO showing how to reload partial views with JQuery, but couldn't get it to work correctly in my situation. I'm unsure how to pass the correct id of the video along.
Controller:
public ActionResult Videos(int topVideo = 0)
{
VideosModel model = new VideosModel();
model.Videos = StatsVideoService.GetEntityList(new Lookup(TableStatsVideo.IsDeleted, false)).OrderByDescending(x => x.DateCreated).ToList();
if (topVideo == 0)
model.TopVideo = model.Videos.First();
else
{
model.TopVideo = model.Videos.Where(x => x.StatsVideoId == topVideo).FirstOrDefault();
if (model.TopVideo == null)
model.TopVideo = model.Videos.First();
}
return View(model);
}
View:
#model Project.Models.VideosModel
<section class="videos">
<div id="top_video">
#{Html.RenderPartial("StatsVideo", Model.TopVideo);}
</div>
<ul>
#foreach (var item in Model.Videos)
{
<li>
<div class="videoList">
<a href ="#Url.Action("Videos", "Home", new { topVideo = item.StatsVideoId })">
<img src="#Url.Content("~/Content/img/video-ph.png")" />
</a>
<p class="videoTitle">#item.Title</p>
</div>
</li>
}
</ul>
</section>
If there's any more information needed, please let me know.

After several hours of bashing my head against the wall, I got it to work! Just as a reference to anyone else in the future who's viewing this article, here's how I got it to work:
I set the onclick of the link to point to a javascript method, passing in the id of the video as a parameter:
#foreach (var item in Model.Videos)
{
<li>
<div class="videoList">
<a href ="#" onclick="updateTopVideo(#item.StatsVideoId)">
<img src="#Url.Content("~/Content/img/video-ph.png")" />
</a>
<p class="videoTitle">#item.Title</p>
</div>
</li>
}
And then I included this script in the view at the bottom:
<script>
var updateTopVideo = function (itemId) {
var url = '#Url.Content("~/Home/StatsVideo/")';
url = url + itemId;
$.get(url, "", callBack, "html");
};
var callBack = function (response) {
$('#top_video').html(response);
};
</script>
Finally, I added a method to my controller that would return the partial view needed for the video at the top of the screen:
public ActionResult StatsVideo(int Id)
{
IStatsVideo vid = StatsVideoService.GetEntity(new Lookup(TableStatsVideo.StatsVideoId, Id));
if (vid == null)
vid = StatsVideoService.GetEntityList(new Lookup(TableStatsVideo.IsDeleted, false)).OrderByDescending(x => x.DateCreated).FirstOrDefault();
return PartialView(vid);
}
This code should be fairly easy to understand. Basically, the onclick calls the first javascript method, which then calls the controller. The controller builds the partial view and returns it. The first javascript method passes it to the second javascript method which sets the html of the div "top_video" to be the returned partial view.
If anything doesn't make sense, or anyone's having trouble with this in the future, let me know and I'll do my best to offer some help.

I think there may be several confusing and inconsistent elements here.
First, you are returning a full view instead of a partial view. This reloads all containing elements, not just the part that is relevant to your partial view.
Second, you are using Url.Action, which only generates the url. I would recommend using Ajax.ActionLink, which allows you to do fully ajax calls, refreshing the content of your partial div and updating a target div element.
instead of:
<div class="videoList">
<a href ="#Url.Action("Videos", "Home", new { topVideo = item.StatsVideoId })">
<img src="#Url.Content("~/Content/img/video-ph.png")" />
</a>
<p class="videoTitle">#item.Title</p>
</div>
try the more modern solution
<div class="videoList">
#Ajax.ActionLink(
"Videos",
"Home",
"new { topVideo = item.StatsVideoId },
new AjaxOptions {
HttpMethod = "GET",
OnSuccess = "handleSuccess"
}
)
</div>
This way you can be very specific on what you want each link to do, and you can pass along multiple parameters as well as define a callback function. You can also use "UpdateTargetId" in your ajax options to load your newly refreshed partial view into a DOM element.

You can remove the around the image and just store the url generated by the Url.Action in a data-href attribute.
Then you can use the jquery load method to load the data:
$(".videolist>img").click(function () {
$("#content").load($(this).data("href"));
});
I created a fiddle that loads content dynamically here, so you can play with it if you want: http://jsfiddle.net/bTsLV/1/