TextBoxFor on model binding not posting modified value

Question

So I have this model:

public class HoraireChefViewModel
{
    public ChefModel mChef { get; set; }

    public DateTime mDate;

    public int mStartHour;

    public int mEndHour;

    public HoraireChefViewModel()
    {
        mDate = DateTime.Now;
    }
}

And when I do a get request at my controller, I do this:

[HttpGet]
public ActionResult GérerHoraireChef(int? chefid)
{
    ChefModel chefToShow = ChefManager.GetChefByID((int)chefid);

    HoraireChefViewModel viewModel = new HoraireChefViewModel
    {
        mChef = chefToShow,
        mEndHour = 0,
        mStartHour = 0
    };

    ModelState.Remove("mEndHour");
    ModelState.Remove("mStartHour");

    return View(viewModel);    
}

[HttpPost]
public ActionResult GérerHoraireChef(HoraireChefViewModel horaireViewModel, string submitButton)
{
    (... some potato)

    return View(horaireViewModel);
}

You can see my many attempts to solve this problem.

So in my view, I render things like this:

@model BoudhaJaune.ViewModels.HoraireChefViewModel

@{
    ViewBag.Title = "Gérer l'horaire de " + Model.mChef.mName;
}

<h2>
    Gérer l'horaire de @Model.mChef.mName
</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    @Html.HiddenFor(item => item.mChef.mChefID)

    <div>
        <div class="float-left">
            @Html.ActionLink("Retourner à la liste", "GérerChef")
        </div>
        <div class="clear"></div>
    </div>
    <div style="background-color: white; border: 1px solid black; border-radius: 5px; padding: 5px; margin: 5px;">
        <div style="width: 100%; display: table; border-spacing: 5px; line-height: 40px">
            <div class="float-left" style="width: 48%">
                <div class="float-left" style="width: 30%">
                    Nom:
                </div>
                <div class="float-right" style="width: 70%">
                    @Html.TextBoxFor(item => item.mChef.mName, new { @style = "width: 300px;", @class = "disabled", disabled = "disabled" })
                    @Html.HiddenFor(item => item.mChef.mName)
                </div>
            </div>
            <div class="float-left" style="width: 48%">
                <div class="float-left" style="width: 30%">
                    Description:
                </div>
                <div class="float-right" style="width: 70%">
                    @Html.TextBoxFor(item => item.mChef.mDescription, new { @class = "disabled", disabled = "disabled", @style = "width: 300px" })
                    @Html.HiddenFor(item => item.mChef.mDescription)
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div style="width: 100%; display: table; border-spacing: 5px; line-height: 40px">
            <div class="float-left" style="width: 33%">
                <div class="float-left" style="width: 30%">
                    Date:
                </div>
                <div class="float-right" style="width: 70%">
                    @Html.TextBoxFor(item => item.mDate, Model.mDate.ToShortDateString(), new { @class = "datePicker", @title = "Choose a Date"})
                </div>
            </div>
            <div class="float-left" style="width: 33%">
                <div class="float-left" style="width: 30%">
                    Heure de début:
                </div>
                <div class="float-right" style="width: 70%">
                    @Html.TextBoxFor(item => item.mStartHour, new { @class = "positive-integer"})
                </div>
            </div>
            <div class="float-left" style="width: 33%">
                <div class="float-left" style="width: 30%">
                    Heure de fin:
                </div>
                <div class="float-right" style="width: 70%">
                    @Html.TextBoxFor(item => item.mEndHour, new { @class = "positive-integer"})
                </div>
            </div>
            <div class="float-right">
                <input type="submit" value="Ajouter une date" name="submitButton"/>
            </div>
            <div class="clear"></div>
        </div>
        @if (Model.mChef.mListMenuDisponibilités.Count > 0)
        {
            <div style="width: 100%; display: table; border-spacing: 5px; line-height: 40px">
            </div>
        }   
    </div>
}

However my main problem is that for a reason unknown the data I put in my TexBoxFor fields for the mStartHour and mEndHour property is always 0 even if I type 5 or 12. Why, and how can I solve this?

EDIT

Here's the HTML code generated for both of the problematic fields:

<div class="float-left" style="width: 33%">
    <div class="float-left" style="width: 30%">
        Heure de début:
    </div>
    <div class="float-right" style="width: 70%">
        <input class="positive-integer" data-val="true" data-val-number="The field Nullable`1 must be a number." id="mStartHour" name="mStartHour" type="text" value="0" />

    </div>
</div>
<div class="float-left" style="width: 33%">
    <div class="float-left" style="width: 30%">
        Heure de fin:
    </div>
    <div class="float-right" style="width: 70%">
        <input class="positive-integer" data-val="true" data-val-number="The field Nullable`1 must be a number." id="mEndHour" name="mEndHour" type="text" value="0" />

    </div>
</div>

Answer 1

You properties need to have getters and setters in order for the DefaultModelBinder to set the value from the posted values.

public class HoraireChefViewModel
{
  public ChefModel mChef { get; set; }
  public DateTime mDate { get; set; } // change
  public int mStartHour { get; set; } // change
  public int mEndHour { get; set; } // change
  public HoraireChefViewModel()
  {
    mDate = DateTime.Now;
  }
}

Side note: You do not need to call ModelState.Remove(..) in the GET method (nothing has been added to model state at that point!)