Web App to best Add, Delete and Edit rows without refreshing the page

Question

I am writing a Time Sheeting web application that involves users entering their tasks for the week. I would like not to have the page refresh so I am exploring ways to add/delete/edit tasks using JavaScript on the client browser.

Currently I am using ASP.NET-MVC, Ajax, JQuery and LiveValidation and I am make steady (if slow) progress.

I am interested to see if this is a solved problem and the pros and cons of various approaches.

For example my current approach to adding a new task (Category/Activity/Hours) involves basic validation using LiveValidation with a web service call to check the Category/Activity. If all the fields validate I create a new table row to show the task and the hide it. Next I call the web service again to add the task to the DB and on success I show the new row and enable it for deletion/editing

Answer 1

Why don't you validate and add your data in a single request? If data doesn't validate, return false with error fields, if validates, return true with newly created task's id. You don't need to validate and add in seperate requests.

Answer 2

I would suggest ExtJS. It is a library for more "application" like interfaces in web apps. Included is a EditorGridPanel class, which would be able to do what you're looking for fairly easily. And it looks GREAT.