Как запустить метод C #, когда я нажимаю на вкладку с помощью jquery

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 Call, но статическое ключевое слово делает невозможным !!!

Редактировать

вызов 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 уже работает с вами, однако из-за статического ключевого слова вы не можете получить доступ к другим членам класса страницы.

Сначала я вижу, что вам нужно удалитьпанель обновления, так как вы используете 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) { } 
});

и изменить веб-метод для принятия нового параметра как

   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;
  }