Скачать или смотреть JavaScript confirm on gridview delete

Link for all dot net and sql server video tutorial playlists
   / kudvenkat  

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
   / @aarvikitchen5572  

In this video we will discuss how to display JavaScript confirmation dialog box when we attempt to delete a GridView row.

When we click the Delete link button a confirm dialog box should be displayed with the message - Are you sure to delete. If we click OK button the respective row should be deleted. If we click Cancel, the row should not be deleted.

So let us look at different options available to add JavaScript to the Delete button in a GridView control.

The following SQL Script creates SampleDB, Employees table and populates it with test data
Create Database SampleDB
GO

Use SampleDB
GO

Create Table Employees
(
ID int identity primary key,
Name nvarchar(100),
Gender nvarchar(10)
)
GO

Insert into Employees values('Mark', 'Male')
Insert into Employees values('John', 'Male')
Insert into Employees values('Sara', 'Female')
Insert into Employees values('Mary', 'Female')
Insert into Employees values('Mike', 'Male')

Now drag and drop a GridView control and a SqlDataSource control onto the webform.

Configure SqlDataSource control

In the GridView tasks pane, select "SqlDataSource1" from "Choose Data Source" dropdownlist. Select "Enable Deleting" checkbox.

Now flip the Webform to the source mode and notice that we have 4 columns. The first column is a command field that is used for deleting the row from the GridView control.
[Columns]
[asp:CommandField ShowDeleteButton="True" /]
[asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortExpression="ID" /]
[asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /]
[asp:BoundField DataField="Gender" HeaderText="Gender"
SortExpression="Gender" /]
[/Columns]

If you want to add JavaScript to the delete button declaratively, then we need to convert the command field to a Template field. To do this, flip the webform to the design mode.
1. In GridView tasks pane, click "Edit Columns..." link

2. On Fields screen
a) Click on "Delete" field in "Selected fields" section
b) Click "Convert this field into a TemplateField" link
c) Click OK

Now flip the Webform to the source mode and notice that the Delete button is now generated as Link Button.
[Columns]
[asp:TemplateField ShowHeader="False"]
[ItemTemplate]
[asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Delete" Text="Delete"][/asp:LinkButton]
[/ItemTemplate]
[/asp:TemplateField]
[asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortExpression="ID" /]
[asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /]
[asp:BoundField DataField="Gender" HeaderText="Gender"
SortExpression="Gender" /]
[/Columns]

To associate JavaScript to the Delete link button client click event, use OnClientClick attribute as shown below
[asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete" OnClientClick="return confirm('Are you sure to delete');" ]
[/asp:LinkButton]

If you want to associate JavaScript programatically to delete button client click event using server side code
1. Remove the OnClientClick attribute from the HTML
2. Generate GridView1_RowDataBound event handler method
3. Copy and paste the following code in GridView1_RowDataBound event handler method
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton lb = (LinkButton)e.Row.FindControl("LinkButton1");
lb.Attributes.Add("onclick", "return confirm('Are you sure to delete');");
}
}

If you also want include the ID of the record being deleted in the confirmation message.

Modify the code in RowDataBound as shown below.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton lb = (LinkButton)e.Row.FindControl("LinkButton1");
lb.Attributes.Add("onclick", "return confirm('Are you sure to delete record with ID = "
DataBinder.Eval(e.Row.DataItem, "ID") + "');");
}
}