Load Dynamic Content in jQuery UI Tabs in an ASP.NET MVC 4 application

In this article we will see how to load the contents into Tabs dynamically using ASP.NET MVC 4.0.
Create a new ASP.NET MVC 4.0 application with the name “DynamicContentsTabs”. Choose Internet Application template as shown below –

internet-application

Once the project is created, let’s add the latest version of jQuery script and jQuery UI using NuGet packages. Install the required jQuery Scripts.


Once you are ready with the scripts, let’s add a model with the name CustomerModel into Models folder. Add the following properties in our CustomerModel –

public class CustomerModel
{
    public int CustomerID { get; set; }
    public string ContactName { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}


Once the model is ready as shown above, add a controller with the name “CustomerController”. To add the controller, right click the Controllers folder and add a new controller as shown below –

customer-controller

Now right click the Index method and click on Add View to test our context menu as shown below

add-view

Now add the following code in our Index method of Customer controller –

public ActionResult Index()
{
    var customersCollection = new List<CustomerModel>()
    {
        new CustomerModel{CustomerID=100,ContactName="John R.", City="New York", Country="USA"},
        new CustomerModel{CustomerID=200,ContactName="Shawn R.", City="New York", Country="USA"},
        new CustomerModel{CustomerID=300,ContactName="Anjala K.", City="London", Country="UK"},
    };
    return View(customersCollection);
}

 Let’s test our view as shown below –

customerview

Now add a simple HTML 5 page with the name Test and add the script references for our jQuery as well as jQuery UI libraries. I am also using jQuery Theme as shown below –

jqueryui-links

In the above HTML code, I am using a “Le Frog” them roller. I have downloaded the required files from the jQuery UI –

http://jqueryui.com/themeroller/

You can choose your own theme. Once your initial setup of the theme is ready, now let’s add code for designing the tabs in our Test.html page as shown below. Ideally you should keep CSS in separate files. –

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing jQuery Tabs with Dynamic Contents</title>
    <link href="Content/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.0.3.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.custom.js"></script>
        <style>
    body{
        font: 62.5% "Trebuchet MS", sans-serif;
        margin: 50px;
    }
    .demoHeaders {
        margin-top: 2em;
    }
    #dialog-link {
        padding: .4em 1em .4em 20px;
        text-decoration: none;
        position: relative;
    }
    #dialog-link span.ui-icon {
        margin: 0 5px 0 0;
        position: absolute;
        left: .2em;
        top: 50%;
        margin-top: -8px;
    }
    #icons {
        margin: 0;
        padding: 0;
    }
    #icons li {
        margin: 2px;
        position: relative;
        padding: 4px 0;
        cursor: pointer;
        float: left;
        list-style: none;
    }
    #icons span.ui-icon {
        float: left;
        margin: 0 4px;
    }
    .fakewindowcontain .ui-widget-overlay {
        position: absolute;
    }
    </style>
    <script>
        $(function () {
            $("#tabs").tabs();
        });
    </script>
</head>
<body>
    <h2 class="demoHeaders">Adding Dynamic Contents in jQuery Tabs</h2>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Home</a></li>
        <li><a href="#tabs-2">Contact</a></li>
        <li><a href="/Customer">Customers</a></li>
    </ul>
    <div id="tabs-1">
        <h1>This is Home Tab</h1>
    </div>
    <div id="tabs-2">
        <h1>This is Contact Tab</h1>
    </div>
</div>
</body>
</html>


Notice the url reference to the 3rd item in the tab. Once you add the above code, run your Test.html page, click on the Customers tab and you should see the following output –

dynamic-tabs

In this way, you are not just adding the static contents in jQuery Tabs but you can also add dynamic contents as shown in above example.

3 comments:

  1. Paul CaballeroJuly 18, 2014 at 1:52 AM

    Love this site.

    ReplyDelete
  2. andy andyOctober 16, 2014 at 11:05 AM

    This didn't work for me. when I click the customer's tab, I can't then click to the other tabs

    ReplyDelete
  3. UnknownNovember 2, 2015 at 10:19 AM

    andy andy,

    I believe the issue is that the index action is incorrect. It should not be an ActionResult, instead it should be something like this:

    public PartialViewResult index()
    {
    ...
    return PartialView(customersCollection);
    }

    ReplyDelete