Question

What I am trying to achieve is a layout view kind of functionality, where I have tabs at the top of pop up window which is also a partial view and I can click on them to navigate between different pages with the help of jquery and partial views. Pretty much a layout kind of functionality.

Please let me know if there is a video tutorial for it or any guidance on how to achieve this.
Also I will need to pass the id to the partial view to fetch the information.

Thanks!

Answer 1

There are several ways you can do it:

1) Like some people mentioned in comments above you can implement JQuery .tab(). Here is a tutorial you can follow:
http://www.jacklmoore.com/notes/jquery-tabs

2) You can create a partial view that will be displayed as a JQuery .dialog(). Within that partial view, at the top you can have three links corresponding to three tabs titles.

Each link will call JQuery .show() on a div that will contains a “tab” content you want to display and .hide() for others. I usually just pass in the id of a div (tab ) I want to display to something like this:

function displaySelectedTab(selectedTab) {
    $("#tab1").hide();
    $("#tab2").hide();
    $("#tab3").hide();

    $(selectedTab).show();
}

3) Third option is to have separate Partial Views for each tab. You can use JQuery .load() method do load different tabs into a Div section:

var url = "/ControllerName/ActionViewThatReturnsPartialView/
$("#popup-div-placeholder").html("").load(url);

To implement a popup window mechanism you can take advantage of JQuery .dialog()

Hope it helps.