从JavaScript中提升DataGrid ItemCommand事件

Question

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

下面的代码片段大致显示了我想要在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

添加一个隐藏按钮ItemTemplate中与所需的CommandName：

<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>