Question

When creating a new user in my application I’m displaying a JQuery modal popup ( .dialog() ) which consists a partial view with Three sub-partial views being displayed as tabs.

Tabs content ( partial views ) gets loaded inside of the modal popup with an Ajax call that simply replaces with

Javascript to render a tab content:

        $.post('@Url.Action("AddUserEducation","User")', { id: userId},
        function(data) {
            $("#education").show().html(data);
           }

ActionMethod:

    public PartialViewResult AddUserEducation(Guid id)
    {
            var userEducation = new UserEducation();
            var user = GetUserFromRepository(id);
            userEducation.User = User;

            return PartialView("UserEducation", userEducation);
    }

User partial view where tabs will be displayed:

<div id="details"></div>
<div id="education"></div>
<div id="employment"></div>

so every time the tab is switched another partial view gets loaded inside of the popup Div.

I can’t think of a good way to keep my data when I switch tabs.

Every time I switch tabs an Actionmethod is called to populate div with the tab content html and I loose everything that was already entered.

Thanks in advance guys! Please don’t hesitate to ask any questions.

Extra info:

Models: For a parent popup I have a “User” model and then I pass its UserDetails, UserEducation and UserEmployment to the three partial view tabs respectfully: User details, User education, User Employment.

How can I let the user freely navigate through tabs without losing data so that when finished they can simply save the User model and have the three connected entities saved as well without losing any data.

p.s. I’m not using the jquery tab control because I’m required not to.

Answer 1

You should load this partial view into popup all at once. I mean all content of all 3 tabs tabs. Show more code to get better solution, especially Javascript part.