隨著互聯網的飛速發展，前端技術也在不斷地更新迭代。其中，Ajax（Asynchronous JavaScript and XML）是一種用于創建快速動態網頁的技術，可以實現局部刷新、異步交互等功能，為用戶提供更加流暢的操作體驗。在網頁開發中，常常需要對表格數據進行刪除操作，本文將介紹如何使用Ajax來刪除GridView中的行數據。

在使用Ajax刪除GridView行數據之前，我們需要明確一些概念。GridView是ASP.NET中常用的一種數據呈現控件，可以靈活地顯示和操作數據。而Ajax是一種無需刷新整個頁面即可與服務器進行異步交互的技術，能夠提高用戶體驗和頁面加載速度。

假設我們有一個簡單的學生信息表格，每行顯示學生的姓名、年齡和性別。現在的需求是，在表格中添加一個“刪除”按鈕，點擊按鈕后可以刪除相應行數據。使用Ajax實現此功能，可以讓用戶在不刷新整個頁面的情況下，實時刪除數據行并獲得反饋信息。

<asp:GridView ID="GridView1" runat="server" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="BtnDelete" runat="server" Text="刪除" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="姓名" />
<asp:BoundField DataField="Age" HeaderText="年齡" />
<asp:BoundField DataField="Gender" HeaderText="性別" />
</Columns>
</asp:GridView>

首先，我們需要在GridView中添加一個“刪除”按鈕，并設置CommandName屬性為“Delete”。在每一行的刪除按鈕被點擊時，將觸發GridView的RowCommand事件。

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Delete")
{
int rowIndex = Convert.ToInt32(e.CommandArgument);
GridView1.DeleteRow(rowIndex);
// 通過Ajax刪除行數據的操作
Response.Write("刪除成功！");
}
}

在GridView的RowCommand事件中，首先判斷觸發事件的命令是否為“Delete”。然后，通過CommandArgument屬性獲取到點擊按鈕所在行的索引。接下來，我們可以使用GridView的DeleteRow方法刪除行數據。

在刪除行數據后，我們需要通過Ajax實現實時刪除效果。Ajax技術可以通過JavaScript發送異步請求，并通過回調函數處理服務器返回的數據。在本例中，我們可以使用jQuery提供的ajax()方法來發送刪除請求。

step1：引入jQuery庫

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

step2：使用jQuery的ajax方法

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Delete")
{
int rowIndex = Convert.ToInt32(e.CommandArgument);
GridView1.DeleteRow(rowIndex);
string name = GridView1.Rows[rowIndex].Cells[1].Text;
string age = GridView1.Rows[rowIndex].Cells[2].Text;
string gender = GridView1.Rows[rowIndex].Cells[3].Text;
// 使用Ajax刪除行數據的操作
DeleteRowData(name, age, gender);
Response.Write("刪除成功！");
}
}
protected void DeleteRowData(string name, string age, string gender)
{
// 構建刪除請求的URL
string url = "DeleteRow.aspx?name=" + name + "&age=" + age + "&gender=" + gender;
// 使用jQuery的ajax方法發送異步請求
$.ajax({
url: url,
type: "GET",
success: function(response) {
// 刪除成功后的回調函數
console.log(response);
},
error: function(xhr, status, error) {
// 刪除失敗后的回調函數
console.log(error);
}
});
}

在DeleteRowData方法中，我們根據學生姓名、年齡和性別構建刪除請求的URL。然后，使用jQuery的ajax方法發送異步請求，通過GET方式將刪除請求發送給服務器。在請求成功時，執行success回調函數；在請求失敗時，執行error回調函數。你可以根據需要在回調函數中添加相應的操作。

以上就是使用Ajax刪除GridView行數據的詳細步驟。通過此方法，我們可以實現在不刷新整個頁面的情況下，刪除GridView中的數據行并獲得反饋信息。這樣，用戶在操作過程中將獲得更好的體驗。