Thursday, November 3, 2011

Javascript confirm message before delete from Asp.net LinkButton or Button Control

In our Asp.Net web application a common task is to insert, update or delete data from Database. It will be a good practice if you prompt user before deleting a row or data from Database since after deletion you can not retrieve data from database. Think if user click to delete a row & you don't prompt any message then the data will be deleted. If the user click on delete Button mistakenly then what happend? So its a good idea to prompt user by using javascript confirm before deleting a row.


Fig: Output

As shown in above figure when a user clicks on a LinkButton or on a Button control system will prompt "Are you sure to delete?" javascript confirm message box with two button OK & Cancel. If user click on OK then corresponding server side code will be executed. If cancel then nothing happened.

One can prompt user by using three ways. You can use any one in LinkButton, Button Or Image Button control even within GridView, DataList or Repeater control. These are:
Way 1: Using Properties.
Way 2: From HTML Markup.
Way 3: Runtime or Programmatically.

Using Properties:
This is the most simple, easy way to prompt user confirmation message from LinkButton / Button / Image Button control property. Look at the below image how to do it.


Fig: Property window

Here i explain how you can do it. First right click on any one of your control such as LinkButton / Button / Image Button. Then go to the properties. From properties find OnClientClick attribute and write the following code:
1return confirm('Are you sure to delete?');

From HTML Markup:
Its also easy. One can easily add the confirmation message from HTML Markup language of the control in the following way:
01<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Delete_Confirmation.aspx.cs" Inherits="Delete_Confirmation" %>
02 
03<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 
05<html xmlns="http://www.w3.org/1999/xhtml" >
06<head runat="server">
07    <title>Javascript confirmation delete example</title>
08</head>
09 
10 
11<body>
12    <form id="form1" runat="server">
13    <div>
14 
15 
16    <asp:LinkButton ID="lnkDelete" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to delete?'); "></asp:LinkButton>
17    <asp:Button ID="cmdDelete" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to delete?'); " />
18 
19 
20    </div>
21    </form>
22 
23</body>
24 
25</html>

Runtime or Programmatically:
Its a bit advance option. In many cases you need to generate controls dynamically like if you generate a GridView in runtime & also add a LinkButton in GridView rows to give options user to delete data then you don't have any choice except it. Look at the below code how one can add dynamically javascript confirmation message on a dynamically generated LinkButton:

01using System;
02using System.Web.UI.WebControls;
03 
04public partial class Delete_Confirmation : System.Web.UI.Page
05{
06    protected void Page_Load(object sender, EventArgs e)
07    {
08        if (!IsPostBack)
09        {
10            lnkDelete.Attributes.Add("onclick", "return confirm('Are you sure to delete?');");
11            cmdDelete.Attributes.Add("onclick", "return confirm('Are you sure to delete?');");
12 
13             
14            Button btnDelete = new Button();
15            btnDelete.Text = "Dynamic Control to Delete";
16            btnDelete.Attributes.Add("onclick", "return confirm('Are you sure to delete?');");
17            this.Form.Controls.Add(btnDelete);
18        }
19    }
20}

Hope now one easily add javascript confirmation message for LinkButton, Button & Image Button even though these were within a GridView or DataList or a Repeater control.

No comments:

Post a Comment