Ajax ModalPopUpExtender Example to edit the gridview row values in asp.net

Home
Asp.Net
FRAMEWORKS
- Web Pages
- Web Forms
- MVC
TECHNOLOGIES
vNEXT
Get Help: Ask a Question in our Forums | Report a Bug | More Help Resources
Ajax
Gridview
JavaScript
SQL
JQuery
OOPS Concepts
Interview Questions
Trace Mobile Number
Advertise

By: Suresh Dasari Mar 15, 2011

Introduction:

Here I will explain how to show the modal popup using Ajax ModalPopupExtender to edit Rows in a GridView using asp.net.

Description:

In my previous post I explained clearly how to show the gridview images with lightbox effect. Same way we can display popup using Ajax futures. In ajax we have ModalPopup extender to display data in Popup here I am doing sample to show pop up whenever user clicks on Edit button in gridview at that time I will display that particular gridview row data into Modal popup for that 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
City	varchar(50)	Yes
Designation	varchar(50)	Yes

After that enter some data in table to bind that data to gridview.

Now add AjaxControlToolkit.dll to your bin folder and design your aspx page like this

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

<title>Untitled Page</title>

.modalBackground

{

background-color: Gray;

filter: alpha(opacity=80);

opacity: 0.8;

z-index: 10000;

}

</style>

</head>

<body>

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

</asp:ToolkitScriptManager>

<div>

<asp:GridView runat="server" ID="gvdetails" DataKeyNames="UserId" AutoGenerateColumns="false">

<asp:TemplateField HeaderText="Edit">

<asp:ImageButton ID="imgbtn" ImageUrl="~/Edit.jpg" runat="server" Width="25" Height="25" onclick="imgbtn_Click" />

</ItemTemplate>

</asp:TemplateField>

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

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

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

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

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

</Columns>

</asp:GridView>

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

<asp:Button ID="btnShowPopup" runat="server" style="display:none" />

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"

CancelControlID="btnCancel" BackgroundCssClass="modalBackground">

</asp:ModalPopupExtender>

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

<td colspan="2" style=" height:10%; color:White; font-weight:bold; font-size:larger" align="center">User Details</td>

</tr>

<tr>

UserId:

</td>

<td>

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

</td>

</tr>

<tr>

UserName:

</td>

<td>

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

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<asp:TextBox ID="txtfname" runat="server"/>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<asp:TextBox ID="txtlname" runat="server"/>

</td>

</tr>

<tr>

City:

</td>

<td>

<asp:TextBox ID="txtCity" runat="server"/>

</td>

</tr>

<tr>

Designation:

</td>

<td>

<asp:TextBox ID="txtDesg" runat="server"/>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update" onclick="btnUpdate_Click"/>

<asp:Button ID="btnCancel" runat="server" Text="Cancel" />

</td>

</tr>

</table>

</asp:Panel>

</div>

</form>

</body>

</html>

Here if you observe above code for ModalPopupExtender I have declared different properties to ModalPopupEtender now I will explain each property clearly

TargetControlID - The ID of the element that activates the modal popup.

Here I gave one button name btnShowPopup but that button mode is in visible=false because it’s not necessary here we are triggering popup by calling show() function in button click codebehind but if we didn’t given that targetcontrolid to ModalPopupExtender it will throw error for that reason I gave target controlid.

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

CancelControlID - The ID of the element that cancels the modal popup.

BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed.

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

C# Code

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Drawing;

After completion of writing namespaces and write the following code

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack)

{

BindGridData();

}

protected void BindGridData()

{

con.Open();

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

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataTable dt = new DataTable();

da.Fill(dt);

gvdetails.DataSource = dt;

gvdetails.DataBind();

}

protected void btnUpdate_Click(object sender, EventArgs e)

{

con.Open();

SqlCommand cmd = new SqlCommand("update Employee_Details set FirstName=@FirstName,LastName=@LastName, City=@City,Designation=@Designation where UserId=@UserId", con);

cmd.Parameters.AddWithValue("@FirstName", txtfname.Text);

cmd.Parameters.AddWithValue("@LastName", txtlname.Text);

cmd.Parameters.AddWithValue("@City", txtCity.Text);

cmd.Parameters.AddWithValue("@Designation", txtDesg.Text);

cmd.Parameters.AddWithValue("@UserId", Convert.ToInt32(lblID.Text));

cmd.ExecuteNonQuery();

con.Close();

lblresult.Text = lblusername.Text + " Details Updated Successfully";

lblresult.ForeColor = Color.Green;

BindGridData();

}

protected void imgbtn_Click(object sender, ImageClickEventArgs e)

