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

Question

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

jqueryasp.net-mvcjquery-uitabs

6

我已经搜索了一整天，但没有找到最近一两年内有关此特定主题的任何内容，由于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>

我注意到你不需要用div来获取ajax内容，所以那也行不通。

编辑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引用了一个动作或链接，则可以按需加载。

- Inspector Squirrel

你可以在选项卡点击时仅加载部分视图。 - Ashwini Verma

两种方式都可行，您可以在页面加载时加载所有部分并在选项卡中显示它们，也可以在单击时加载部分... - Kartikeya Khosla

任何关于此事的信息都将不胜感激，因为我对JQuery还很陌生，所以我并没有在API文档中找到特别清晰的说明。 - Inspector Squirrel

@AshwiniVerma 我有类似的问题，我想在选定选项卡后加载部分视图，但是当我尝试实现上述解决方案时，它会在选择选项卡1时加载选项卡2中的部分视图。你能帮忙吗？ - Mrudang Vora

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ashwini Verma · Accepted Answer

jQuery官网上的示例。

描述

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

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

如果选项卡的内容面板引用了一个URL，那么当选择该选项卡时，该选项卡将通过AJAX加载；

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

Example

<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>

Updated

href should be the URL of the action method which loads the partial view. Example

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

Action Method

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