Model nested type is null when after modelbinding

Question

I have a ViewModel as below:

public class CheckoutViewModel
{
    public string ProductNumber { get; set; }
    public string Name { get; set; }
    public int Price { get; set; }
    public Input UserInput;

    public class Input
    {
        public string Email { get; set; }
        public string Phone { get; set; }
    }
}

And an action like this:

[HttpPost]
public ActionResult Index(CheckoutViewModel model)
{
    // ...
    return View();
}

And my model has bound as below:

@model GameUp.WebUI.ViewModels.CheckoutViewModel

@using (Html.BeginForm("Index", "Checkout", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    <!-- some HTML -->

    @Html.LabelFor(m => m.UserInput.Email)
    @Html.TextBoxFor(m => m.UserInput.Email)

    @Html.LabelFor(model => model.UserInput.Phone)
    @Html.TextBoxFor(model => model.UserInput.Phone)

    <button>Submit</button>
}

When I submit the form, the UserInput is null. I know ASP.NET MVC is able to bind nested types but in this code is not. Also I can get the Email and Phone values by:

var email = Request.Form["UserInput.Email"];
var phone = Request.Form["UserInput.Phone"];

Maybe I do something wrong! It's a simple model binding you can find everywhere in the web.

Answer 1

You forgot to put a setter in your UserInput, I don't think the setter is automatic. Anyway you can make it work by just putting a getter/setter in your UserInput and no need to do extra in your controller method:

public Input UserInput { get; set; }

Your complete model:

public class CheckoutViewModel
{
    public string ProductNumber { get; set; }
    public string Name { get; set; }
    public int Price { get; set; }
    public Input UserInput { get; set; }

    public class Input
    {
        public string Email { get; set; }
        public string Phone { get; set; }
    }
}