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
