Binding на GridView по нажатию кнопки с помощью JQuery/Ajax

Question

У меня есть следующие элементы управления ASPX на моей странице:

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- Text Box (Start Date)

<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 на кнопку мыши. Основываясь на значениях textbox (startDate) и dropdownlist (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 Forms, является обработка события OnSelectedIndexChanged на DropDownList и установка AutoPostBack на DropDownList на 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 на всех и рендеринга HTML таблицы на основе независимо от результатов вы получаете от WebMethod.