How does View Model Binding work? + Best way of handing dynamic controls with view models?

Question

I am using asp.net mvc 3 and thinking what the best way to handle this scenario is.

Say I have a form that creates a reward structure. In this case their can be many levels of rewards

example

$100 to $500 - get .05% back
$501 to $1000 - get 0.6% back
$1001 to $1001 - get 0.7% back
and so forth.

Now these tiers are entered in the form I am creating. There could be one reward tier or there could be 5 tiers or 50 tiers. I just don't know.

Option 1

Make an artificial limitation of say 5 tiers. If they only need one tier well they still have to go through the wizard form(through jquery) I am creating and skip the next 4 tier screens (there will be quite a few fields they will have to fill out so I decided to make it a wizard so it is not so overwhelming at once).

    public class MasterVm
    {
        public IList<TiersVm> Tiers { get; set; }

        public MasterVm()
        {
            Tiers = new List<TiersVm>();
        }
    }

@for (int i = 0; i < Model.Tiers.Count; i++)
{
    @Html.LabelFor(x => x.Tiers[i].StartOfRange, "Start Of Range")
    @Html.TextBoxFor(x => x.Tiers[i].StartOfRange)

    @Html.LabelFor(x => x.Tiers[i].EndOfRange, "End Of Range")
    @Html.TextBoxFor(x => x.Tiers[i].EndOfRange)

    // more fields here

}

In my controller I would make 5 placeholders so the for loop would go 5 times around.

Option 2

Make the form have a generate another tier button. They click on it and another tier would be made. This way if they only have one they only see it once and if they have 100 it does not matter.

I was thinking of using jquery clone to achieve this but I don't know really how the view model binding works. Does it look at id's? or the name?

When I do option one all my controls look like this

<input id="Tiers_0__StartOfRange" type="text" value="0" name="Tiers[0].StartOfRange">

They all have unique id's(what is good) and unique names. I am unsure if in the clone code I should remove the id's and the names. Or do I need to have code in there to generate id's and names that look like above?

I will be submitting this all by ajax by using jquery.serializeArray() and in the controller I will have a parameter with the View Model is should bind too.

Answer 1

I don't like the out of the box collection indexing pattern MVC3 uses. In our application, we use Steve Sanderson's BeginCollectionItem HTML helper. It overrides the default behavior and uses GUID's instead of integers to index the multiple items.

I would suggest you do option #2, but do the cloning / collection item factory stuff on the server, and just return the HTML to the view using ajax. Steve's helper works with the default model binder, so when you post your form, you will end up with a collection of tier models bound from the form inputs.

Sample partial view for a single tier:

@model TiersVm
<div class="tier-item">
@using(Html.BeginCollectionItem("Tiers"))
{
    Html.LabelFor(x => x.StartOfRange, "Start Of Range")
    Html.TextBoxFor(x => x.StartOfRange)

    Html.LabelFor(x => x.EndOfRange, "End Of Range")
    Html.TextBoxFor(x => x.EndOfRange)

    // more fields here
}
</div>

You would have an action method that returns the above partial when a user clicks "Add a tier" button.

public PartialViewResult GenerateTier()
{
    return PartialView(new TiersVm());
}

The BeginCollectionItem helper would render out all of your input names and id's so that they could be rebound to the model you are POSTing in:

@model MasterVm
... using BeginForm ....

<div class="tier-container"> @* clicking new tier button appends items here *@
@foreach (var tier in Model.Tiers)
{
   Html.Action("GenerateTier", "ControllerName")
}
</div>

Then magic happens with the default model binder

[HttpPost]
public ActionResult ReceiveInput(MasterVm masterVm)
{
    // masterVm.Tiers has been populated by the default model binder
}

Answer 2

The guideline is the IDs of the elements must correspond the the ViewModel properties names.
All the rest is your decision.

If you create an AJAX call to the server you must make the URL parameters correspond the Model properties

You can write a custom Model Binder that binds according to your desired logic, One example for Custom IModelBinder you can find here

Note this MVC team recommendation:

In general, we recommend folks don’t write custom model binders because they’re difficult to get right and they’re rarely needed