Question

我使用jqueryui-tabs显示选项卡式UI。这是我的标记在 MasterPage 中的显示方式：

<div id="channel-tabs" class="ui-tabs">
    <ul class="ui-tabs-nav">
        <li><%=Html.ActionLink("Blogs", "Index", "Blog", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, new{ title="Blog Results" }) %></li>
        <li><%=Html.ActionLink("Forums", "Index", "Forums", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li>
        <li><%=Html.ActionLink("Twitter", "Index", "Twitter", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li>
    </ul>

   <div id="Blog_Results">
        <asp:ContentPlaceHolder ID="ResultPlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
    </div>

如果通过ajax加载内容，我将返回包含选项卡内容的局部视图。如果直接加载内容，我会在ContentPlaceHolder中加载包含内容的页面。

有点像这样：

<asp:Content ID="Content2" ContentPlaceHolderID="BlogPlaceHolder" runat="server">
    <%=Html.Partial("Partial",Model) %>
</asp:Content>

//same goes for the other tabs.

有了这个，如果我访问网址“/论坛”它首先在博客标签中加载论坛内容，触发博客标签的ajax加载并用博客内容替换内容。

我尝试为每个标签添加不同的占位符，但这也没有修复所有内容，因为加载“/论坛”时它肯定会加载论坛标签，但博客标签会显示首先。
此外，当使用单独的占位符时，如果我加载“/ Blogs”URL，它将首先在Blog contentplaceholder中静态加载内容，然后触发ajax调用以再次加载它并替换它。如果我只是将标签链接到主题标签，那么在加载论坛标签时，我将无法获得博客内容......

您将如何实现预期的行为？我觉得在组织我的观点时可能会有更深层次的问题。是否将标签放在母版页中？也许我应该手动hijax链接，而不是依赖jquery-ui标签为我做的工作。

我无法默认加载所有标签并使用哈希标签显示它们，我需要加载ajax，因为它是一个很长的搜索过程。

总结一下：

/论坛应该加载论坛标签，点击它时让其他标签加载ajax调用。
/ Twitter应该加载twitter标签并让其他标签....
同样适用于/ Blogs以及我稍后会添加的任何标签。

有什么想法让这个工作正常吗？

Answer 1

以下是我在使用母版页中的标签并在每个标签中加载内容占位符时解决双重加载问题的方法，以便我可以使用不同的网址访问每个标签：

 $(function () {
        var first = true;
        var $tabs = $("#channel-tabs").tabs(
                        {
                            ajaxOptions: {
                                beforeSend: function (xhttp) {
                                    if (first) return false;
                                },
                                error: function (xhr, status, index, anchor) {
                                    $(anchor.hash).html("Couldn't load this tab. " + xhr.responseText);
                                }
                         },
                         select: function (event, ui) {
                                first = false;
                         },
                         cache: true,
                        });
    });

当页面加载时，如果它是第一次发生，我取消Ajax请求，我在第一次选择选项卡时重新启用它。

它并不像我想的那样干净，但它做得很好。

Jquery-UI选项卡：双重加载默认选项卡

1 个答案: