Submitting form from View to Controller isn't populating Model object

Question

I have a Controller, View, and Model for an application I am taking over from someone else. The problem I'm having is that when the javascript submits the form, my model object in the Edit function of the Controller is not being filled with the values from the View, all fields are either null or 0. How can I get the object to be properly filled?

I have tried looking at Firebug, but I can't see anything that would indicate a problem. The string parameter id is correctly being passed in the URL, ex: firsttry.com/admin/distribution/edit/sanfran, where sanfran is the id string. Firebug is confirming that the javascript is correctly loaded when it would be called.

@section scripts
{
    @Scripts.Render("~/bundles/qmmodules/admin/distribution")
}

DistributionController.cs

namespace JRI.QM.WebUI.Areas.Admin.Controllers
{
    public class DistributionController : BaseAdminController
    {
        [HttpPost]
        public ActionResult Edit(string id, DistributionViewModel model)
        {

        }
    }
}

DistributionViewModel.cs

namespace JRI.QM.WebUI.Areas.Admin.Models.ViewModels
{
    public class DistributionViewModel
    {
        public string name;
        public string ipAddress;
        public string description;
        public Byte eyeDee;
        public string destinationPath;
        public List<JRI.DMP.BLL.Filter> filters;
    }
}

Edit.cshtml

@model JRI.QM.WebUI.Areas.Admin.Models.ViewModels.DistributionViewModel

@{
    ViewBag.Title = "Edit";
}

@using (Html.BeginForm("Edit", "Distribution", FormMethod.Post, new { id = "editRoleForm" }))
{
    <div class="dialog" id="editRoleDialog">

        @Html.TextBoxFor(x => x.name)
        @Html.HiddenFor(x => x.ipAddress)
        @Html.TextBoxFor(x => x.description)
        @Html.HiddenFor(x => x.eyeDee)
        @Html.HiddenFor(x => x.destinationPath)
        @Html.HiddenFor(x => x.filters)

        <div id="permissionsDialogFooter" class="dialogFooter newUser_dialogFooter">
            <div class="qm_mediumButton submitButton">save</div>
            <div class="qm_mediumButton cancelButton">cancel</div>
            <br class="clearfloat" />
        </div>
    </div>
}

distribution.js

QM.ui.Role = (function ($) {
    var _xhrInProgress = false;
    function init() {
        _bindEvents();
    }

    // private functions
    function _bindEvents() {

        var addEditRoleEvents = function (formObj) {
            formObj.submit(function () {
                var $this = $(this);

                if ($this.valid()) {
                    $.post($this.attr("action"), $this.serialize(), function (response) {
                        if (response.Success) {
                            if (response.RedirectUrl) {
                                window.location.href = response.RedirectUrl;
                            }
                        }
                    });
                }

                return false;
            });

            formObj.find(".submitButton").click(function () {
                formObj.submit();
            });
        };

        // Edit role dialog
        $(".dt-edit a").click(function () {
            var $this = $(this);

            $.get($this.attr("href"), function (data) {
                $(".content").after(data);
                QM.ui.Mask.show();

                addEditRoleEvents($("#editRoleForm"));
            });

            return false;
        });
    }

    return {
        init: init,
    };
})(jQuery);

$(document).ready(QM.ui.Role.init);

in RouteConfig.cs

routes.MapRoute("Default", 
            "{controller}/{action}/{id}", 
            new { controller = "Home", action = "Index", id = UrlParameter.Optional },
            new[] { "JRI.QM.WebUI.Controllers" }
);

Answer 1

The default model binder of ASP.NET MVC, only work with properties. Your model class doesn't have any property, it does have fields.

To fix that use properties instead field in your model class, like below

public class DistributionViewModel
{
    public string name { get; set; }
    public string ipAddress { get; set; }
    public string description { get; set; }
    public Byte eyeDee { get; set; }
    public string destinationPath { get; set; }
    public List<JRI.DMP.BLL.Filter> filters { get; set; }
}

Also I suggest you to follow the C# code convetions, it says that you should use PascalCase for properties, you can see more details here https://msdn.microsoft.com/en-us/library/ms229043(v=vs.110).aspx

Following the convetion, your class should be like that

public class DistributionViewModel
{
    public string Name { get; set; }
    public string IpAddress { get; set; }
    public string Description { get; set; }
    public Byte EyeDee { get; set; }
    public string DestinationPath { get; set; }
    public List<JRI.DMP.BLL.Filter> Filters { get; set; }
}