Question

I am looking for the best way to create ajax enabled subforms from items in a list with MVC 3. A static list of values should be generated, but with an “edit” link/button next to every item, to toggle inline edits.

I did follow the tutorial at this link

http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation [1]

However it is based on the form edit fields always being visible

I’d like to show a static list with field values, but let the user activate an edit field by clicking “edit” (e.g. button)

I did modify the example at [1] by creating a default partial view with a form with submit button only. When posting the data by ajax the edit form will show. It looks like it is working, (I only need to hide validation errors on the first POST – which does not send real data).

Update:
An even better solution would probably be to leave out all forms in the static view, just have a single css class button/link next to each item, and let jquery fetch the relevant view for the clicked item. I am not sure how to do that with MVC 3+jQuery though.

Another update:
I discovered Ajax.Actionlink, which did exactly what I wanted!

Answer 1

I found out how to do it, and it turned out to be real simple!

I created two partial views.

One for rendering each static item. I used used Ajax.ActionLink with InsertionMode “replace”, and set the parent of the item as the target

The second for rendering the form. Here I used Ajax.Beginform with similar options.

On successfully saved data, I returned the static view, on failure, I returned the partial view with the ajax form again.

I’m happy I found a MVC-centric way to do it (although it is fun creating custom stuff with jQuery)