MVC4 View not binding to Model in Controller on POST

Question

Application View:

@model Models.ApplicationModel

@using (Html.BeginForm())
{
    @Html.HiddenFor(m => m.SectionID);
    @Html.HiddenFor(m => m.CurrentSectionName);

    <div class="section" id="Terms">
        @Html.EditorFor(m => m.Term)
    </div>
    <div class="section" id="User">
        @Html.EditorFor(m => m.User)
    </div>
    <input type="submit" value="Save" />
}

@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
        $(function () {
            $('form').click(function () {
                if ($(this).valid()) {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        success: function (result) {
                            debugger;
                        }
                    });
                }
                return false;
            });
        });
</script>

Application Model:

public class ApplicationModel
{
    public int SectionID;
    public Term Term;
    public User User;
    public string CurrentSectionName;
}

Application Controller:

public ActionResult Save(ApplicationModel ApplicationModel, FormCollection fc) 
{
     return PartialView("Application", ApplicationModel);
}

/EditorTemplates/Term:

@model Data.Term

<fieldset>
    <legend>Term</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Type)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Type)
        @Html.ValidationMessageFor(model => model.Type)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Length)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Length)
        @Html.ValidationMessageFor(model => model.Length)
    </div>

</fieldset>

/EditorTemplates/User:

@model Data.User

<fieldset>
    <legend>User</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.FirstName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FirstName)
        @Html.ValidationMessageFor(model => model.FirstName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.LastName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.LastName)
        @Html.ValidationMessageFor(model => model.LastName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.MiddleInitial)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.MiddleInitial)
        @Html.ValidationMessageFor(model => model.MiddleInitial)
    </div>

</fieldset>

When I click the save button, in the Application Controller, only the FormCollection has keys (21 of them). The model is not bound with data.

What am I doing wrong here?

Answer 1

You may also need to check the access modifier on your Model's properties. I ran into this same situation and while I had setters on my properties, they were protected instead of public. Thank you to Mate for pointing me in the right direction as well.

Answer 2

Try this, Add {get; set;} to your model

public class ApplicationModel
{
    public int SectionID {get; set;}
    public Term Term {get; set;}
    public User User {get; set;}
    public string CurrentSectionName {get; set;}
}