单击 jQuery 选项卡时如何触发 c# 程序？答案

【解决方案1】：

jQuery UI 选项卡控件支持AJAX content 填充选项卡。只需将选项卡链接的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。

【讨论】：

这种方法不会同时加载两个页面吗？还是会根据用户点击的标签加载每个页面？
它会在每个标签被点击时加载相应的页面。加载完成后，加载事件将触发，您可以检查哪个链接导致加载事件触发并运行适用于该选项卡的任何 JavaScript。

【解决方案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 的新手 :)

【讨论】：

好主意...不幸的是，我需要使用该 webmethod 在我的 aspx 中填充 asp.net 图表控件，由于 static 关键字，这是不可能的
啊对！那么我想不会有简单的方法，除非你打算使用像 Highcharts 或 Raphaël 这样的完整的 javascript 图表控件。

【解决方案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>

【讨论】：

这种方法不会同时加载两个页面吗？还是会根据用户单击的标签加载每个页面？
这将根据用户单击的选项卡加载每个页面。加载的页面取决于给定选项卡的链接中的 href 值：<li><a href="ajax/content2.html">Tab 2</a></li>
所以，你是说每次用户点击一个标签页都会被加载，对吧？

【解决方案4】：

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

【讨论】：

【解决方案5】：

您不应等待用户单击第二个选项卡。相反，您可以做的是填写 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:函数中，放入加载第二个标签的代码。

【讨论】：

好主意...不幸的是，我需要使用该 webmethod 在我的 aspx 中填充 asp.net 图表控件，由于 static 关键字，这是不可能的
我在填充图表控件时没有发现任何问题。如果您可以发布一些代码，我可以帮助您解决这个问题
问题是我无法从 webmethod 访问任何控件...无论如何感谢您的帮助