ASP NET MVC: dynamically add or remove form inputs - unobtrusive check

Question

Before starting, I have a very specific question, and if you want to answer it, go to the end. But I welcome comments and advice, so a long post.

Well, we are dealing with many forms, and some of these forms are quite long and have many fields. We also have a requirement - in addition to top-level fields - to be able to have a variable number of duplicate rows - as we call them. For example, think of a client who has a first name, last name and age, while he can have zero or many addresses (for example, from 0 to 10), so the user should be able to add or remove contacts from the form when filling out it. the user receives the “Add” button to add more addresses and next to each address, a delete button. There could potentially be more than one repeating section in the same form, but I'm not going to go there. The fact is that due to legal and historical reasons, all forms must be saved immediately, so when the forms can be edited, we can’t accept the half-filled form and have another page for users to add and remove addresses, for example.

I am using ASP NET MVC 2 (strongly typed views with one common controller) with client-side validation and heavy jquery scripts for vibrant functions. We will probably move on to ASP NET MVC 3 soon, and I'm already playing with 3 to find a good solution. These addresses are defined in the Model as List<Address> , for example.

I currently have a working solution for this problem, but I'm not satisfied with this: I have an HTML helper that calls add or remove buttons and a bit of JavaScript to disable validation and allow form submission (even not valid), and since I can to find out the name of the button that was pressed, I have all the necessary logic to handle the addition or removal and it works very well.

But I submit back and the form reloads and I am looking for an alternative solution. Here is what I can do:

• Do everything on the client side. The Add button will clone one of these addresses, and the Delete button will remove() item. I only need to rename the indexes I made. We used the jquery calendar, and it was breaking new elements, which I also fixed. But the check does not work, which probably can work with ASP NET MVC, but this solution looks very fragile - the house of the card, which looks great before adding another card.
• Submit the entire usin Ajax page and then reload it: this is probably better than my current solution, but only a bit.
• Use ajax to submit the form and return the JSON and use the data to create the elements or delete them: again the house of the map due to the extensive client-side script.

• Serialize the form and publish with Ajax a specific action and return only the repating section (as a partial view). The action on the controller can be reused and called from the view itself to return a partial view

  OK, the last one is the one I'm working on, but there is a problem. ASP NET MVC 3 with unobtrusive validation only works if the form is covered in BeginForm() , while my top-level view has BeginForm() , but not my partial view. It works well when I call it from a view, but not on an ajax call to get only a repeating section.

(Question)

So, is there a way to tell ASP NET MVC 3 to spit out validation attribute data regardless of whether it is in a BeginForm () block? To be honest, if this is not a mistake, this is definitely an important function request. I really used a reflector to parse the code, and the state seems to be there.

Answer 1

Short answer:

Add this to a partial view:

 if (ViewContext.FormContext == null) { ViewContext.FormContext = new FormContext(); } 

Answer 2

I do not think this is possible using the default unobtrusive libraries provided. If you look at jquery.validate.js and jquery.validate.unobtrusive.js, then it looks like it only checks what is inside the form.

There are several posts about this if Googled and a few works around.

I had a similar problem (albeit much simpler), where I had a validation summary at the top of the page and several forms, but unobtrusive javascript would only fill out the view summary if it is inside the form (jquery.validate.unobtrusive. Js line 39, if it's interesting ...).

I'm not sure if the validation library is expanding, but most of the things in jquery are an option if you want to go down this road.

As far as possible solving your problem, I will put my 2 cents for what it costs.

You may have two actions that have been submitted. The first step is that you publish your model without js validation, and all validation is done in code - this will force all users to disable javascript.

The second step is to serialize the model. In mvc 3 with Ajax.BeginForm there is AjaxOption for Url where you can specify an action for jquery to call (where it serializes the form of the form and you can decorate your action with your strongly typed model). Here you can test the model and return the json result and process it in javascript.