在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

在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");
}