4

我有 2 个标签。

  • 第一个是最重要的，它加载内容非常快。
  • 第二个不是很重要，加载它的内容（图表和摘要）需要很长时间

所以，我不想同时加载两个标签的内容。理想情况下，我只加载第一个选项卡内容，当用户单击第二个选项卡时，我将加载其相关内容（按需）。

为此，我需要在服务器端知道第二个选项卡已被单击，然后将所有相关信息发送回客户端。

关于如何做到这一点的任何想法？

4

5 回答 5

3

jQuery UI 选项卡控件支持AJAX 内容填充选项卡。只需将href选项卡链接设置为将返回 HTML 内容的服务器端 URL。

例如：

<div id="my-tabs">
    <ul>
        <li><a id="myfirst-link" href="/Server/One">First</a></li>
        <li><a id="mysecond-link" href="/Server/Another">Second</a></li>   
    </ul>
</div>

$('#my-tabs').tabs({
    load: function (event, ui) {           
        switch (ui.tab.id) {
            case 'myfirst-link':
                break;
            case 'mysecond-link':
                break;
        }
    },
    ajaxOptions: {
        success: function(result) {
        },
        error: function (xhr, status, index, anchor) {
        }           
    }
});

如果您需要在选项卡完成加载后运行任何 Javascript，则可以使用该load事件。如果您需要全局处理每个 ajax 调用的任何成功或错误，那么您可以使用ajaxOptions.

于 2012-10-02T12:44:28.940 回答
2

为此，您必须在客户端和服务器端进行更改。在服务器端（或代码隐藏），将方法设为静态并使用 [WebMethod] 属性对其进行装饰。

public partial class _Default : System.Web.UI.Page
{
    ...
    [WebMethod]
    public static void MethodToBeCalledUsingAjax(parameters)
    {
        //tab clicked logic goes here
    }
    ...
}

在客户端，在选项卡单击功能内，使用 jquery ajax 如下

var req = $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Default.aspx/MethodToBeCalledUsingAjax",
            data: "{}",
            dataType: "json",
            success: function (msg) {
            }
        });

此 ajax 调用应按需通知服务器端单击选项卡并相应地处理代码。

请忽略样式...我是stackoverflow的新手:)

于 2012-10-02T13:18:41.720 回答
1

用于jQuery-UI Tabs: Content via AJAX填充选项卡。来源：http: //jqueryui.com/demos/tabs/#ajax

这是代码（从上面的链接中获取）：

<script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });
    </script>



<div class="demo">

<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">
        <p>Sample Text</p>
    </div>
</div>

</div>
于 2012-10-02T12:45:03.863 回答
0

虽然我还没有找到如何在单击 jQuery 选项卡时在代码隐藏中触发事件，但是可以使用带有事件处理程序的JuiceUI 选项卡来执行此操作SelectedTabChanged

于 2012-10-03T12:38:35.310 回答
0

您不应等待用户单击第二个选项卡。相反，您可以做的是填写 document.onReady 事件的第一个选项卡。它应该使用请求的 ajax 获取第一个选项卡的内容。

收到第一个 ajax 请求的回复后，在回复回调中，对第二个选项卡发出新请求。这样，当用户处理第一个选项卡时，它将在后台加载，当他/她切换到第二个选项卡时，它也将准备就绪。

在您的文档中使用它

 $(document).ready(function() {
  var req = $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Default.aspx/MethodToBeCalledUsingAjax",
            data: "{}",
            dataType: "json",
            success: function (msg) {
            }
        });
});

在success: 函数中，放置用于加载第二个选项卡的代码。

于 2012-10-03T13:49:25.010 回答