CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3jquery-ui-tabs
Billa
Billa

Reputation: 5266

ASP.Net MVC3 and jQuery UI Tabs

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.

Upvotes: 1

Views: 678

Answers (1)

Dima
Dima

Reputation: 6741

  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.
  2. To save information from each tab separately, wrap each tab content in <form />, so you'll have multiple forms instead of one.
  3. 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.

Upvotes: 1

Related Questions