I’m working on a .NET 6 MVC project, which requires a form that will allow the user to generate <select> elements on the page with a button click. Each dropdown generated will have the same list of options minus any options already selected through the other dropdowns (so that a user can’t select the same option twice). Moreover, whenever a user selects an option using any of the dropdowns, a list of checkboxes that is specific to the option chosen is rendered below the dropdown.
If this description isn’t totally clear, my main point is simply that the form will need a lot of dynamic elements.
The model that I will pass to the form will already have all the properties that the form will need. So, there will be no need for any asynchronous calls to the server while the user is interacting with it. I want the submission to be a simple POST request to the controller of the bound fields.
So, what is the recommended way of building such a dynamic form within an existing MVC application? I thought of two approaches:
- Creating a Blazor component with an
EditForm, and including it on the page where the form needs to be displayed: I actually did this already, and the form works as intended. However, I’m having a hard time figuring out a good way of POSTing all the bound data to the MVC controller now (if anyone can lend any tips, I’d appreciate it). - Building the form within a normal MVC view, and using JavaScript for the dynamic parts: The advantage of this approach is that it wouldn’t have to disrupt the MVC’s usual way of submitting form data to the controller. But, I fear that JS code would be far more messy than the Blazor code I already wrote.
I would greatly appreciate any advice regarding the choosing between these two options, or any suggestions about alternative solutions.