how to add delete row of table in asp.net from client side?

Question

I am working on asp.net web application. I have to display data to the user in table format (it could be a table or gridview or something else ). There is one column which has two signs plus and minus. I have to display data of n records, so there could be maximum n no. of rows. Rows will be created dynamically. Initally there will be only one row. User will fill details in first row and if he wants, When user clicks on plus sign, one row will be added below this row and if he clicks minus in a row that particular row will be deleted. So I want this to be handled on client side not on server side and I dont want postback or page reload. Is it possible by jquery, java script or ajax. Please suggest me how.

Answer 1

You can do this with a some AJAX, I prefer to use JQuery to streamline the process for me. When I do the same thing on my pages this is how I do it:

1. The page loads without the table.
2. The page (from the client) sends an AJAX request to the server for the table data.
3. The table data is returned and the table itself is built in javascript. This can be done by generating the table object or you can write the html yourself (that's how I do it).
4. I attach events to the two buttons, in your case a plus and a minus, that fires a javascript event.
5. The javascript event sends an AJAX request back to the server asking for a delete or new row.
6. The deleted row is either removed in javascript, or added in.

Now you can either request the data through AJAX and then build the table row yourself, or you can ask the server to send you the row pre formatted. Either way remember that these objects, the buttons and the table, will not be ASP.Net objects, will not be in Viewstate and will not persist through post backs so be prepared to rebuild this table each time you perform a post back.