Asp.net- Ajax ConfirmbuttonExtender example with modalpopupextender

By: Suresh Dasari May 12, 2012

Introduction:

Here I will explain ajax confirmbuttonextender example with modalpopupextender in gridview using asp.net.

Description:

Previously I explained many articles relating to Asp.net and Ajax and use customized style of confirmation box to delete gridview records. Now I will explain how to use ajax confirmbuttonextender control in gridview to delete records with modalpopupextender in asp.net. Here I am using same concept (use customized style of confirmation box to delete gridview records) but only change is I am using confirmbuttonextender to implement this concept in asp.net.

To implement this concept first design table in your database like this

Column Name	Data Type	Allow Nulls
UserId	int(set identity property=true)	No
UserName	varchar(50)	Yes
FirstName	varchar(50)	Yes
LastName	varchar(50)	Yes

After that enter some dummy data in table to bind that data to gridview and add AjaxControlToolkit.dll reference to your application you don’t know how to use AjaxControlToolkit no worry check this post how to install AjaxControlToolkit and design your aspx page like this

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<title>Ajax confirmbuttonextender example with modalpopupextender</title>

.modalBackground

{

background-color: Gray;

filter: alpha(opacity=80);

opacity: 0.8;

z-index: 10000;

}

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}

Table.Gridview{border:solid 1px #df5015;}

.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;padding:0.5em 0.5em 0.5em 0.5em;text-align:center}

.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;padding:0.5em 0.5em 0.5em 0.5em;}

.Gridview tr{color: Black; background-color: White; text-align:left}

:link,:visited { color: #DF4F13; text-decoration:none }

</style>

</head>

<body>

<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">

</ajax:ToolkitScriptManager>

<asp:UpdatePanel ID="updatepnl1" runat="server">

<asp:GridView runat="server" ID="gvDetails" CssClass="Gridview"

DataKeyNames="UserId" AutoGenerateColumns="false">

<asp:BoundField DataField="UserName" HeaderText="UserName" />

<asp:BoundField DataField="FirstName" HeaderText="FirstName" />

<asp:BoundField DataField="LastName" HeaderText="LastName" />

<asp:TemplateField>

<asp:ImageButton ID="btnDelete" ImageUrl="~/Images/Delete.png" runat="server" />

<ajax:ConfirmButtonExtender ID="cnfbtn" TargetControlID="btnDelete" DisplayModalPopupID="ModalPopupExtender1" runat="server">

</ajax:ConfirmButtonExtender>

<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnDelete" PopupControlID="pnlpopup"

CancelControlID="btnNo" BackgroundCssClass="modalBackground">

</ajax:ModalPopupExtender>

<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="100px" Width="400px" style="display:none">

<td style=" height:10%; color:White; font-weight:bold;padding:3px; font-size:larger; font-family:Calibri" align="Left" colspan="2">Confirm Box</td>

</tr>

<tr>

<asp:Label ID="lblUser" runat="server" Text="Are you sure you want to delete selected Record?"/>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

</td>

<asp:ImageButton ID="btnYes" OnClick="btnYes_Click" runat="server" ImageUrl="~/Images/btnyes.jpg"/>

<asp:ImageButton ID="btnNo" runat="server" ImageUrl="~/Images/btnNo.jpg" />

</td>

</tr>

</table>

</asp:Panel>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:Label ID="lblresult" runat="server"/>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

If you observe above code I declared different properties to confirmbuttonextender now I will explain each property clearly

TargetControlID - The ID of the element that is used to activate confirmbuttonextender.

DisplayModalPopupID - The ID of the element to display as a modal popup.

If you want to know about modalpopupextender check this post modalpopupextender to edit gridview records in asp.net.

After completion our aspx page design add the following namespaces in codebehind

C#.NET

using System;

using System.Data;

using System.Data.SqlClient;

using System.Drawing;

using System.Web.UI;

using System.Web.UI.WebControls;

After completion of add namespaces write the following code

SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindUserDetails();

}

protected void BindUserDetails()

