Ajax updating a gridview with jquery
Bind the Repeater control from codebehind by fetching employee detail from the express database we have created in App_Data folder.
When the user clicks the edit button, we will hide the edit button and enable update & cancel button for that row.
CREATE TABLE [dbo].[T_Employees]( [ID] [int] IDENTITY(1,1) NOT NULL, [First Name] [nvarchar](20) NULL, [Last Name] [nvarchar](20) NULL, [Department] [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') page: Below HTML Markup of the page you will notice that I have placed a Script Manager and an ASP. You notice that in gridview I have placed Edit link (line 17 in above code) to pass ID of Employee to Edit Employee page. Here is code Edit Page: In this page, we get Employee ID from Querystring.
It provides more flexibility on the layout of data displayed and the control itself will not render any additional HTML like Grid View and Data List control do.
You can modify Update Row() method to call the page method only if the value is changed by comparing with initial table cell value.
The above j Query code will change the table cell to textbox by populating its value to textbox directly.
With the release of j Query library, it is now possible to provide an easy edit update feature for Repeater control.
Download the source attached with this article and see it in action.