Model from view not given to controller

Question

I have the problem that the model in this controller is null (everything in it). So from the viewpage the model is incorrectly filled. So when the application arrives at the controller, the model is empty (everything is null).

View:

@{
    ViewBag.Title = "Product Beheer";
    Layout = "~/Views/Shared/_Layout3.cshtml";
}
@model IntroSport.Models.ProductToevoegModel
<h2>ProductToevoegen</h2>

@using (Html.BeginForm("ProductMaken", "Admin"))
{
    //@Html.ValidationSummary(true)

    <fieldset>
        <div class="editor-label">Prijs</div>
        <div class="editor-field"> 
                                  @Html.EditorFor(model => model.Product.Prijs)</div> 
        <div class="editor-label">Size</div>
        <div class="editor-field"> 
                                  @Html.EditorFor(model => model.Product.Size)</div>
        <div class="editor-label">Merk</div>
        <div class="editor-field"> 
                                  @Html.EditorFor(model => model.Product.Merk)</div>
        <div class="editor-label">Naam</div>
        <div class="editor-field"> 
                                  @Html.EditorFor(model => model.Product.Naam)</div>
        <div class="editor-label">URL Foto</div>
        <div class="editor-field"> 
                                  @Html.EditorFor(model => model.Product.AfbeeldingURL)</div>

        <input type="submit" value="Voeg toe" />
    </fieldset>
}

Controller:

public ActionResult ProductMaken()
{
    try
    {
        ProductToevoegModel viewModel = new ProductToevoegModel();
        return View(viewModel);
    }
    catch (Exception e)
    {
        ViewBag.FoutMelding = "Er is iets fout gegaan: " + e;
        return View();
    }
}
[HttpPost]
public ActionResult ProductMaken(ProductToevoegModel model)
{
    if (ModelState.IsValid)
    {
        try
        {
            productDBcontroller.maakProduct(model);
            return Redirect("/admin/ProductBeheer");
        }
        catch (Exception e)
        {
            ViewBag.FoutMelding = "Er is iets fout gegaan: " + e;
            return View();
        }
    }
    else
    {
        return View("ProductMaken", model);
    }

Model:

namespace IntroSport.Models
{
    public class ProductToevoegModel
    {
        public Product Product { get; set; }
    }
}

Product model:

namespace IntroSport.Models
{
    public class Product
    {
        public int ProductID;

        [Required(ErrorMessage = "Dit is een verplicht veld!")]
        public String Naam;

        [Required(ErrorMessage = "Dit is een verplicht veld!")]
        public String Size;

        [Required(ErrorMessage = "Dit is een verplicht veld!")]
        public String AfbeeldingURL;

        [Required(ErrorMessage = "Dit is een verplicht veld!")]
        public String Merk;

        [Required(ErrorMessage = "Dit is een verplicht veld!")]
        public int Categorie;

        [Required(ErrorMessage = "Dit is een verplicht veld!")]
        public int Voorraad;

        [Required(ErrorMessage = "Dit is een verplicht veld!")]
        public Double Prijs;
    }
}

Answer 1

You have to change all fields in Product class to auto properties:

public class Product
{
    public int ProductID;

    [Required(ErrorMessage = "Dit is een verplicht veld!")]
    public String Naam { get; set; }

    [Required(ErrorMessage = "Dit is een verplicht veld!")]
    public String Size { get; set; }

    [Required(ErrorMessage = "Dit is een verplicht veld!")]
    public String AfbeeldingURL { get; set; }

    [Required(ErrorMessage = "Dit is een verplicht veld!")]
    public String Merk { get; set; }

    [Required(ErrorMessage = "Dit is een verplicht veld!")]
    public int Categorie { get; set; }

    [Required(ErrorMessage = "Dit is een verplicht veld!")]
    public int Voorraad { get; set; }

    [Required(ErrorMessage = "Dit is een verplicht veld!")]
    public Double Prijs { get; set; }
}