{

ImageButton btndetails = sender as ImageButton;

GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;

lblID.Text = gvdetails.DataKeys[gvrow.RowIndex].Value.ToString();

lblusername.Text = gvrow.Cells[1].Text;

txtfname.Text = gvrow.Cells[2].Text;

txtlname.Text = gvrow.Cells[3].Text;

txtCity.Text = gvrow.Cells[4].Text;

txtDesg.Text = gvrow.Cells[5].Text;

this.ModalPopupExtender1.Show();

}

VB.NET Code

Imports System.Configuration

Imports System.Data

Imports System.Data.SqlClient

Imports System.Drawing

Imports System.Web.UI

Imports System.Web.UI.WebControls

Partial Class VBCode

Inherits System.Web.UI.Page

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("dbconnection").ToString())

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

If Not IsPostBack Then

BindGridData()

End If

End Sub

Protected Sub BindGridData()

con.Open()

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

Dim da As New SqlDataAdapter(cmd)

Dim dt As New DataTable()

da.Fill(dt)

gvdetails.DataSource = dt

gvdetails.DataBind()

End Sub

Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs)

con.Open()

Dim cmd As New SqlCommand("update Employee_Details set FirstName=@FirstName,LastName=@LastName, City=@City,Designation=@Designation where UserId=@UserId", con)

cmd.Parameters.AddWithValue("@FirstName", txtfname.Text)

cmd.Parameters.AddWithValue("@LastName", txtlname.Text)

cmd.Parameters.AddWithValue("@City", txtCity.Text)

cmd.Parameters.AddWithValue("@Designation", txtDesg.Text)

cmd.Parameters.AddWithValue("@UserId", Convert.ToInt32(lblID.Text))

cmd.ExecuteNonQuery()

con.Close()

lblresult.Text = lblusername.Text + " Details Updated Successfully"

lblresult.ForeColor = Color.Green

BindGridData()

End Sub

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

Dim btndetails As ImageButton = TryCast(sender, ImageButton)

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

lblID.Text = gvdetails.DataKeys(gvrow.RowIndex).Value.ToString()

lblusername.Text = gvrow.Cells(1).Text

txtfname.Text = gvrow.Cells(2).Text

txtlname.Text = gvrow.Cells(3).Text

txtCity.Text = gvrow.Cells(4).Text

txtDesg.Text = gvrow.Cells(5).Text

Me.ModalPopupExtender1.Show()

End Sub

End Class

After that set your database connection in web.config like this

</connectionStrings >

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

75 comments :

Muhammad Azeem said...: This is a nice article..
Its very easy to understand ..
And this article is using to learn something about it..

c#, dot.net, php tutorial

Thanks a lot..!; March 15, 2011 at 9:57 AM
Anonymous said...: good work; March 21, 2011 at 2:29 AM
Anonymous said...: i am loving it; March 21, 2011 at 2:29 AM
Anonymous said...: Thanks its awesome; May 23, 2011 at 1:02 AM
Anonymous said...: nice man more valuable!!; May 30, 2011 at 12:04 AM
narwal said...: nice great work; June 5, 2011 at 1:09 PM
narwal said...: i want creat logs for my application please help me for this please please; June 5, 2011 at 1:11 PM
TheZull said...: Nice tutorials,how about in PHP language?It possible PHP can do this trick?; June 23, 2011 at 7:31 PM
Suresh Dasari said...: hi theZull,
i think we can do the same thing in PHP also but i don't ahve idea on PHP; July 10, 2011 at 11:13 PM
Anonymous said...: Thanks a lot......!; July 26, 2011 at 8:20 AM
David said...: Brilliant! Thanks for the tutorial, this is exactly what I was after :); September 3, 2011 at 8:21 AM
bhanu said...: Hi how to display the gridview column in dropdownlist how to show?dropdownlist already loaded with some values; September 26, 2011 at 3:59 AM
Anonymous said...: Thank u dear.; November 20, 2011 at 9:16 PM
Anonymous said...: The whole is refreshing when we save the data.there is any option not to refresh the whole page.; November 21, 2011 at 8:35 PM
Anonymous said...: I tried this code by wrapping it in Updatepanel and not able to get pop up.
Can you tell me; December 4, 2011 at 8:22 AM
Ankur Rana said...: Excellent Artical...; December 4, 2011 at 10:31 PM
Sunaina said...: Thanks alot .This artical is really very usefull; December 5, 2011 at 10:30 PM
Anonymous said...: Thank you so much for the help; December 15, 2011 at 5:59 AM
Anonymous said...: very nice article.
How can I create a template user control?
Thanks a lots; December 27, 2011 at 8:57 AM
Anonymous said...: perfect example thanks; January 9, 2012 at 11:22 PM
Rich W said...: Great article. I had given up on doing this when I accidentally came across this site. It works great!

