In this article I will explain with an example, how to call JavaScript function with CommandField in ASP.Net GridView using C# and VB.Net.
Inside the RowDataBound event handler, the Button will be referenced and then JavaScript function will be assigned to its Client Side OnClick event handler.
Thus when the CommandField Button is clicked, the JavaScript function will be called in ASP.Net using C# and VB.Net.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net GridView with two BoundField columns and a CommandField column.
<asp:GridView ID="GridView1" CssClass="Grid" runat="server" OnRowDeleting="OnRowDeleting" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price" />
        <asp:CommandField ShowDeleteButton="True" ButtonType="Button" />
    </Columns>
</asp:GridView>
 
 
Binding the GridView
Inside the Page Load event, the ASP.Net GridView is populated using a DataTable and the DataTable is saved in ViewState variable.

C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
        dt.Rows.Add("Shirt", 450);
        dt.Rows.Add("Jeans", 3200);
        dt.Rows.Add("Trousers", 1900);
        dt.Rows.Add("Tie", 185);
        dt.Rows.Add("Cap", 100);
        dt.Rows.Add("Hat", 120);
        dt.Rows.Add("Scarf", 290);
        dt.Rows.Add("Belt", 150);
        ViewState["dt"] = dt;
        BindGrid();
    }
}
 
protected void BindGrid()
{
    GridView1.DataSource = ViewState["dt"] as DataTable;
    GridView1.DataBind();
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(1) {New DataColumn("Item"), New DataColumn("Price")})
        dt.Rows.Add("Shirt", 450)
        dt.Rows.Add("Jeans", 3200)
        dt.Rows.Add("Trousers", 1900)
        dt.Rows.Add("Tie", 185)
        dt.Rows.Add("Cap", 100)
        dt.Rows.Add("Hat", 120)
        dt.Rows.Add("Scarf", 290)
        dt.Rows.Add("Belt", 150)
        ViewState("dt") = dt
        BindGrid()
    End If
End Sub
 
Protected Sub BindGrid()
    GridView1.DataSource = TryCast(ViewState("dt"), DataTable)
    GridView1.DataBind()
End Sub
 
 
Calling JavaScript function with CommandField in ASP.Net GridView
Inside the OnRowDataBound event handler, a loop is executed over the Button controls of the GridView Cell. If the CommandName of the Button is Delete then JavaScript Confirmation Box script is assigned to its OnClick attribute.

C#
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string item = e.Row.Cells[0].Text;
        foreach (Button button in e.Row.Cells[2].Controls.OfType<Button>())
        {
            if (button.CommandName == "Delete")
            {
                button.Attributes["onclick"] = "if(!confirm('Do you want to delete " + item + "?')){ return false; };";
            }
        }
    }
}
 
VB.Net
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim item As String = e.Row.Cells(0).Text
        For Each button As Button In e.Row.Cells(2).Controls.OfType(Of Button)()
            If button.CommandName = "Delete" Then
                button.Attributes("onclick") = "if(!confirm('Do you want to delete " + item + "?')){ return false; };"
            End If
        Next
    End If
End Sub
 
 
Delete the ASP.Net GridView Row using CommandField and OnRowDeleting event
When the Delete Button is clicked, the OnRowDeleting event handler is executed. Inside the OnRowDeleting event handler, the Index of the GridView Row is determined and it is used to delete the Row from the DataTable.
Finally the DataTable is saved back to the ViewState and the GridView is again populated.

C#
protected void OnRowDeleting(object sender, GridViewDeleteEventArgs e)
{
    int index = Convert.ToInt32(e.RowIndex);
    DataTable dt = ViewState["dt"] as DataTable;
    dt.Rows[index].Delete();
    ViewState["dt"] = dt;
    BindGrid();
}
 
VB.Net
Protected Sub OnRowDeleting(sender As Object, e As GridViewDeleteEventArgs)
    Dim index As Integer = Convert.ToInt32(e.RowIndex)
    Dim dt As DataTable = TryCast(ViewState("dt"), DataTable)
    dt.Rows(index).Delete()
    ViewState("dt") = dt
    BindGrid()
End Sub
 
 
Screenshot
Call JavaScript function with CommandField in ASP.Net GridView
 
 
Demo
 
 
Downloads