は、私は私のページに次のASPXのコントロールを持っているjqueryの/アヤックス

Question

を使用してボタンのクリックにGridViewコントロールにバインド：

の1- GridViewコントロール：

<asp:GridView ID="GridView4" runat="server" AutoGenerateColumns="False"> 
<Columns> 
    <asp:BoundField DataField="StartDate" HeaderText="Date" /> 
    <asp:BoundField DataField="Title" HeaderText="Event" /> 
    <asp:BoundField DataField="Name" HeaderText="Contact Name" /> 
    <asp:BoundField DataField="Cell" HeaderText="Contact #" /> 
    <asp:BoundField DataField="EventType" HeaderText="Type" /> 
    <asp:BoundField DataField="Confirmed" HeaderText="Status" /> 
    <asp:BoundField DataField="Comments" HeaderText="Comments" /> 
</Columns> 

2 - テキストボックス（開始日）

<asp:TextBox id="startDate" class="form-control" runat="server"></asp:TextBox> 

、3-のDropDownList（イベント・タイプ）

<asp:DropDownList ID="eventType" class="form-control" runat="server"> 
    <asp:ListItem Enabled="true" Text="Select Event" Value="-1"></asp:ListItem> 
    <asp:ListItem Text="Performance" Value="Performance"></asp:ListItem> 
    <asp:ListItem Text="Promotion" Value="Promotion"></asp:ListItem> 
    <asp:ListItem Text="Rehersal" Value="Rehersal"></asp:ListItem> 
    <asp:ListItem Text="Miscellaneous" Value="Miscellaneous"></asp:ListItem> 
</asp:DropDownList> 

、4-ボタン（フィルター・イベント）

<asp:Button ID="filterEvents" Text="Filter Events" runat="server" /> 

私はボタンのクリックでGridViewコントロールを更新したいです。テキストボックス（startDate）とドロップダウンリスト（eventType）の値に基づいて、WebMethodでクエリが実行され、データベースからデータを取得するために呼び出されます。

これは私のスクリプトです：

<script type="text/javascript"> 
    //Add event handler. 
    $("body").on("click", "[id*=filterEvents]", function() { 
     var startDate = $("[id*=startDate]"); 
     var eventType = $("[id*=eventType]"); 
     $.ajax({ 
      type: "POST", 
      url: "ArtistDashboard.aspx/GetEventsWithFilters", 
      data: '{str_startDate: "' + startDate.val() + '", str_eventType: "' + eventType.val() + '" }', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (response) { 
       var xmlDoc = $.parseXML(response.d); 
       var xml = $(xmlDoc); 
       var customers = xml.find("Table"); 
       var row = $("[id*=GridView4] tr:last-child").clone(true); 
       $("[id*=GridView4] tr").not($("[id*=GridView4] tr:first-child")).remove(); 
       $.each(customers, function() { 
        var customer = $(this); 
        $("td", row).eq(0).html($(this).find("StartDate").text()); 
        $("td", row).eq(1).html($(this).find("Title").text()); 
        $("td", row).eq(2).html($(this).find("Name").text()); 
        $("td", row).eq(3).html($(this).find("Cell").text()); 
        $("td", row).eq(4).html($(this).find("EventType").text()); 
        $("td", row).eq(5).html($(this).find("Confirmed").text()); 
        $("td", row).eq(6).html($(this).find("Comments").text()); 
        $("[id*=GridView4]").append(row); 
        row = $("[id*=GridView4] tr:last-child").clone(true); 
       }); 
      } 
     }); 
    }); 

</script> 

これは私のWebMethod属性です：

[WebMethod(EnableSession = true)] 
    public static string GetEventsWithFilters(string str_startDate, string str_eventType) 
    { 
     string artId = (string)HttpContext.Current.Session["artID"]; 
     string query = null; 

     if (str_startDate == null && str_eventType == "-1") 
     { 
      query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'"; 
     } 
     else if (str_startDate == null && str_eventType == "Performance") 
     { 
      query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND EventType = 'Performance' "; 
     } 
     else if (str_startDate == null && str_eventType != "Promotion") 
     { 
      query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND EventType = 'Promotion' "; 
     } 
     else if (str_startDate == null && str_eventType != "Rehersal") 
     { 
      query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND EventType = 'Rehersal' "; 
     } 
     else if (str_startDate != null && str_eventType == "-1") 
     { 
      query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND StartDate >= '" + str_startDate + "'"; 
     } 
     else if (str_startDate != null && str_eventType == "Performance") 
     { 
      query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND StartDate >= '" + str_startDate + "'AND EventType = 'Performance' "; 
     } 
     else if (str_startDate != null && str_eventType == "Promotion") 
     { 
      query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND StartDate >= '" + str_startDate + "'AND EventType = 'Promotion' "; 
     } 
     else if (str_startDate != null && str_eventType == "Rehersal") 
     { 
      query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND StartDate >= '" + str_startDate + "'AND EventType = 'Rehersal' "; 
     } 

     SqlCommand cmd = new SqlCommand(query); 
     return GetDataWithFilters(cmd).GetXml(); 
    } 

    private static DataSet GetDataWithFilters(SqlCommand cmd) 
    { 
     string myConnection = @"Data Source=REDDEVIL;Initial Catalog=ArtistManagementSystem;Persist Security Info=True; User ID=sa;Password=fastian123;MultipleActiveResultSets=True;Application Name=EntityFramework"; 
     using (SqlConnection con = new SqlConnection(myConnection)) 
     { 
      using (SqlDataAdapter sda = new SqlDataAdapter()) 
      { 
       cmd.Connection = con; 
       sda.SelectCommand = cmd; 
       using (DataSet ds = new DataSet()) 
       { 
        sda.Fill(ds); 
        return ds; 

       } 
      } 
     } 
    } 

問題は、GridViewコントロールが行を表示していないということです。私は間違って何をしていますか？私はjQuery/Ajaxを初めて使用したので、コードに多くの問題があることがわかります。私のコードにも悪いプログラミング慣行がありますが、皆さんは寛大な気持ちで正しい方向に私を指摘してください。私は本当に素晴らしいだろう。

Answer 1

ブラウザで、F12キーを押し、コンソールウィンドウに移動してエラーがないかどうかを確認します。 jQueryはすべてのエラーをコンソールウィンドウに表示します。エラーがない場合は、コンソールウィンドウを使用してJSON応答データを確認および操作します。

Answer 2

GridViewをこの方法で更新することはできません。 ASP.NET Webフォームでこれを処理する慣用方法は、DropDownListのOnSelectedIndexChangedイベントを処理し、DropDownListのAutoPostBackをtrueに設定することです。

ボタンクリックでGridViewを更新する場合は、ボタンサーバー側のOnClickイベントを処理します。

<asp:Button OnClick="OnClickFilterEvents" ID="filterEvents" Text="Filter Events" runat="server" /> 

// in code behind: 
void OnClickFilterEvents(object sender, EventArgs e) 
{ 
    // update your gridview 
} 

あなたはそれをクライアント側を実行したい場合は、すべてのGridViewを使用して、あなたのWebMethodから得られる結果に基づいて、どのようなHTMLテーブルをレンダリングしないほうが良いでしょう。