Create partial views as tabs with MVC3

Question

I have 2-3 different views in an application and there is main view. I main view I want to show these 2-3 views as tabs. So that if user click on a tab the previous view should get hidden and new view should open. I am making an Ajax call while opening a new tab but other view is not opening. How do I implement this?

$('#tabRating').click(function () {
        $.ajax({
            "dataType": 'json',
            "type": "get",

            "url": '@Url.Action("TabsSelect", "Employee")'



        });

    });


public ActionResult TabsSelect()
    {
        return PartialView("Rating");
    }

Does this help ? stackoverflow.com/questions/6420092/…

Anirban
– Anirban

2012-04-07 03:30:24 +00:00
Commented Apr 7, 2012 at 3:30 — Anirban
– Anirban, Commented Apr 7, 2012 at 3:30

garfbradaz · Accepted Answer · 2012-04-07 18:39:50Z

As Duncan advises above, the best framework to use it the JQuery UI Tabs, which funny enough i have been using.

Here are some code samnples.

The view has an Jquery script which taps into the jquery.tabs() functionality:

<script type="text/javascript">
    $(document).ready(function() {
        $("#tabs").tabs();
        getContentTab (1);
    });

    function getContentTab(index) {
        var url='@Url.Content("~/SiteAdmin/AjaxGetTab")/' + 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("<p>" + ajaxLoading + " Loading...</p>"); 
        $.ajax({
          type: 'get',
          url: url,
          cache: false,
          success: function(result) {
            $(targetDiv).html(result);
          }
        });           


    }

Here is my controller action method which passes pack the required Partial View.

     /// <summary>
    /// AJAX action method to obtain the correct Tab to use.
    /// </summary>
    /// <param name="index">Tab number</param>
    /// <returns>Partial View</returns>
    public ActionResult AjaxGetTab(int id)
    {
        string partialViewName = string.Empty;
        object model = null;

        //--Decide which view and model to pass back.
        switch (id)
        {
            case 1:
                partialViewName = "_TransactionType";
                model = db.TransactionTypes.ToList();
                break;
            case 2:
                partialViewName = "_DirectionType";
                model = db.DirectionTypes.ToList();
                break;
            case 3:
                partialViewName = "_UserType";
                model = db.UserTypes.ToList();
                break;
            case 4:
                partialViewName = "_CurrencyType";
                model = db.CurrencyTypes.ToList();
                break;
            case 5:
                partialViewName = "_tabError";
                break;

        }

        return PartialView(partialViewName,model);
    }
}

This allows me to run multiple tabs and persit the required data for each tab seperately.

The JQuery UI for tabs makes it very easy to implement Tabs cleanly.

How getContentTab will be invoked on tab clicks? It's working for first time load.

Duncan · Accepted Answer · 2012-04-07 09:30:17Z

The jQuery code you are using makes an ajax call but doesn't do anything with the partial view it gets back. If you want to insert it into the page, you need to supply a callback function to do so, for example:

$.ajax({
    type: "get",
    url: '@Url.Action("TabsSelect", "Employee")',
    success: function (data) {
        $("#thingToPutTabContentIn").html(data);
    }
});

(note that you don't want the "dataType": 'json' bit you have, assuming your 'Rating' partial is just a normal partial view). To do the same thing a bit more simply, you can use jQuery's load() method:

$("#thingToPutTabContentIn").load('@Url.Action("TabsSelect", "Employee")');

Having said that, if you haven't done so already you should probably check out jQuery UI's Tabs, which is designed to do exactly the the sort of thing you need - just look at the ajax example to see how you'd go about using it.

Collectives™ on Stack Overflow

Create partial views as tabs with MVC3

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related