Multiple input fields for the same model data in ASP.NET MVC

Question

I have a very large model for user profiles. There are about 15 different new user categories (e.g., young traveler, experienced traveler, captain, helmsman, ...). Depending on the user category, some data fields of the model are not applicable and remain null in the database.

I'm trying to populate the model through one big sign-up form. JavaScript determines the user category based on the user's previous answers and shows/hides applicable/non-applicable input fields in the form.

The following problem arose:

• Depending on the user category, I need to show some input fields in a slightly different order in the form. I have solved this by creating multiple input fields for the same data field in the view (e.g., @Html.TextBoxFor(x => x.Age)) and then using JavaScript to show only one depending on the user category.

• My plan was to submit only the visible input fields so that the server is not confused about which input fields to use to create the model.

• Unfortunately, Visual Studio doesn't quite play along: First, there's there problem of having multiple input field with the same id; I could maybe live with that. But then, validation attributes in the HTML-source are generated only for the first occurrence of each data field in the view (e.g., @Html.TextBoxFor(x => x.Age)), not for any later occurrences.

E.g., the first occurrence generates

<input data-val="true" data-val-number="The field Age must be a number." 
data-val-range="The field Age must be between 10 and 99." data-val-range-max="99" 
data-val-range-min="10" id="Age" name="Age" type="text" value="">

The second occurrence generates merely

<input id="Age" name="Age" type="text" value="">

How can I solve this? My thinking:

• Create all input fields hidden once at the beginning of the view and use Javascript to generate at the form dynamically. Downside: A lot of work, all page structure is now in JavaScript instead of view.
• Use partial views for different user categories. Downside: When the form page is opened (in the controller), I retrieve several lists from the database and put them in the model in order to populate the form DropDown input fields and RadioButton input lists in the view. Is there any way to reuse this information in the partial views so that there are not many repetitive database queries?

Any thoughts on the situation are very much appreciated. I'm somewhat new to ASP.NET MVC.

Answer 1

Honestly, I would drop the idea of building such a beast in server technology in favor of using plain JS, KnockoutJS or AngularJS which seem to be built exact for this needs. However, answering your questions:

1. You have to remember, that browser submits to the server only those fileds which are enabled. If you don wan't to "confuse" server just disable unneeded fields before submit.

2. Model binder of asp.net mvc finds values by name attribute not by id. You can have form with couple fields with different id attributes and one name for all of them. It will be just a bit more complex to declare them in the Razor View, but it should work.

Answer 2

Your view model should include a property (pehaps an enum) that defines you user category, then in your view just render the html applicable to that category

/// Some common html
@if (model.UserCategory == "captain")
{
  // controls specific to captain
}
else if (model.UserCategory = "helmsman")
{
  // controls specific to helmsman
}

If you need to include this html on the same page you are determining the 'previous answers', put this in a partial view and all it using ajax (passing the user category).

Another option would be to create only one control for each property and then in the javascript that hides the control, also disable the control - disabled controls don't post back so the property will remain null

$('#MyProperty').prop('disabled', true);