Here's one thing that might help some people. Since I didn't use the sample code directly but instead applied it to my existing code, I ran into an issue where the panel wouldn't appear. I created a button that for the TargetControlID that I didn't want to be visible and I instead showed the popup after some server-side code by using modalname.show (where modalname is the name of the AJAX control). However, if I made the button invisible, the popup panel was visible. If I made the popup panel invisible, it wouldn't popup.

I finally noticed in the sample code that the button control had style="display:none" in it. When I added this and made the button and panel visible, the code worked perfectly.

Thanks.; January 11, 2012 at 7:44 PM
Anonymous said...: its good; January 16, 2012 at 5:41 AM
RaViNdRa PaRcHa said...: Perfectly running code...and amazing solution ....fantastic.; January 16, 2012 at 11:08 AM
RaViNdRa PaRcHa said...: Perfectly running code...and amazing solution ....fantastic.; January 16, 2012 at 11:08 AM
Anonymous said...: Nice work indeed. Came in very handy as I am 2 weeks into a 3 month trial on a new job and 'needed' to get this modal edit thing working.; January 16, 2012 at 4:18 PM
Anonymous said...: @>> I tried this code by wrapping it in Updatepanel and not able to get pop up.

I put mine in an Updatepanel and it worked fine. The start of my update panel is directly above the grid and it is closed directly under the panel's closing tag.; January 16, 2012 at 4:40 PM
Anonymous said...: What if I need more complicated logic.
- gridview with image button
- image button opens modal window with another gridview or listview (some list with links)
- and only click on this link opens edit form in the same modal window; January 27, 2012 at 9:36 AM
Skittery Jim said...: Where's the demo data; January 28, 2012 at 11:29 PM
Anonymous said...: thanks
sri; January 30, 2012 at 10:14 AM
Anonymous said...: Gud JOB Dude...; February 1, 2012 at 1:05 AM
Software Wings said...: Hai Suresh,

Your work is very usefull to us to develop an good Web Applications; February 5, 2012 at 9:32 PM
Anonymous said...: Спасибо чувак; February 7, 2012 at 8:59 AM
Sivanarayana said...: Excellent man..

Thanks alot.; February 12, 2012 at 12:14 AM
Anonymous said...: I want your SampleDB file used for this source code.Please help me...; February 19, 2012 at 6:18 PM
Anonymous said...: thank u very much; February 20, 2012 at 1:48 PM
abhinav bajpai said...: Hi suresh,great job thank you so much for your great support for beginners like me.but please provide some examples using class libraries ...thanks; March 3, 2012 at 11:08 AM
Anonymous said...: When I am writing this code on a page with master page, then this code is not working. Please help me!
My emailID : sonali16@rediffmail.com; March 12, 2012 at 4:02 AM
jos - central de reservas said...: Life makes me laugh.
I found this article and wrote this comment on the first article anniversary, jojojo.

THANK YOU VERY MUCH Suresh Dasari, you must know that from now your blog will be in my favorites.; March 15, 2012 at 12:06 PM
rashmi said...: i had used this code but my updated data doesnt display at page....when i update data will deleted at gridview but it updated in database; March 22, 2012 at 9:04 PM
Anonymous said...: it is owesome sir ...u will do a great job; March 25, 2012 at 12:12 PM
Software Downloads said...: Hi Suresh, very good article..I used in my project.. How can we validate modelpopup with required field validator?
Regards
Naresh; March 27, 2012 at 4:51 AM
Anonymous said...: Excellent Article Man...Thank You So Much<3; March 29, 2012 at 12:47 AM
Anonymous said...: Well Done.
Thankyou.; June 6, 2012 at 3:10 PM
Anonymous said...: Thank you; July 24, 2012 at 11:05 AM
Anonymous said...: Excellent; July 27, 2012 at 12:41 AM
SHANKAR said...: what ever you have written,that code only written by me but grid is not visible on the page so,what can do please helpme; July 27, 2012 at 10:18 AM
ANIL BABU Mandla said...: I want to Insert page That type of example give me pls; August 23, 2012 at 12:10 AM
ANIL BABU Mandla said...: I want to Insert page That type of example give me pls; August 23, 2012 at 12:14 AM
ANIL BABU Mandla said...: Give same type of example insert also,; August 23, 2012 at 12:15 AM
Ankit Jain said...: Fundoo... superb....; August 27, 2012 at 3:45 AM
Anonymous said...: hi!
tanx for your valuable tutorial
i have a little problem:
when i try to click on the update image button, i receive this error from compiler:
"Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index"
and it refer to the line that u wrote:
lblID.Text = gvdetails.DataKeys[gvrow.RowIndex].Value.ToString ();

