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

时间:2014-08-01 09:51:49

标签: jquery asp.net-mvc jquery-ui tabs

我一直在寻找最后一天,并且在过去一两年内找不到关于这个特定主题的任何内容,并且因为JQuery似乎对这些事情做了很多弃用,所以看起来很公平。关于当前的JQuery API的这个问题。

JQuery的新手,我想知道这一点;

如果我为团队的每个成员都有一个选项卡,并且每个选项卡都会在数据库的部分视图中加载数据表,当我加载初始页面时,所有选项卡都会填充其部分内容或者只有在点击标签时才会填充它们?

如果在页面加载时填充了选项卡,是否有一种方法可以使选项卡仅在单击时填充?如果有任何意义,我可以提供源代码,只需评论并提出要求即可。

编辑1

由于我使用ASP.NET MVC使用上下文信息呈现部分视图,它实际上只是" ajax /"这在href中很重要还是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的答案!

&#34;如果<li><a>标记中的href引用div,则必须对div进行页面加载才能查看,但如果href引用了某个操作或链接,则可以加载按需。&#34;

1 个答案:

答案 0 :(得分:10)

在jQuery网站上给出了

Example

描述

如果选项卡的内容窗格引用了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");
}