如何在点击jQuery选项卡时触发C#过程？

Question

我有两个选项卡。

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

因此，我不想同时加载两个选项卡的内容。理想情况下，我只需加载第一个选项卡的内容，当用户点击第二个选项卡时，我会按需加载相关内容。

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

有什么好的想法吗？

- aleafonso

---

在<li>项目上使用点击事件的jQuery，然后进行ajax调用。 - Irakli Lekishvili

Answer 1

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

E.g:

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

- devdigital

---

这种方法会同时加载两个页面吗？还是会根据用户点击的选项卡加载每个页面？ - aleafonso

每当单击每个选项卡时，它将加载相应的页面。当加载完成时，将触发加载事件，您可以检查哪个链接导致了加载事件的触发，并运行适用于该选项卡的任何JavaScript代码。 - devdigital

Answer 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的新手 :)

- ganesh

---

好主意...不幸的是，由于静态关键字的存在，我需要从那个WebMethod中填充aspx中的asp.net图表控件，这是不可能的。 - aleafonso

啊，好的！那么我猜除非你打算使用完整的JavaScript图表控件，比如Highcharts或Raphaël，否则就没有简单的方法了。 - ganesh

Answer 3

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

- JSK NS

---

这种方法会同时加载两个页面吗？还是根据用户点击的选项卡加载每个页面？ - aleafonso

这将根据用户点击的选项卡加载每个页面。 加载的页面取决于给定选项卡链接中href值： <li><a href="ajax/content2.html">Tab 2</a></li> - JSK NS

那么，您的意思是每次用户点击选项卡时页面都会重新加载，对吗？ - aleafonso

Answer 4

你不应该等待用户点击第二个选项卡。相反，你可以在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) {
            }
        });
});

在成功的函数中，放置加载第二个选项卡的代码。

- Murtuza Kabul

---

好主意...不幸的是，由于静态关键字的存在，我需要从那个WebMethod中填充aspx中的asp.net图表控件，这是不可能的。 - aleafonso

我在填充图表控件方面没有看到任何问题。如果您可以发布一些代码，我可以帮助您解决这个问题。 - Murtuza Kabul

问题在于我无法从WebMethod访问任何控件...无论如何，感谢您的帮助。 - aleafonso

Answer 5

尽管我还没有找到如何在代码后端单击jQuery选项卡时触发事件，但可以使用JuiceUI Tabs和SelectedTabChanged事件处理程序来实现。

- aleafonso