How do I save and re-fill the form data when opening a subform?
In an MVC4 project, I have a form that contains a partial view, which is an index view of the languages learned in school. This is the index of the default type template, with adding, removing, editing line references, etc. When you add or edit, the Add or Edit window opens for the language. After, for example, adding a language, an updated partial view is returned.
My problem is that if the user opens the language form, changes and entries in the main form will be lost. I can't just save the Ajax before opening the language form as the main form might be partially complete and not validated. What I am thinking of doing is using the AjaxPreserve
action it takes FormCollection
and saving it in the session (o on disk or anywhere) and so no model binding and server validation is done.
I then have two problems, I need to disable client validation before calling the AJAX action, and I will need to re-fill the main form using the FormCollection
one I saved earlier. I think there must be some kind of jQuery voodoo to disable client validation, but I am totally obsessed with re-filling the form.
ALTERNATIVE SOLUTION: Instead of using "subforms" I can use editor templates in pop-ip forms where FK ids are not required, but that's only in some cases, so my question still stands.
source to share
Could you please use something like Knockout where you create a javascript model and bind it to the grid / dialog / template edit view. I would convert all data to a JS model, bind it to a table / grid, and then track all changes on the client side. When everything is done, just serialize the entire model back to the server and update the data store. If this is an acceptable scenario, it will save you a ton of trouble. Familiarity with Knockout is required, but if you've used it before, you should be able to solve it in a very simple and effective way.
This example on the Knockout website gives an idea of what I am trying to suggest. Editing, deleting, adding is done on the client side until you send all the data back to the server. You will need to keep track of the flags for each object to know if they are added, edited, or removed.
source to share
Why don't you just use javascript? For example. You have a main form that stores some data. And when you need to add something specific like languages, you open the popup using a partial view, let the user fill out the form, but when the user hits submit, you intercept the action with js, store the stuff in a javascript array / object, or whatever something else and maybe store it in a hidden field of the main form - for final submission
var newData = new Object();
newData.Field1 = $("#yourField1");
...
lanuageData.push(newData);
$("#languageContainer").val(JSON.stringify(languageData));
...
The DataAnnotation function works the same here as:
$.validator.unobtrusive.parse("your_partial_view_container");
When you need to edit some object that has already been added to the js array - popup and fill it with the js array element. So basically you are doing all the CRUD on the client side, saving changes only on final submission. To make your code in the conrolller clearer, you can use a custom binder that deserializes some string field from JSon to List or any other object -> so it can be checked server side.
source to share