带有MVC部分视图的jQuery选项卡 [英] Jquery tabs with mvc partial views

问题描述

是否可以通过jquery的选项卡从控制器预加载动作，以便所有选项卡都以html预加载并且在您单击选项卡时不重新加载页面?

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?

尽管如此，我试图将每个选项卡的html都加载到页面上，因此当您浏览这些选项卡时，不需要重新加载即可检索数据.

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.

推荐答案

这实际上与动作没有任何关系，只需在视图中包含所需的内容即可.可能就这么简单:

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.

这篇关于带有MVC部分视图的jQuery选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！