Jquery tabs with mvc partial views [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 9 years ago.

Improve this question

Is it possible to preload actions from the controller through tabs of jquery so that all the tabs are preloaded in html and do not reload the page when you click on the tab?

Nonetheless, I am trying to have the html for each tab already loaded on the page so when you navigate through the tabs you dont need to reload to retrieve data.

Answer 1

This doesn't really have anything to do with actions, it's just a matter of including the desired content in your view. It could be as simple as this:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">first tab</a></li>
    <li><a href="#tabs-2">second tab</a></li>
    <li><a href="#tabs-3">third tab</a></li>
  </ul>
  <div id="tabs-1">
    first tab content
  </div>
  <div id="tabs-2">
    second tab content
  </div>
  <div id="tabs-3">
    third tab content
  </div>
</div>

If your views are organized such that the tabs' contents are in partial views, just render those partial views in those tabs:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">first tab</a></li>
    <li><a href="#tabs-2">second tab</a></li>
    <li><a href="#tabs-3">third tab</a></li>
  </ul>
  <div id="tabs-1">
    @Html.Partial("FirstTabView", Model)
  </div>
  <div id="tabs-2">
    @Html.Partial("SecondTabView", Model)
  </div>
  <div id="tabs-3">
    @Html.Partial("ThirdTabView", Model)
  </div>
</div>

Ultimately this is just about defining the view in the output. The controller actions are to handle further input.