使用jquery / ajax在按钮单击上绑定到gridview

Question

I have the following aspx controls on my page:

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 ( Event Type )

<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- Button ( Filter Events )

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

I want to update the GridView on button click. Based on the values of textbox(startDate) and dropdownlist(eventType) a query is made in my WebMethod and called to retrieve data from database.

This is my script:

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

This is my 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;

                }
            }
        }
    }

The problem is that the GridView is not displaying any rows. What am I doing wrong? I know there can be a lot of problems with my code because this is my first time using jQuery/Ajax. There are bad programming practices in my code as well, But guys please be generous and point me in the right direction. I will be really greatful.

Answer 1

In your browser, press F12, go to console window and check for any errors. jQuery displays all the errors in console window. If there is no error, then use console window to check and manipulate JSON response data.

Answer 2

You cannot update your GridView this way. The idiomatic way you would handle this in ASP.NET Web Forms is to handle the OnSelectedIndexChanged event on the DropDownList and set AutoPostBack on the DropDownList to true.

If you want to update the GridView on the button click, then handle the OnClick event on the button server side.

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

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

If you want to do it client side, you are better off not using a GridView at all and rendering an HTML table based on whatever results you get from your WebMethod .