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

I've been searching for the last day and can't find anything on this specific topic asked within the last year or two, and as JQuery appears to deprecate things quite a lot, it seems fair to ask this question with regard to the current JQuery API.

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

Bit new to JQuery, I'd like to know this;

对JQuery有点新意,我想知道这个;

If I have a tab for every member of a team, and for each of those tabs a table of data is loaded in a partial view from a database, when I load the initial page will all the tabs be populated with their partials or will they only be populated when the tab is clicked?

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

If the tabs are populated on page load, is there a way to make it so that the tabs only populate when clicked? I can provide the source code if there's any point in doing so, just comment and ask for it.

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

EDIT 1

As I'm using ASP.NET MVC to render the partial views with contextual information, is it literally just the "ajax/" that is important in the href or does the href need to link to static content? Question regards:

因为我使用ASP.NET MVC来渲染具有上下文信息的局部视图,所以它实际上只是在href中重要的“ajax /”或者href是否需要链接到静态内容?问题问题:

<div class="h-single" id="users">
    <ul>
        @{
            foreach (var user in Model)
            {
                <li><a href="ajax/"[e-mail]><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>

Just noticed you don't need the divs for ajax content so that ain't gonna work either.

刚注意到你不需要ajax内容的div,所以也不会工作。

EDIT 2

Solution:

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

Credits to Ashwini Verma for the answer!

致Ashwini Verma的答案!

"If the href in the <li><a> tag references a div then the div must be page-loaded in order to be viewed, but if the href references an action or a link then it can be loaded on demand."

“如果

标签中的href引用div,则必须对div进行页面加载才能查看,但如果href引用某个动作或链接,则可以按需加载。”

1 个解决方案

#1

Example given on jQuery site.

在jQuery站点上给出的示例。

Description

If the content pane for a tab references a HTML element then the tab will be page-loaded;

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

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

If the content pane for a tab references a URL, the tab will be loaded via AJAX when the tab is selected;

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

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

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

Action Method

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