在 JQueryUI 选项卡选择上加载 ASP.NET MVC 部分视图

Question

我一直在寻找最后一天，但在过去一两年内找不到关于这个特定主题的任何内容，并且由于 JQuery 似乎已经弃用了很多东西，所以问这个问题似乎是公平的到当前的 JQuery API。

对 JQuery 有点陌生，我想知道这个；

如果我为团队的每个成员都有一个选项卡，并且对于每个选项卡，在数据库的部分视图中加载一个数据表，当我加载初始页面时，所有选项卡都将填充它们的部分还是仅在单击选项卡时才会填充它们？

如果选项卡在页面加载时填充，有没有办法使选项卡仅在单击时填充？如果有任何意义，我可以提供源代码，只需发表评论并索取即可。

编辑 1

当我使用 ASP.NET MVC 来呈现带有上下文信息的部分视图时，它实际上只是在 href 中重要的“ajax/”还是 href 需要链接到静态内容？问题问候：

<div class="h-single" id="users">
    <ul>
        @{
            foreach (var user in Model)
            {
                <li><a href="ajax/"+@user.EHLogin><span>@user.Name</span></a></li>
            }
        }
    </ul>
    @{
        foreach (var user in Model) 
        {
            <div id=@user.EHLogin>@Html.Action("_userAdvisoryRequests", new { username = user.EHLogin })
            </div>
        }
    }
</div>

刚刚注意到您不需要用于 ajax 内容的 div，因此它也不起作用。

编辑 2

解决方案：

<div class="h-single" id="users">
    <ul>
        @{
            foreach (var user in Model)
            {
                <li><a href=@Url.Action("_partial","Home", new { param = @user.Param })><span>@user.Name</span></a></li>
            }
        }
    </ul>
</div>

感谢 Ashwini Verma 的回答！

"如果<li><a>标签中的href引用了一个div，那么这个div必须被页面加载才能被查看，但是如果href引用了一个动作或者一个链接，那么它可以按需加载。"

Answer 1

Example 在 jQuery 网站上给出。

说明

如果选项卡的内容窗格引用 HTML 元素，则该选项卡将被页面加载；

<li><a href="#tabs-1">Preloaded</a></li>

如果选项卡的内容窗格引用 URL，则在选择选项卡时将通过 AJAX 加载该选项卡；

<li><a href="ajax/content1.html">Tab 1</a></li>

示例

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1"></div>
</div>

<script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
</script>

更新

href 应该是加载局部视图的操作方法的 URL。示例

<a href="@Url.Action("YourActionForContent", "Home")">Load Tab Content</a>

动作方法

public PartialViewResult YourActionForContent()
{
    return PartialView("_Content");
}