jQuery-Ui Tabs and Asp.net MVC

Clay made a comment on my previous post and asked how I would use asp.net mvc with jQuery-UI’s tabs. I have slapped together an example project that shows how you could implement the tabs in an asp.net mvc web site. I created an ajax and a regular tab example.

Tab Example jQueryUi

Basically I use a partial view for each tab. This partial view is then also used for the ajax response.

<div id="tabs">
<ul>
	<li><a href="#tabs-1">Text 1</a></li>
	<li><a href="#tabs-2">Text 2</a></li>
	<li><a href="#tabs-3">Text 3</a></li>
</ul>
<div id="tabs-1">
            < % Html.RenderPartial("_tab1", Model);  %></div>
<div id="tabs-2">
	        < % Html.RenderPartial("_tab2", Model);  %></div>
<div id="tabs-3">
	        < % Html.RenderPartial("_tab3", Model);  %></div>
</div>

There is no database access in the example project, I sort of simulated a database by using a service model that provides the viewmodel that holds the texts that are displayed in the three tabs.

Regarding the ajax controller method, it would of course be better to not get the entire viewmodel in a real world situation and then pass that on to the view, but since this is a brief demo I thought I could get away with this in this example .

        public ActionResult getAjaxTab(int id)
        {
            string viewName = string.Empty;

            TabExample.Services.tabTextService serv = new TabExample.Services.tabTextService();
            tabViewModel myModel = serv.getTabViewModel();

            switch (id)
            {
                case 1:
                    viewName = "_tab1";
                    break;
                case 2:
                    viewName = "_tab2";
                    break;
                case 3:
                    viewName = "_tab3";
                    break;
                default:
                    viewName = "_error";
                    break;
            }

            System.Threading.Thread.Sleep(1000);   

            return PartialView(viewName, myModel);
        }

I am using this js function to update the tabs.

        function getContentTab(index) {
            var url='< %= Url.Content("~/Home/getAjaxTab") %>/' + index;
            var targetDiv = "#tabs-" + index;
            var ajaxLoading = "<img id='ajax-loader' src='<%= Url.Content("~/Content") %/>/ajax-loader.gif' align='left' height='28' width='28'>";

            $(targetDiv).html("
" + ajaxLoading + " Loading...
"); 

            $.get(url,null, function(result) {
                $(targetDiv).html(result);
            });
        }

There is a select event on the tabs that you can hook into as well, I just find it easier to just use the onclick event of the tab div’s.

Hope this is some help to anybody out there, it was fun to create this small project. If anyone has any suggestions, or questions let me know in the comments !

Download TabExample Project Link