使用 SelectedIndexChanged 从 Gridview 中删除行
Deleting Row from Gridview with SelectedIndexChanged
我有一个实施了 SelectedIndexChanged 事件的 gridview。现在，我添加了一个带有 LinkButton 的模板字段来删除该行。但是，我无法单击 GridView 上的 link 按钮，因为它总是触发 SelectedIndexChanged。
实现 SelectedIndexChanged 功能后如何使“删除”按钮起作用。
<asp:GridView ID="gvOnboardingMembers" runat="server" AllowPaging="True" PageSize="30" AllowSorting="True" OnPageIndexChanging="gvOnboardingMembers_PageIndexChanging" OnRowDataBound="gvOnboardingMembers_RowDataBound" OnRowDeleting="gvOnboardingMembers_RowDeleting"
AutoGenerateColumns="False" OnSorting="gvOnboardingMembers_Sorting" EnableViewState="False" BackColor="White" BorderColor="#cccccc" BorderWidth="1px" CellPadding="2"
EmptyDataText="No onboarding member found" GridLines="None" OnSelectedIndexChanged="gvOnboardingMembers_SelectedIndexChanged" Width="100%">
<AlternatingRowStyle BackColor="#ededed" />
<Columns>
<asp:TemplateField HeaderText="OnboardingMemberID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblOnboardingMemberID" runat="server" Text='<%#Eval("OnboardingMemberID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField DataField="VendorName" HeaderText="Vendor" SortExpression="VendorName" HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField DataField="BusinessFunctionDisplayName" HeaderText="Business Function" SortExpression="BusinessFunctionDisplayName" HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField DataField="CreatedDate" HeaderText="Upload Timestamp" SortExpression="CreatedDate" HeaderStyle-HorizontalAlign="Left"/>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="lnkRemoveEntry" runat="server" OnClick="lnkRemoveEntry_Click" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ItemStyle-Width="20" ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="#cccccc" ForeColor="Black" />
<HeaderStyle BackColor="#6699cc" Font-Bold="True" ForeColor="White" BorderColor="#cccccc" BorderWidth="1px" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<RowStyle BackColor="#fefefe" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>
后端代码
protected void gvOnboardingMembers_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';";
e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gvOnboardingMembers, "Select$" + e.Row.RowIndex);
e.Row.ToolTip = "Click to select this row.";
DataRowView dataItem = (DataRowView)e.Row.DataItem;
var removeEntry = e.Row.FindControl("lnkRemoveEntry") as LinkButton;
removeEntry.CommandArgument = dataItem["OnboardingMemberID"].ToString();
}
}
protected void gvOnboardingMembers_SelectedIndexChanged(object sender, EventArgs e)
{
foreach (GridViewRow row in gvOnboardingMembers.Rows)
{
if (row.RowIndex == gvOnboardingMembers.SelectedIndex)
{
row.BackColor = ColorTranslator.FromHtml("#A1DCF2");
row.ToolTip = string.Empty;
}
else
{
row.BackColor = ColorTranslator.FromHtml("#FFFFFF");
row.ToolTip = "Click to select this row.";
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
BindOnboardingMember();
}
private void BindOnboardingMember()
{
DataView dv = new DataView(DataManager.ToDataTable<OnboardingMember>(DraftMembers));
dv.Sort = OnboardingMemberSortExpression;
gvOnboardingMembers.DataSource = dv;
gvOnboardingMembers.DataBind();
}
protected void lnkRemoveEntry_Click(object sender, EventArgs e)
{
var lnkButton = (LinkButton)sender;
}
protected void gvOnboardingMembers_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
if(DeleteOnboardingMember(Guid.Parse(((Label)(gvOnboardingMembers.Rows[e.RowIndex].Cells[0].FindControl("lblOnboardingMemberID"))).Text)))
BindOnboardingMember();
}
请让我知道，如果有任何方法可以防止在 selectedIndexChanged 上回传。我想我的删除事件没有执行，因为每次回发页面时我的 gridview 都会反弹（请参阅页面加载事件）。但是，这是使 SelectedIndexChanged 正常工作所必需的。
试试这个方法。
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindOnboardingMember();
}
}
我无法阻止这种情况，但我实施了一项解决方案，即在删除点击时使用 WebMethods 而不是常规的 RowDeleting 事件。
protected void gvOnboardingMembers_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';";
e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gvOnboardingMembers, "Select$" + e.Row.RowIndex);
e.Row.ToolTip = "Click to select this row.";
DataRowView dataItem = (DataRowView)e.Row.DataItem;
if ((e.Row.RowState & DataControlRowState.Edit) == 0)
{
LinkButton deleteButton = (LinkButton)e.Row.Cells[7].Controls[0];
if (deleteButton != null)
deleteButton.Attributes.Add("onclick", "return deleteOnboardingMember('" + dataItem["OnboardingMemberID"].ToString() + "');");
}
}
}
[WebMethod(EnableSession=true)]
public static void DeleteOnboardingMember(string onboardingMemberID)
{
if(new processingClass().DeleteOnboardingMember(Guid.Parse(onboardingMemberID)))
HttpContext.Current.Session["DraftMembers"] = null;
}
脚本
<script type="text/javascript">
function deleteOnboardingMember(id) {
if (confirm("Are you sure you want to remove this entry?"))
{
$.ajax({
type: "POST",
url: "/OnboardingRequest.aspx/DeleteOnboardingMember",
async: false,
contentType: "application/json; charset=utf-8",
data: "{ 'onboardingMemberID': '" + id + "'}",
dataType: "json",
success: function () {
window.location.reload();
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.error + ")");
alert(err.Message);
},
failure: function () {
alert('failure');
}
});
}
return false;
}
</script>
鉴于您的 Gridview 定义（我排除了装饰性的东西）：
<asp:GridView ID="gvOnboardingMembers" runat="server"
AllowPaging="True"
PageSize="30"
AllowSorting="True"
OnPageIndexChanging="gvOnboardingMembers_PageIndexChanging"
OnRowDataBound="gvOnboardingMembers_RowDataBound"
OnRowDeleting="gvOnboardingMembers_RowDeleting"
OnSorting="gvOnboardingMembers_Sorting"
EnableViewState="False"
EmptyDataText="No onboarding member found"
OnSelectedIndexChanged="gvOnboardingMembers_SelectedIndexChanged">
您对如何在 Gridivew 中触发事件有一个基本的误解。您不能简单地添加一个名为 "Delete" 的 LinkButton 并提供这样的事件处理程序：
<asp:LinkButton ID="lnkRemoveEntry" runat="server"
OnClick="lnkRemoveEntry_Click"
Text="Delete" />
并期望触发 GridView RowDeleting 事件。您需要在 Button 中提供一个 CommandName。对于删除操作，您需要将 CommandName="Delete" 添加到 Link 按钮。 See this for more on handling GridView operations
GridView 还能识别其他几个 CommandName 值："Insert"、"Edit"、"Update"、"Cancel"。每个触发它自己适当的 Gridview 行特定事件，并且 ALL 触发 RowCommand 事件。
当您没有指定数据源时，您必须手动连接所有编辑命令事件，这包括确保您获取正确的 PK 来处理删除和更新操作。
我有一个实施了 SelectedIndexChanged 事件的 gridview。现在，我添加了一个带有 LinkButton 的模板字段来删除该行。但是，我无法单击 GridView 上的 link 按钮，因为它总是触发 SelectedIndexChanged。
实现 SelectedIndexChanged 功能后如何使“删除”按钮起作用。
<asp:GridView ID="gvOnboardingMembers" runat="server" AllowPaging="True" PageSize="30" AllowSorting="True" OnPageIndexChanging="gvOnboardingMembers_PageIndexChanging" OnRowDataBound="gvOnboardingMembers_RowDataBound" OnRowDeleting="gvOnboardingMembers_RowDeleting"
AutoGenerateColumns="False" OnSorting="gvOnboardingMembers_Sorting" EnableViewState="False" BackColor="White" BorderColor="#cccccc" BorderWidth="1px" CellPadding="2"
EmptyDataText="No onboarding member found" GridLines="None" OnSelectedIndexChanged="gvOnboardingMembers_SelectedIndexChanged" Width="100%">
<AlternatingRowStyle BackColor="#ededed" />
<Columns>
<asp:TemplateField HeaderText="OnboardingMemberID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblOnboardingMemberID" runat="server" Text='<%#Eval("OnboardingMemberID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField DataField="VendorName" HeaderText="Vendor" SortExpression="VendorName" HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField DataField="BusinessFunctionDisplayName" HeaderText="Business Function" SortExpression="BusinessFunctionDisplayName" HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField DataField="CreatedDate" HeaderText="Upload Timestamp" SortExpression="CreatedDate" HeaderStyle-HorizontalAlign="Left"/>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="lnkRemoveEntry" runat="server" OnClick="lnkRemoveEntry_Click" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ItemStyle-Width="20" ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="#cccccc" ForeColor="Black" />
<HeaderStyle BackColor="#6699cc" Font-Bold="True" ForeColor="White" BorderColor="#cccccc" BorderWidth="1px" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<RowStyle BackColor="#fefefe" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>
后端代码
protected void gvOnboardingMembers_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';";
e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gvOnboardingMembers, "Select$" + e.Row.RowIndex);
e.Row.ToolTip = "Click to select this row.";
DataRowView dataItem = (DataRowView)e.Row.DataItem;
var removeEntry = e.Row.FindControl("lnkRemoveEntry") as LinkButton;
removeEntry.CommandArgument = dataItem["OnboardingMemberID"].ToString();
}
}
protected void gvOnboardingMembers_SelectedIndexChanged(object sender, EventArgs e)
{
foreach (GridViewRow row in gvOnboardingMembers.Rows)
{
if (row.RowIndex == gvOnboardingMembers.SelectedIndex)
{
row.BackColor = ColorTranslator.FromHtml("#A1DCF2");
row.ToolTip = string.Empty;
}
else
{
row.BackColor = ColorTranslator.FromHtml("#FFFFFF");
row.ToolTip = "Click to select this row.";
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
BindOnboardingMember();
}
private void BindOnboardingMember()
{
DataView dv = new DataView(DataManager.ToDataTable<OnboardingMember>(DraftMembers));
dv.Sort = OnboardingMemberSortExpression;
gvOnboardingMembers.DataSource = dv;
gvOnboardingMembers.DataBind();
}
protected void lnkRemoveEntry_Click(object sender, EventArgs e)
{
var lnkButton = (LinkButton)sender;
}
protected void gvOnboardingMembers_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
if(DeleteOnboardingMember(Guid.Parse(((Label)(gvOnboardingMembers.Rows[e.RowIndex].Cells[0].FindControl("lblOnboardingMemberID"))).Text)))
BindOnboardingMember();
}
请让我知道，如果有任何方法可以防止在 selectedIndexChanged 上回传。我想我的删除事件没有执行，因为每次回发页面时我的 gridview 都会反弹（请参阅页面加载事件）。但是，这是使 SelectedIndexChanged 正常工作所必需的。
试试这个方法。
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindOnboardingMember();
}
}
我无法阻止这种情况，但我实施了一项解决方案，即在删除点击时使用 WebMethods 而不是常规的 RowDeleting 事件。
protected void gvOnboardingMembers_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';";
e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gvOnboardingMembers, "Select$" + e.Row.RowIndex);
e.Row.ToolTip = "Click to select this row.";
DataRowView dataItem = (DataRowView)e.Row.DataItem;
if ((e.Row.RowState & DataControlRowState.Edit) == 0)
{
LinkButton deleteButton = (LinkButton)e.Row.Cells[7].Controls[0];
if (deleteButton != null)
deleteButton.Attributes.Add("onclick", "return deleteOnboardingMember('" + dataItem["OnboardingMemberID"].ToString() + "');");
}
}
}
[WebMethod(EnableSession=true)]
public static void DeleteOnboardingMember(string onboardingMemberID)
{
if(new processingClass().DeleteOnboardingMember(Guid.Parse(onboardingMemberID)))
HttpContext.Current.Session["DraftMembers"] = null;
}
脚本
<script type="text/javascript">
function deleteOnboardingMember(id) {
if (confirm("Are you sure you want to remove this entry?"))
{
$.ajax({
type: "POST",
url: "/OnboardingRequest.aspx/DeleteOnboardingMember",
async: false,
contentType: "application/json; charset=utf-8",
data: "{ 'onboardingMemberID': '" + id + "'}",
dataType: "json",
success: function () {
window.location.reload();
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.error + ")");
alert(err.Message);
},
failure: function () {
alert('failure');
}
});
}
return false;
}
</script>
鉴于您的 Gridview 定义（我排除了装饰性的东西）：
<asp:GridView ID="gvOnboardingMembers" runat="server"
AllowPaging="True"
PageSize="30"
AllowSorting="True"
OnPageIndexChanging="gvOnboardingMembers_PageIndexChanging"
OnRowDataBound="gvOnboardingMembers_RowDataBound"
OnRowDeleting="gvOnboardingMembers_RowDeleting"
OnSorting="gvOnboardingMembers_Sorting"
EnableViewState="False"
EmptyDataText="No onboarding member found"
OnSelectedIndexChanged="gvOnboardingMembers_SelectedIndexChanged">
您对如何在 Gridivew 中触发事件有一个基本的误解。您不能简单地添加一个名为 "Delete" 的 LinkButton 并提供这样的事件处理程序：
<asp:LinkButton ID="lnkRemoveEntry" runat="server"
OnClick="lnkRemoveEntry_Click"
Text="Delete" />
并期望触发 GridView RowDeleting 事件。您需要在 Button 中提供一个 CommandName。对于删除操作，您需要将 CommandName="Delete" 添加到 Link 按钮。 See this for more on handling GridView operations
GridView 还能识别其他几个 CommandName 值："Insert"、"Edit"、"Update"、"Cancel"。每个触发它自己适当的 Gridview 行特定事件，并且 ALL 触发 RowCommand 事件。
当您没有指定数据源时，您必须手动连接所有编辑命令事件，这包括确保您获取正确的 PK 来处理删除和更新操作。