Question

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

下面的代码段大致显示了我在DIV removeProductButton的onclick处理程序中尝试做的事情。我不想使用asp：Button或asp：LinkButton，因为目前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>

从Javascript中提升DataGrid ItemCommand事件

1 个答案: