MVC client side validation for a Model that has a list of models

Question

I have this model that has a list of another model. Then in my view, I have my form that fills a couple of fields for my main Model. But I want this form to also be able to add X models of the other type and to be all wired up and I'm wondering how to properly do this.

So here are my two models:

public class MyMainModel
{

    public int MyMainId { get; set; }

    [Required(ErrorMessage = "Groovy name required")]
    [Display(Name = "MyMainModel's groovy name:")]
    public string Name { get; set; }

    public List<MySubModel> MySubModels { get; set; }

}

public class MySubModel
{

    public int MySubId { get; set; }

    [Required(ErrorMessage = "Cool name required")]
    [Display(Name = "MySubModel's cool name:")]
    public string Name { get; set; }

}

When I hit my controller for my "create" view, I go through this action:

public ActionResult SomePageAboutCreating()
{
    // [...] Some other stuff
    return View(new MyMainModel());
}

Now this sends to my strongly typed view:

@model myFunProject.WebModels.MyMainModel

<div>
    <form id="my-create-form" onsubmit="CreateMyMainModel(this); return false;">
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()

        <div class="result" style="background-color: silver;">This is the operation result box</div>
        <img class="loading" src="/Images/ajax-loader.gif" alt="Loading..." width="16" height="16" style="display: none;" />

        <section>
            @Html.LabelFor(m => m.Name)
            @Html.TextBoxFor(m => m.Name)
            @Html.ValidationMessageFor(m => m.Name)
        </section>

        <!-- Here begins the fields for my list of "MySubModel" -->
        @Html.EditorFor(x => x.MySubModels)

        <!-- Here I'm thinking about a javascript that will add the previous fields X times so that the user can create "MyMainModel" as well as x times "MySubModel"... -->

        <input type="submit" class="btn-send" id="my-create-form-submit" value="Send" />
    </form>
</div>

So I think I have to use the EditorTemplates here... So I setup in my /Views/EditorTemplates/MySubModels.cshtml (Named against my "MyMainModel"'s property) and then when I write my form in there, I'm confused...

@model myFunProject.WebModels.MyMainModel

@*<section>
    @Html.LabelFor(m => m.Name)
    @Html.TextBoxFor(m => m.Name)
    @Html.ValidationMessageFor(m => m.Name)
</section>*@

So here I'm not sure what to put in here... I want my Name property there to be the one of "MySubModel". And as the user sees this form, say for example he'll go through this scenario:

1. Enters a name for the "MyMainModel".
2. Goes to the other name box and fills in a name of the first instance of "MySubModel.
3. Then he would click a special button that would manipulate dom to append another MySubModel.Name field.
4. He would write in the second "MySubModel" name.
5. He would click submit.

The ajax call I put in there I'm ok doing the wiring up, but my confusion comes with the code I have to write for the editor template and then I'm kind of also wondering about how I'm going to create a new field (for that second "MySubModel" for example...).

Any help would be appreciated, I've gone through many articles about subjects close to this, but have not found this case yet. Thanks!

EDIT:

I'll add the action (an overly simplified version hehe) that is called by my ajax when the form is submitted.

public ActionResult CreateMyMainModel(MyMainModel myMainModel) {

    // [...] Do stuff like save to database...
    // var aGroovyNAme = myMainModel.Name;

    foreach(var mySubModel in myMainModel.MySubModels) {
        // Here I would have the sub models available to manipulate...
        // var aCoolName = mySubModel.Name;
    }
    return Content("ok");

}

Answer 1

I've recently answered pretty much this exact question on another thread:

ASP.Net MVC4 bind a "create view" to a model that contains List

Answer 2

I had a similar issue on a project where I wanted to validate some fields on some occasions and not on others (ie on save don't validate but on submit validate everything.

I ended up doing everything manually in javascript and posting back a json object.

On reflection I would rather have manipulated the validation javascript file(MicrosoftMVCValidation.js).

For model binding issues, I recommended looking at custom model binding.

I found using EditorTemplates a bit fiddly especially with partial views.

I find asp.net mvc 3 a bit weak in model binding. I hoped that some of the issues would be fixed in mvc 4 but from what I have looked at so far MVC4 is primarily an upgrade for creating windows phone applications.

Here's an example of a custom model binder for decimal properties in the model.

You can use the same logic with your own custom models.

I found there are occasions when I want to bind a model with a collection of entities on large pages, rather than just binding a basic collection of properties for example.

public class DecimalModelBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);

        //return valueProviderResult == null ? base.BindModel(controllerContext, bindingContext) : Convert.ToDecimal(valueProviderResult.AttemptedValue);


       if (valueProviderResult == null)
           return base.BindModel(controllerContext, bindingContext);
       else if (valueProviderResult.AttemptedValue == "")
           return base.BindModel(controllerContext, bindingContext);
       else
           return Convert.ToDecimal(valueProviderResult.AttemptedValue);

    }
}  

Answer 3

I've gone through many articles about subjects close to this, but have not found this case yet.

I would really recommend you reading the editing a variable length list article from Steven Sanderson which illustrates a very nice approach to handle this scenario. He presents a custom Html.BeginCollectionItem helper which could be used to generate non-sequential indexes (guids) for the input field names and thus allowing for easily removing elements dynamically without leaving holes in the indexes. When the user decides to add another item, an AJAX call is made to a controller action which simply returns an empty template (partial).

You could also do this purely on the client side with javascript only. Steven Sanderson illustrated this approach using knockoutjs in this similar article.

Those two articles are really the best approach in terms of dynamically editing a variable length list of items in ASP.NET MVC. Reading them will really be helpful for better understanding some core concepts in model binding in ASP.NET MVC.