-3

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.

tereško
  • 58,060
  • 25
  • 98
  • 150
imGreg
  • 900
  • 9
  • 24
  • I'm not clear on what you mean by "preload actions." You can define your jQuery tabs to contain partial views (as the tag on the question implies), and there's no need to reload the whole page when switching tabs. What exactly are you trying to do? Or what are you doing now that isn't working? – David Mar 18 '14 at 15:05
  • trying to have the page initial load with all the html of the 4 tabs already there so the page does not need to reload again when you navigate through the tabs – imGreg Mar 18 '14 at 15:19
  • Then you'd just include that content in the view. Which can perhaps reference partial views if necessary (if that's how your views are organized). This doesn't sound like it has anything to do with actions. Maybe you can show what you're doing and explain how it's not working as desired? – David Mar 18 '14 at 15:20
  • Create an answer so I can mark you correct – imGreg Mar 18 '14 at 15:21

1 Answers1

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.

David
  • 208,112
  • 36
  • 198
  • 279
  • quick question. What is the difference between @html.partial and @html.renderpartial? – imGreg Mar 18 '14 at 15:33
  • 1
    @imGreg: http://stackoverflow.com/questions/5248183/html-partial-vs-html-renderpartial-html-action-vs-html-renderaction :) – David Mar 18 '14 at 15:33
  • @David how can I refresh one of the tab on an event e.g button click – Kayani Jan 20 '15 at 06:05
  • @Kayani: You could either refresh the whole page, or perhaps fetch the tab's content from an AJAX request and replace the content with the response of that request. – David Jan 20 '15 at 13:06
  • @David actually i'am using the load function of tabs to load the new contents but the issue is that when I again fire an event on that tab's control such as button or link the call to controller is sent twice which suggests that things are getting duplicated, what can i possibly do to prevent that? – Kayani Jan 21 '15 at 04:44