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

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-文本框（开始日期）

<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窗体处理这种情况惯用的办法是处理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并根据从WebMethod获得的任何结果呈现HTML表。