please help me. I really need this
thank u so much; September 30, 2012 at 2:46 PM
K-FeE said...: Chingo, muy buen ejemplo, me estaba dando por vencido hasta que leí este artículo, no puedo creer que sencillo era.

Buen trabajo amigo; October 5, 2012 at 3:00 PM
navya said...: Hi how to display the gridview column in dropdownlist how to show?dropdownlist already loaded with some values; December 20, 2012 at 7:55 AM
Jyoti said...: In fact this code is very good. Suresh can u give me one more help. I need to open a folder by clicking a linkbutton. The folder lies in d drive of the computer where the asp.net application is hosted. the same is running in the run time, but if the applicaiton is published, access denied error is coming. Can u please guide I am using Win 7 OS and IIS 7.; December 27, 2012 at 3:18 AM
Subhajit Sinha said...: Why the panel is not showing in the html design view; January 12, 2013 at 9:47 PM
Anonymous said...: Great article! Thank you!; January 31, 2013 at 8:40 AM
pankaj said...: how this achieve using jquery; February 1, 2013 at 3:18 AM
devanand waghmare said...: this code is working fine. Bur what about that cancel button. i have one problem when i clicks on Cancel button of popup window,after that when i clicked on edit button it doesn't show popup window again.; February 13, 2013 at 11:12 AM
Anonymous said...: funny how everyone is an engineer now; February 27, 2013 at 2:23 PM
Anonymous said...: hello,

I am using your code with ItemTemplate and I am able to show modelpopu with the ID but not other details in the text box. If I fill out the blank text box it is updating the database field and I can see that change in the Gridview. I think I am missing something to populate the textbox value. Here is the code I am using.

protected void imgbtn_Click(object sender, ImageClickEventArgs e)
{

ImageButton btndetails = sender as ImageButton;
GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;
lblID.Text = GridViewDetails.DataKeys[gvrow.RowIndex].Value.ToString();
txtfname.Text = gvrow.Cells[1].Text;
txtlname.Text = gvrow.Cells[2].Text;
txtDept.Text = gvrow.Cells[3].Text;
txtRequestStatus.Text = gvrow.Cells[4].Text;
this.ModalPopupExtenderEdit.Show();
//sconn.Close();

}; February 28, 2013 at 12:04 PM
Yogesh Chavan said...: hi suresh little bit problem

error are :- Could not load file or assembly 'AjaxControlToolkit' or one of its dependencies. The system cannot find the file specified.; March 2, 2013 at 12:07 AM
Chris Haarer said...: This is wwesome code, it does exactly what I wanted.

I would like to have paging controls and sorting controls on the gridview.

Can you help ??; March 11, 2013 at 8:04 PM
DURGA PRAKASH said...: Thanks dude; March 12, 2013 at 12:25 AM
Ajay said...: If i have the image field in gridview than how can i update the image in gridview using modal popupextender.

Please give your valuable suggestion.; March 12, 2013 at 4:41 AM
Imi Chitterman said...: Your sharing is always useful
thanks; April 14, 2013 at 4:48 AM
gnosys said...: Great work, this is even better than jQuery's blockUI - thanks!; April 24, 2013 at 5:13 PM
Anonymous said...: Nice One, Thanks...; April 29, 2013 at 7:27 AM
Imi Chitterman said...: Hi Suresh,
Comment ID 60 above is an issue that I also encountered. Please have you any idea why this happens with the pop up.
Regards; April 30, 2013 at 6:35 AM
Imi Chitterman said...: Hi Suresh,
Issue 60 only work when we use

and not template items; April 30, 2013 at 4:57 PM
Anonymous said...: tanx a lot.....; May 7, 2013 at 3:28 AM
Anonymous said...: hii this is code is working fine with boundfields but its not working with templatefiels..

what's the difference between templatefield and boundfield..

thnx in advance; May 10, 2013 at 11:12 AM
Anonymous said...: Hi Frnd it's working great Thank's lot....................; May 16, 2013 at 5:20 AM
Gaurav Agarwal said...: nice article!!!!; June 3, 2013 at 11:23 PM
varun said...: when i run this in internet explorer popup will not show...pls help.......; June 6, 2013 at 6:37 AM
Anonymous said...: how to display gridview controls other than BoundField, i.e. CheckBoxField?; June 13, 2013 at 1:55 PM