{

//connection open

con.Open();

//sql command to execute query from database

SqlCommand cmd = new SqlCommand("Select * from UserDetails", con);

cmd.ExecuteNonQuery();

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataSet ds = new DataSet();

da.Fill(ds);

//Binding data to gridview

gvDetails.DataSource = ds;

gvDetails.DataBind();

con.Close();

}

protected void btnYes_Click(object sender, ImageClickEventArgs e)

{

ImageButton btndetails = sender as ImageButton;

GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;

Session["UserId"] = gvDetails.DataKeys[gvrow.RowIndex].Value.ToString();

Session["UserName"] = gvrow.Cells[0].Text;

//getting userid of particular row

int userid = Convert.ToInt32(Session["UserId"]);

con.Open();

SqlCommand cmd = new SqlCommand("delete from UserDetails where UserId=" + userid, con);

int result = cmd.ExecuteNonQuery();

con.Close();

if (result == 1)

{

lblresult.Text = Session["UserName"] + " Details deleted successfully";

lblresult.ForeColor = Color.Green;

BindUserDetails();

}

VB Code

Imports System.Data

Imports System.Data.SqlClient

Imports System.Drawing

Imports System.Web.UI

Imports System.Web.UI.WebControls

Partial Class VBSample

Inherits System.Web.UI.Page

Private con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then

BindUserDetails()

End If

End Sub

Protected Sub BindUserDetails()

'connection open

con.Open()

'sql command to execute query from database

Dim cmd As New SqlCommand("Select * from UserDetails", con)

cmd.ExecuteNonQuery()

Dim da As New SqlDataAdapter(cmd)

Dim ds As New DataSet()

da.Fill(ds)

'Binding data to gridview

gvDetails.DataSource = ds

gvDetails.DataBind()

con.Close()

End Sub

Protected Sub btnYes_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)

Dim btndetails As ImageButton = TryCast(sender, ImageButton)

Dim gvrow As GridViewRow = DirectCast(btndetails.NamingContainer, GridViewRow)

Session("UserId") = gvDetails.DataKeys(gvrow.RowIndex).Value.ToString()

Session("UserName") = gvrow.Cells(0).Text

'getting userid of particular row

Dim userid As Integer = Convert.ToInt32(Session("UserId"))

con.Open()

Dim cmd As New SqlCommand("delete from UserDetails where UserId=" & userid, con)

Dim result As Integer = cmd.ExecuteNonQuery()

con.Close()

If result = 1 Then

lblresult.Text = Convert.ToString(Session("UserName")) & " Details deleted successfully"

lblresult.ForeColor = Color.Green

BindUserDetails()

End If

End Sub

End Class

Demo

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

9 comments :

jyo said...: Hi sir,
Still Now i asked you 5 questions but u didnt respond even one.Atelast try to give reply for this question.That i have dropdownlist1.when dropdownlist1 was selected i will get subjects names from database into checkboxes and each checkbox have 4textboxes dynamically.i have written code in dropdownlistselectindex changed event.i need how to insert values when i entered values to textboxes to database for each class::; May 16, 2012 at 4:44 AM
Suresh Dasari said...: @Jyo....
if you are generating the textboxes dynamically means you will set id's for that textboxes based on that id's get those values and insert that data into database.; May 16, 2012 at 9:53 AM
Anonymous said...: thanks...; September 4, 2012 at 11:03 PM
Unknown said...: Suresh

Update panel is coming if i download.; October 16, 2012 at 9:45 AM
katy said...: Excellent article.; January 29, 2013 at 5:56 PM
Pratik Ghumre said...: This comment has been removed by the author.; February 18, 2013 at 11:51 PM
Pratik Ghumre said...: I have taken a checkbox in itemtemplate in gridview but when i run that page checkbox are not visible but in degisn they are visible.I check all the properties regarding checkbox and gridview everything is fine ! how to display chekcbox in gridview at runtime ? HELP; February 18, 2013 at 11:52 PM
about us said...: I got many troubles in ajax confirmbuttonextender and I try many times, but it wouldn't work still.; April 24, 2013 at 1:27 AM
tanuj omar said...: hie use this link https://www.youtube.com/watch?v=2w7ZwdJRySA; May 12, 2015 at 10:54 PM