从 Javascript 引发 DataGrid ItemCommand 事件

Question

我正在使用 DataGrid 来显示从数据库中检索到的数据，我想知道是否可以使用 Javascript 引发网格的 ItemCommand 事件。

下面的 sn-p 大致显示了我在 DIV removeProductButton 的 onclick 处理程序中尝试执行的操作。我不想使用 asp:Button 或 asp:LinkBut​​ton，因为当前 DIV 的外观是使用 CSS 控制的，并且无论用于创建可点击触发器以允许未来使用的 HTML 元素类型如何，代码都应该可以工作外观和感觉自定义。

<asp:datagrid id="itemGrid" runat="server" cellPadding="0" AutoGenerateColumns="False" GridLines="None">
    <Columns>
        <asp:TemplateColumn>
            <ItemTemplate>
                <div class="items">
                    <div class="product_title"><%#Eval("ItemID")%>.&nbsp;<%#Eval("ItemDescription")%></div>
                    <div class="product_image">
                        <img id="productImage_<%#Eval("ItemID")%>" src="<%#Eval("ThumbnailURL")%>" />
                    </div>
                    <div class="buttons">
                        <div id="removeProductButton" class="buttonStandard" onclick="Do Something HERE...">Remove</div>
                    </div>
                </div>
            </ItemTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:datagrid>

我已尝试在网格的 ItemCreated 事件中使用以下代码，但无法使其正常工作

private void itemGrid_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item ||
        e.Item.ItemType == ListItemType.AlternatingItem)
    {
        dynamic itemData = e.Item.DataItem;

        HtmlGenericControl removeProductButton = (HtmlGenericControl)e.Item.FindControl("removeProductButton");

        removeProductButton.Attributes.Add("onclick", ClientScript.GetPostBackEventReference(removeProductButton, ""));
    }
}

任何帮助将不胜感激。

Answer 1

使用所需的 CommandName 向 ItemTemplate 添加一个隐藏按钮：

<asp:Button 
    ID="removeProductButton_hidden" 
    runat="server" 
    style="display:none;" 
    CommandName="YourCommandName" 
    Text="" />

确保您的“删除”div 具有 runat="server" 属性：

<div ID="removeProductButton" runat="server" class="buttonStandard">Remove</div>

摆脱网格 ItemCreated 处理程序并创建一个网格 ItemDataBound 处理程序，如下所示：

public void grd_ItemDataBound(object sender, DataGridItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        HtmlGenericControl removeProductButton = (HtmlGenericControl)e.Item.FindControl("removeProductButton");

        Button removeProductButtonHidden = (Button)e.Item.FindControl("removeProductButton_hidden");

        removeProductButton.Attributes.Add("onclick", ClientScript.GetPostBackEventReference(removeProductButtonHidden, ""));
    }
}

所以整个网格定义如下所示：

<asp:DataGrid 
    runat="server" 
    ID="itemGrid" 
    OnItemCommand="itemGrid_ItemCommand" 
    OnItemDataBound="itemGrid_ItemDataBound">
    <Columns>
        <asp:TemplateColumn>
            <ItemTemplate>
                <asp:Button 
                    ID="removeProductButton_hidden" 
                    runat="server" 
                    style="display:none;" 
                    CommandName="YourCommandName" 
                    Text="" />
                <div class="items">
                    <div class="buttons">
                        <div ID="removeProductButton" runat="server" class="buttonStandard">Remove</div>
                    </div>
                </div>
            </ItemTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:DataGrid>