I'm upgrading an onboarding application in MVC5 for my company. At some point in this application, the user is expected to provide a list of contacts, for which I've defined a model class. I'd like to provide a set of fields for the contact, along with add/remove buttons with client-side functionality. None of the data is collected until the user presses the final 'submit' button, so there should be no postback throughout this process.
The behavior of the existing WebForms based application is to allow the user to specify two additional contacts. It achieves this by having fields such as AdditionalContact1FirstName, AdditionalContact1LastName, etc. It then shows/hides these using jQuery as the user presses add/remove buttons.
My goal is to remove the necessity for such exhaustive and verbose code by binding these additional fields to new elements in the Model.AdditionalContacts list.
My impulse for this application would've been to use a JS framework such as Vue, and simply post to an API endpoint. In that case, I would just use a template to generate fields for each contact, then pass the form data to the WebAPI as JSON. For this, though, I am constrained to use MVC/Razor. Is there an analog to this pattern using MVC/Razor and model binding?
