使用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表。