如何在ASP.Net GridView中使用圖像而不是文本AutoGenerateEditButton

Question

我正在使用AutoGenerateEditButton以及Delete和Select。

我想使用圖像，而不是文字的鏈接。

我該怎麼做？

我不想手動創建命令列，因爲在我正在處理的大型項目中使用AutoGenerate屬性。

Answer 1

子類GridView控件，並在乘坐CreateChildControls方法

protected override int CreateChildControls(System.Collections.IEnumerable dataSource, bool dataBinding) 
    { 
     // re-use the AutoGenerate...Button properties 
     bool showDelete = AutoGenerateDeleteButton; 
     bool showEdit = AutoGenerateEditButton; 
     bool showSelect = AutoGenerateSelectButton; 

     // turn them all off, we'll be creating our own 
     AutoGenerateDeleteButton = false; 
     AutoGenerateEditButton = false; 
     AutoGenerateSelectButton = false; 

     // hide the column if it already exists 
     if (Columns[0].GetType() == typeof(CommandField)) 
     { 
      Columns.RemoveAt(0); 
     } 

     // add the command column if necessary 
     if (showDelete || showEdit || showSelect) 
     { 
      CommandField cmdField = new CommandField(); 
      cmdField.HeaderText = string.Empty; 
      cmdField.ButtonType = ButtonType.Image; 
      cmdField.ShowSelectButton = showSelect; 
      cmdField.ShowEditButton = showEdit; 
      cmdField.ShowDeleteButton = showDelete; 
      cmdField.DeleteImageUrl = "~/images/delete.bmp"; 
      cmdField.EditImageUrl = "~/images/edit.bmp"; 
      cmdField.SelectImageUrl = "~/images/select.bmp"; 

      Columns.Insert(0, cmdField); 
     } 

     // this will show the grid even if there is no data 
     int numRows = base.CreateChildControls(dataSource, dataBinding); 

     //no data rows created, create empty table if enabled 
     if (numRows == 0 && ShowWhenEmpty) 
     { 
      //create table 
      Table table = new Table(); 
      table.ID = this.ID; 

      //convert the exisiting columns into an array and initialize 
      DataControlField[] fields = new DataControlField[this.Columns.Count]; 
      this.Columns.CopyTo(fields, 0); 

      if (this.ShowHeader) 
      { 
       //create a new header row 
       _headerRow2 = base.CreateRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal); 

       this.InitializeRow(_headerRow2, fields); 
       table.Rows.Add(_headerRow2); 
      } 

      //create the empty row 
      GridViewRow emptyRow = new GridViewRow(-1, -1, DataControlRowType.EmptyDataRow, DataControlRowState.Normal); 

      TableCell cell = new TableCell(); 
      cell.ColumnSpan = this.Columns.Count; 
      cell.Width = Unit.Percentage(100); 
      if (!String.IsNullOrEmpty(EmptyDataText)) 
       cell.Controls.Add(new LiteralControl(EmptyDataText)); 

      if (this.EmptyDataTemplate != null) 
       EmptyDataTemplate.InstantiateIn(cell); 

      emptyRow.Cells.Add(cell); 
      table.Rows.Add(emptyRow); 

      if (this.ShowFooter) 
      { 
       //create footer row 
       _footerRow2 = base.CreateRow(-1, -1, DataControlRowType.Footer, DataControlRowState.Normal); 

       this.InitializeRow(_footerRow2, fields); 
       table.Rows.Add(_footerRow2); 
      } 

      this.Controls.Clear(); 
      this.Controls.Add(table); 
     } 

     // I wanted one place to set alternating color for all instances of this control 
     base.AlternatingRowStyle.BackColor = System.Drawing.Color.LightBlue; 

     // now that the controls have been created, it's safe to reset these to their original values. They'll be needed if you bind data later 
     AutoGenerateDeleteButton = showDelete; 
     AutoGenerateEditButton = showEdit; 
     AutoGenerateSelectButton = showSelect; 

     return numRows; 
    } 

Answer 2

您可以使用GridView.RowDataBound事件。關於這一點，使用FindControl做定製你自動生成按鈕：

protected void yourGridView_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
     LinkButton link = e.Row.Cells[0].Controls[0] as LinkButton; 
     // do your stuff 
    } 
} 

Answer 3

做到這一點，最簡單的方法是處理這一切你自己。下面是一個簡單的例子使用ImageButton更換編輯命令按鈕：

<asp:GridView ID="yourGrid" runat="server" OnRowEditing="yourGrid_RowEditing"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:ImageButton ID="yourEditButton" runat="server" 
        CommandName="Edit" ImageUrl="edit.jpg" /> 
      </ItemTemplate> 
      <EditItemTemplate> 
       <!-- your edit controls here --> 
      </EditItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

現在對於後面的代碼：

protected void yourGrid_RowEditing(object sender, GridViewEditEventArgs e) 
{ 
    // You could just do yourGrid and ignore casting the sender but this 
    // makes the code generic for reuse. 
    GridView grid = (GridView)sender; 
    grid.EditIndex = e.NewEditIndex; 
    BindData(); // need to rebind once the edit index is set. 
} 

這幾乎與ImageButton替換自動生成的編輯按鈕。通過設置CommandName進行編輯，它將觸發與自動生成的編輯按鈕完全相同的事件。這也適用於刪除，更新等..