ASP.Net MVC3 and jQuery UI Tabs

Question

I have created a HTML layout below with jQuery UI tabs All the tab information are related to Employee

HTML Code:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Details</a></li>
        <li><a href="#tabs-2">Deparment</a></li>
        <li><a href="#tabs-3">Salary Info</a></li>
    </ul>
    <div id="tabs-1">
        <p>Some fiels here</p>
    </div>
    <div id="tabs-2">
                <p>Some fiels here</p>
    </div>
    <div id="tabs-3">
                <p>Some fiels here</p>
    </div>
</div>

All i need is i want to keep this in MVC page.

Can i have all tabs in one View or i can use @Html.Partial? or PartialViewResult? for each tab.

Some time the user may update only Department information. Here i should save only that tab information.

I want all these tabs loaded at first time and not in on demand using ajax.

Can anyone suggest how can i organize my need in MVC?

Note: Also another thing is i want to use the same for Add and Edit employee. In case of Add Employee i should able to view only Basic Detail as enabled and other tabs in disabled mode. Once the user save basic detail other tab should get enabled.

Dima · Accepted Answer · 2012-12-17 10:32:14Z

1

View fragmentation:
You can do either single view, or split it on multiple partials. It doesn't really matter till they render necessary html.
To save information from each tab separately, wrap each tab content in <form />, so you'll have multiple forms instead of one.
To show next tab on submit, solution will depend on submit process. If you have synchronous Post(Get) then you'll have to pass pass tab parameter with Response and depend on response open next tab on DOM ready (use jQuery for that). Otherwise, if you submit tabs with ajax, you may switch tab in your handler.

answered Dec 17, 2012 at 10:32

Dima

6,7414 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Billa Over a year ago

Do i use Partial or RenderPartial helper method in main view? How about the return type for each partial view in controller is it ActionResult or PartialViewResult?

Dima Over a year ago

Html.Partial and Html.RenderPartial will give same result. Use Html.Partial, it has clearer syntax. If your view will be used only as partial, use PartialViewResult.

Billa Over a year ago

Sure. I use Partial. When i create my view i select check box Create Partial View and return a PartialViewResult from controller. This view never be used as a single page, they always go as a sub section of a page. Is it ok?

Collectives™ on Stack Overflow

ASP.Net MVC3 and jQuery UI Tabs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related