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