In this article, I’ll explain how to Edit records in ASP.Net GridView control using jQuery Dialog UI. There is many other way to do that but here is the easiest way to do it.
Database:
For this tutorial, I am using Employee database.
Connection string:
Below is the connection string to connect to the database.
Aspx Page:
In this tutorial, there are two aspx pages.
Below HTML Markup of the page you will notice that I have placed a Script Manager and an ASP.Net Update Panel on the page. Inside the Update Panel I have placed an ASP.Net GridView Control along with brnRefreah that will be used to refresh after Edit the records in the GridView Control.
You notice that in gridview I have placed Edit link (line 17 in above code) to pass ID of Employee to EditEmployee page. (For example. ‘editEmployee.aspx?id=1).
Now when user click on Edit link, Dialog box will display and load EditEmployee.aspx page. To create dialog box on click event of Edit link we are going to use jQuery Dialog UI. Here is code
In dialog Close event, I use __doPostBack(‘<%= btnRefresh.ClientID %>‘, ”); to refresh Gridview. This code fire btnRefresh_click event thats why we need to place gridview1.databind() in it to refresh gridview.
Codebehide (Default.aspx.cs):
EditEmployee.aspx Page:
In this page, we get Employee ID from Querystring. After getting Employee ID We use sql connection to get FirstName, LastName, Location and Department from Database.
EditEmployee.aspx
Codebehind code: EditEmployee.aspx.cs
CSS File to style Gridview:
Download
Database:
For this tutorial, I am using Employee database.
1
2
3
4
5
6
7
8
9
10
11
| <span class= "IL_AD" id= "IL_AD12" > CREATE TABLE </span> [dbo].[T_Employees]( [ID] [ int ] IDENTITY(1,1) NOT NULL , [FirstName] [nvarchar](20) NULL , [LastName] [nvarchar](20) NULL , [<span class= "IL_AD" id= "IL_AD8" >Department</span>] [nvarchar](40) NULL , [Location] [nvarchar](40) NULL ) ON [ PRIMARY ] Insert INTO [dbo].[T_Employees] values ( 'Tanvi' , 'Patel' , ' Physiotherapy ' , 'Sydney' ) Insert INTO [dbo].[T_Employees] values ( 'Ashish' , 'Patel' , 'IT' , 'Sydney' ) Insert INTO [dbo].[T_Employees] values ( 'Vaishu' , 'Patel' , 'Micro' , 'Sydney' ) Insert INTO [dbo].[T_Employees] values ( 'Bhavik' , 'Patel' , ' pediatrician ' , 'Sydney' ) |
Below is the connection string to connect to the database.
1
2
3
| < connectionStrings > < add name = "TempConnectionString" connectionString = "Data Source=ASHISH;<span class=" IL_AD" id = "IL_AD3" >Initial</ span > < span class = "IL_AD" id = "IL_AD6" >Catalog</ span >=Temp;Persist Security Info=True;User ID=sa;Password=********" providerName="System.Data.SqlClient"/> </ connectionStrings > |
In this tutorial, there are two aspx pages.
1. Default.aspx — To implement Gridview controlDefault.aspx page:
2. EditEmployee.aspx –To Edit Employee
Below HTML Markup of the page you will notice that I have placed a Script Manager and an ASP.Net Update Panel on the page. Inside the Update Panel I have placed an ASP.Net GridView Control along with brnRefreah that will be used to refresh after Edit the records in the GridView Control.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| < asp:ScriptManager ID = "ScriptManager1" runat = "server" EnablePartialRendering = "true" > </ asp:ScriptManager > < asp:UpdateProgress ID = "UpdateProgress1" runat = "server" > < ProgressTemplate > < img src = "Loading.gif" alt = "" /> </ ProgressTemplate > </ asp:UpdateProgress > < asp:UpdatePanel runat = "server" ID = "UpdatePanel1" UpdateMode = "Conditional" > < ContentTemplate > < asp:GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False" DataKeyNames = "ID" DataSourceID = "SqlDataSource1" > < Columns > < asp:TemplateField HeaderText = "ID" > < ItemTemplate > < a id = "popup" href='EditEmployee.aspx?id=<%# Eval("ID") %>' >edit</ a > </ ItemTemplate > </ asp:TemplateField > < asp:BoundField DataField = "ID" HeaderText = "ID" InsertVisible = "False" ReadOnly = "True" SortExpression = "ID" /> < asp:BoundField DataField = "FirstName" HeaderText = "FirstName" SortExpression = "FirstName" /> < asp:BoundField DataField = "LastName" HeaderText = "LastName" SortExpression = "LastName" /> < asp:BoundField DataField = "Department" HeaderText = "Department" SortExpression = "Department" /> < asp:BoundField DataField = "Location" HeaderText = "Location" SortExpression = "Location" /> </ Columns > </ asp:GridView > < asp:SqlDataSource ID = "SqlDataSource1" runat = "server" ConnectionString="<%$ ConnectionStrings:TempConnectionString %>" SelectCommand="SELECT Top 10 * FROM [T_Employees]"></ asp:SqlDataSource > < asp:Button ID = "btnRefresh" Text = "refresh" runat = "server" onclick = "btnRefresh_Click" /> </ ContentTemplate > </ asp:UpdatePanel > |
Now when user click on Edit link, Dialog box will display and load EditEmployee.aspx page. To create dialog box on click event of Edit link we are going to use jQuery Dialog UI. Here is code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script> <script type= "text/javascript" src= "http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js" ></script> <link type= "text/css" rel= "Stylesheet" href= "http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css" > <script type= "text/javascript" > $(document).ready(function () { $( 'a#popup' ).live( 'click' , function (e) { var page = $( this ).attr( "href" ) //get url of link var $dialog = $( '<div></div>' ) .html( '<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>' ) .dialog({ autoOpen: false , modal: true , height: 450 , width: 'auto' , title: "Edit Employee" , buttons: { "Close" : function () { $dialog.dialog( 'close' ); } }, close: function (event, ui) { __doPostBack( '<%= btnRefresh.ClientID %>' , '' ); // To refresh gridview when user close dialog } }); $dialog.dialog( 'open' ); e.preventDefault(); }); }); </script> |
Codebehide (Default.aspx.cs):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load( object sender, EventArgs e) { } protected void btnRefresh_Click( object sender, EventArgs e) { GridView1.DataBind(); } } |
In this page, we get Employee ID from Querystring. After getting Employee ID We use sql connection to get FirstName, LastName, Location and Department from Database.
EditEmployee.aspx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| < form id = "form1" runat = "server" > < asp:ScriptManager ID = "ScriptManager1" runat = "server" > </ asp:ScriptManager > < asp:UpdatePanel ID = "UpdatePanel1" runat = "server" > < ContentTemplate > < h3 >Edit Employee</ h3 > < asp:Label ID = "lblResult" runat = "server" ForeColor = "Green" ></ asp:Label > < asp:Panel ID = "pnlEdit" runat = "server" > < p >ID:< asp:TextBox ID = "txtID" ReadOnly = "true" runat = "server" ></ asp:TextBox ></ p > < p > FirstName: < asp:TextBox ID = "txtfName" runat = "server" ></ asp:TextBox ></ p > < p > LastName:< asp:TextBox ID = "txtlNmae" runat = "server" ></ asp:TextBox ></ p > < p >Department: < asp:TextBox ID = "txtDept" runat = "server" ></ asp:TextBox ></ p > < p >Location:< asp:TextBox ID = "txtLocation" runat = "server" ></ asp:TextBox ></ p > < p > < asp:Button ID = "btnSave" runat = "server" Text = "Save" onclick = "btnSave_Click" /> </ p > </ asp:Panel > </ ContentTemplate > </ asp:UpdatePanel > </ form > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Configuration; public partial class EditPopup : System.Web.UI.Page { string CT = ConfigurationManager.ConnectionStrings[ "TempConnectionString" ].ConnectionString; protected void Page_Load( object sender, EventArgs e) { if (!IsPostBack) { string EID = Request.QueryString[ "id" ]; using (SqlConnection cn = new SqlConnection(CT)) { string query = "Select * from T_Employees where ID='" + EID + "'" ; using (SqlCommand cmd = new SqlCommand(query, cn)) { cn.Open(); SqlDataReader dr = cmd.ExecuteReader(); if (dr.Read() ) { txtID.Text = EID; txtfName.Text = dr[ "FirstName" ].ToString(); txtlNmae.Text = dr[ "LastName" ].ToString(); txtDept.Text = dr[ "Department" ].ToString(); txtLocation.Text = dr[ "Location" ].ToString(); } cn.Close(); cn.Dispose(); } } } } protected void btnSave_Click( object sender, EventArgs e) { ///save Employee Recoed code /// using (SqlConnection cn = new SqlConnection(CT)) { string query = "Update T_Employees Set FirstName='" +txtfName.Text+ "', LastName='" +txtlNmae.Text + "', Department='" +txtDept.Text + "', Location='" +txtLocation.Text + "' where ID='" + txtID.Text + "'" ; using (SqlCommand cmd = new SqlCommand(query, cn)) { cn.Open(); cmd.ExecuteNonQuery(); cn.Close(); cn.Dispose(); lblResult.Text = "Employee Data Saved!!" ; pnlEdit.Visible = false ; } } } } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| th { font : bold 11px "Trebuchet MS" , Verdana , Arial , Helvetica , sans-serif ; color : #4f6b72 ; border-right : 1px solid #C1DAD7 ; border-bottom : 1px solid #C1DAD7 ; border-top : 1px solid #C1DAD7 ; letter-spacing : 2px ; text-transform : uppercase ; text-align : left ; padding : 6px 6px 6px 6px ; background : #D5EDEF ; } td { border-right : 1px solid #C1DAD7 ; border-bottom : 1px solid #C1DAD7 ; background : #fff ; padding : 6px 6px 6px 6px ; color : #4f6b72 ; } td.alt { background : #F5FAFA ; color : #797268 ; } td.boldtd { font : bold 13px "Trebuchet MS" , Verdana , Arial , Helvetica , sans-serif ; background : #D5EDEF ; color : #797268 ; } |
Edit Gridview Dialog (25.5 KiB, 2,937 hits)
No comments:
Post a Comment