Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.net- Ajax ConfirmbuttonExtender example with modalpopupextender

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" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ajax confirmbuttonextender example with modalpopupextender</title>
<style type="text/css">
.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>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepnl1" runat="server">
<ContentTemplate>
<asp:GridView runat="server" ID="gvDetails" CssClass="Gridview"
DataKeyNames="UserId" AutoGenerateColumns="false">
<HeaderStyle BackColor="#df5015" />
<Columns>
<asp:BoundField DataField="UserName" HeaderText="UserName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:TemplateField>
<ItemTemplate>
<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">
<table width="100%" style="border:Solid 2px #D46900; width:100%; height:100%" cellpadding="0" cellspacing="0">
<tr style="background-image:url(Images/header.gif)">
<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>
<td colspan="2" align="left" style="padding:5px; font-family:Calibri">
<asp:Label ID="lblUser" runat="server" Text="Are you sure you want to delete selected Record?"/>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>
</td>
<td align="right" style="padding-right:15px">
<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 RSS subscribe by email Subscribe by Email

8 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::

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.

Anonymous said...

thanks...

mallikarjun dudani said...

Suresh

Update panel is coming if i download.

katy said...

Excellent article.

Pratik Ghumre said...
This comment has been removed by the author.
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

about us said...

I got many troubles in ajax confirmbuttonextender and I try many times, but it wouldn't work still.

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.