MVC View Viewmodel HttpPost returns NULL

Question

For some reason my passed ViewModel returns NULL in the controller on HttpPost, but I can't figure out why. I thought I bounded the model in the view with @Html.HiddenFor(modelItem => product.Id).

My view:

@model MaterialOrderFinal.Models.ProductViewmodel

@{
    ViewBag.Title = "Index";
}

@using (Html.BeginForm("Result", "Product", FormMethod.Post))
{
    foreach (var category in Model.ProductCategories)
    {
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="@($"#collapse{category.Id}")">
                        @Html.DisplayFor(modelItem => category.Name)
                    </a>
                </h4>
            </div>
            <div id="@($"collapse{category.Id}")" class="panel-collapse collapse">
                <div class="panel-body">

                    @foreach (var product in Model.Products.Where(product => product.ProductCategoryId == category.Id))
                    {
                        <div class="col-sm-6">
                            <div class="col-xs-6">
                                @Html.DisplayFor(modelItem => product.Name) <br />
                                @Html.DisplayFor(modelItem => product.Description)
                                @Html.HiddenFor(modelItem => product.Id)
                                @Html.HiddenFor(modelItem => product.Name)
                            </div>
                            <div class="col-xs-6">
                                @Html.RadioButtonFor(modelItem => product.Quantity, 0, new { Name = product.Id, id = product.Id }) <span>0</span> <br />
                                @Html.RadioButtonFor(modelItem => product.Quantity, 50, new { Name = product.Id, id = product.Id }) <span>50</span> <br />
                                @Html.RadioButtonFor(modelItem => product.Quantity, 100, new { Name = product.Id, id = product.Id }) <span>100</span> <br />
                                @Html.RadioButtonFor(modelItem => product.Quantity, 200, new { Name = product.Id, id = product.Id }) <span>200</span>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    }
    <input type="submit" class="btn btn-default" />
}

My controller:

public class ProductController : Controller
{
    private MaterialOrderContext db = new MaterialOrderContext();

    // GET: Product
    public ActionResult Index()
    {
        var products = db.Products.Include(p => p.ProductCategory).ToList();
        var productCategories = db.ProductCategories.ToList();
        var viewModel = new ProductViewmodel { Products = products, ProductCategories = productCategories };
        return View(viewModel);
    }

    [HttpPost]
    public ActionResult Result(ProductViewmodel viewModel)
    {
        var products = viewModel.Products;
        Debug.WriteLine(products.ToString()); // Returns NULL here!
        return View(products);
    }
}

My viewmodel:

public class ProductViewmodel
{
    public IEnumerable<Product> Products { get; set; }
    public IEnumerable<ProductCategory> ProductCategories { get; set; }
}

The initial website with my categories and products is displayed, but once I click the submit button I get a NullReferenceError.

Answer 1

You need to create the input fields manually and set the name attribute accordingly:

<input name="Products[0].Name" />
<input name="Products[0].Id" />

<input name="Products[1].Name" />
<input name="Products[1].Id" />

Try this code:

@using (Html.BeginForm("Result", "Product", FormMethod.Post))
{
    int index = 0;

    foreach (var category in Model.ProductCategories)
    {
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="@($"#collapse{category.Id}")">
                        @Html.DisplayFor(modelItem => category.Name)
                    </a>
                </h4>
            </div>
            <div id="@($"collapse{category.Id}")" class="panel-collapse collapse">
                <div class="panel-body">
                    @foreach (var product in Model.Products.Where(product => product.ProductCategoryId == category.Id))
                    {
                        <input type="hidden" name="Proucts[@index].Id" value="@product.Id" />
                        <input type="hidden" name="Proucts[@index].Name" value="@product.Name" />

                        <div class="col-sm-6">
                            <div class="col-xs-6">
                                @Html.DisplayFor(modelItem => product.Name) <br />
                                @Html.DisplayFor(modelItem => product.Description)
                            </div>
                            <div class="col-xs-6">
                                <input type="radio" name="Products[@index].Quantity" value="0" /> <span>0</span> <br />
                                <input type="radio" name="Products[@index].Quantity" value="50" /> <span>50</span> <br />
                                <input type="radio" name="Products[@index].Quantity" value="100" /> <span>100</span> <br />
                                <input type="radio" name="Products[@index].Quantity" value="200" /> <span>200</span>
                            </div>
                        </div>

                        index++;
                    }
                </div>
            </div>
        </div>
    }
    <input type="submit" class="btn btn-default" />
}