当我使用 jquery 单击选项卡时如何触发 c# 方法

Question

我有 3 个标签来加载图表， 所以我希望通过选择每个选项卡来加载数据， 看起来是这样的：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="tabs">
                        <ul>
                            <li><a href="#tabs-1">First Tab</a></li>
                            <li><a href="#tabs-2">Second Tab</a></li>
                            <li><a href="#tabs-3">Third Tab</a></li>
                        </ul>
                        <div id="tabs-1">
                            <p>
                                This is Chart1
                            </p>
                        </div>
                        <div id="tabs-2">
                            <p>
                                This is Chart2
                            </p>
                        </div>
                        <div id="tabs-3">
                            <p>
                                This is Chart3
                            </p>
                            <p>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>

我希望每个选项卡单击加载一个 c# 方法

public void loadFirstTab()
{
     //load first Chart
}
public void loadSecondTab()
{
     //load Second Chart
}
public void loadThirdTab()
{
     //load ThirdChart
}

我尝试使用 Ajax 调用，但静态关键字使其无法使用！！！

编辑

ajax 调用

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

网络方法

public partial class mypage : System.Web.UI.Page 
{ [WebMethod] 
public static void TabClickAjax(string activTab) 
{ 
 If(activTab == "1" )
 {
    LoadFirstTab()
 }
} 
...

}

Answer 1

如果您使用的是 ajax updatepanel，您可以简单地转换为服务器控件并像普通的 asp.net 控件一样工作。 （下例）

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="tabs">
                        <ul>
                            <li><asp:LinkButton ID="LinkButton1" runat="server" OnClick="Tab_Click">First Tab</asp:LinkButton></li>
                            <li><asp:LinkButton ID="LinkButton2" runat="server" OnClick="Tab_Click">Second Tab</asp:LinkButton></li>
                            <li><asp:LinkButton ID="LinkButton3" runat="server" OnClick="Tab_Click">Third Tab</asp:LinkButton></li>
                        </ul>
                        <div id="tabs1" runat="server">
                            <p>
                                This is Chart1
                            </p>
                        </div>
                        <div id="tabs2" runat="server">
                            <p>
                                This is Chart2
                            </p>
                        </div>
                        <div id="tabs3" runat="server">
                            <p>
                                This is Chart3
                            </p>
                            <p>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>

protected void Tab_Click(object sender, EventArgs e)
{
    switch ((sender as LinkButton).ID)
    {
        case "LinkButton1":
            { /* Make Tab 1 active, do other stuff*/
                tabs1.Visible = true; tabs2.Visible = tabs3.Visible = false;
            }; break;
        case "LinkButton2":
            { /* Make Tab 2 active, do other stuff*/
                tabs2.Visible = true; tabs1.Visible = tabs3.Visible = false;
            }; break;
        case "LinkButton3":
            { /* Make Tab 3 active, do other stuff*/
                tabs3.Visible = true; tabs1.Visible = tabs2.Visible = false;
            }; break;
        default:
            break;
    }
}

如果您不喜欢这种方法，可以使用上面@M.Ramadan 的回答。

Answer 2

正如我从您的问题中了解到的，Ajax 已经在与您合作，但是由于 static 关键字，您无法访问页面类的其他成员。

我首先看到您在使用 ajax 时需要删除更新面板，因此更新面板可能会破坏一些 javascript

返回 Ajax 调用，您可以在发送请求时传递所需的参数，这样您就可以在不访问其他页面成员的情况下准备响应

例如：假设您有一个文本框值用于过滤结果，您可以简单地将其添加到您的 ajax 调用中

var filterValue = $('#txtbxID').val();

 $.ajax({
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url:"myPage. aspx/TabClickAjax", 
    data: "{activTab:activTab,txtvalue:filterValue}", 
    dataType: "json", success: function (msg) { } 
});

并更改 web 方法以接受新参数为

   public class MyPage: Page
  {
      [WebMethod]
      public static void TabClickAjax(ParametersObject par)
      {
          If(par.activTab == "1")
          {
              LoadFirstTab(par.txtValue)
          }
      }
  }


  public class ParametersObject
  {
      public string activTab;
      public string txtvalue;
  }