MVC4 using Ajax.BeginForm not sending ViewModel to controller?

Question

This is what is getting sent to the server:

http://localhost:3182/Admin/UserAdmin/Save?Count=0&Keys=System.Collections.Generic.Dictionary%602%2BKeyCollection%5BSystem.String%2CSystem.Object%5D&Values=System.Collections.Generic.Dictionary%602%2BValueCollection%5BSystem.String%2CSystem.Object%5D

I am using the unobtrusive jquery.unobtrusive-ajax and it is working fine on other pages in my project. I am not doing anything fancy with the BeginForm helper. It is pretty straight forward actually. I can post it if it helps, but there is not much too it.

I thought another library might be interfering with my code so I removed other scripts and it still does the same thing. It is very weird. Has anyone seen this before and know how to fix it?

Here is the entire view:

@using YogaDiVita.Ui.Helpers
@model YogaDiVita.Domain.YogaDiVitaContext.Model.User
@{
    ViewBag.Title = "Profile";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
    var isInstructor = (bool)ViewBag.IsInstructor;

}

<link href="@Url.ContentArea("~/Scripts/plugins/fineUploader/fineuploader.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Scripts/plugins/jCrop/css/jquery.Jcrop.min.css")" rel="stylesheet"
    type="text/css" />
<div class="row-fluid">
    <div class="span12">
        <h3 class="heading">User Profile</h3>
        <div class="row-fluid">
            <div class="span8">
                @using (Ajax.BeginForm("Save",new RouteValueDictionary(), new AjaxOptions
               {
                   HttpMethod = "POST",                       
                   OnSuccess = "OnSuccess",
                   OnFailure = "OnFailure"
               }, new { @class = "form-horizontal well" }))
                {
                    @Html.HiddenFor(u => u.Id)
                    @Html.HiddenFor(u => u.CreatedById)
                    @Html.HiddenFor(u => u.ModifiedById)
                    @Html.HiddenFor(u => u.Username)
                    @Html.Hidden("isInstructor", isInstructor)
                    <fieldset>
                        <div class="control-group formSep">
                            <label class="control-label">
                                Username</label>
                            <div class="controls text_line">
                                <strong>@Model.Username</strong> <a href="/Admin/UserAdmin/ResetPassword/@Model.Id" class="btn resetPasswordWindow">Reset Password</a>
                            </div>
                        </div>
                        <div class="control-group formSep">
                            <label for="fileinput" class="control-label">
                                User avatar</label>
                            <div class="controls">
                                <div data-fileupload="image" class="fileupload fileupload-new">
                                    <div style="width: 80px; height: 80px;" class="fileupload-new thumbnail">
                                        <img src="http://www.placehold.it/108x108/EFEFEF/AAAAAA " alt="" id="userAvatar">
                                    </div>
                                    <a href="/Admin/UserAdmin/ImageUpload/@Model.Id" class="btn avatarUpload">Upload New
                                        Image</a>
                                </div>
                            </div>
                        </div>
                        <div class="control-group formSep">
                            <label for="FirstName" class="control-label">
                                First Name</label>
                            <div class="controls">
                                @Html.TextBoxFor(u => u.FirstName, new { @class = "input-xlarge" })
                            </div>
                        </div>
                        <div class="control-group formSep">
                            <label for="FirstName" class="control-label">
                                Last Name</label>
                            <div class="controls">
                                @Html.TextBoxFor(u => u.LastName, new { @class = "input-xlarge" })
                            </div>
                        </div>
                        <div class="control-group formSep">
                            <label for="u_email" class="control-label">
                                Email Address</label>
                            <div class="controls">
                                @Html.TextBoxFor(u => u.EmailAddress, new { @class = "input-xlarge" })
                            </div>
                        </div>
                        <div class="control-group formSep">
                            <label for="u_email" class="control-label">
                                Telephone Number</label>
                            <div class="controls">
                                @Html.TextBoxFor(u => u.TelephoneNumber, new { @class = "input-xlarge" })
                            </div>
                        </div>
                        <div class="control-group formSep">
                            <label for="u_email" class="control-label">
                                Mobile Number</label>
                            <div class="controls">
                                @Html.TextBoxFor(u => u.MobileTelephoneNumber, new { @class = "input-xlarge" })
                            </div>
                        </div>
                        <div class="control-group formSep">
                            <label for="u_email" class="control-label">
                                Mobile Number</label>
                            <div class="controls">
                                @Html.TextBoxFor(u => u.MobileTelephoneNumber, new { @class = "input-xlarge" })
                            </div>
                        </div>
                        <div class="control-group formSep">
                            <label for="u_email" class="control-label">
                                Is Instructor</label>
                            <div class="controls">
                                @Html.CheckBox("cbIsInstructor", isInstructor)
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <button class="btn btn-gebo" type="submit">
                                    Save changes</button>

                            </div>
                        </div>
                    </fieldset>

                }
            </div>
        </div>
    </div>
</div>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/plugins/jcrop/jquery.Jcrop.min.js")" type="text/javascript"></script>
<script src="@Url.ContentArea("~/Scripts/plugins/fineUploader/util.js")"></script>
<script src="@Url.ContentArea("~/Scripts/plugins/fineUploader/button.js")"></script>
<script src="@Url.ContentArea("~/Scripts/plugins/fineUploader/handler.base.js")"></script>
<script src="@Url.ContentArea("~/Scripts/plugins/fineUploader/handler.form.js")"></script>
<script src="@Url.ContentArea("~/Scripts/plugins/fineUploader/handler.xhr.js")"></script>
<script src="@Url.ContentArea("~/Scripts/plugins/fineUploader/uploader.basic.js")"></script>
<script src="@Url.ContentArea("~/Scripts/plugins/fineUploader/dnd.js")"></script>
<script src="@Url.ContentArea("~/Scripts/plugins/fineUploader/uploader.js")"></script>
<script src="@Url.ContentArea("~/Scripts/plugins/fineUploader/jquery-plugin.js")"></script>



<script>
    $(function () {

        loadUserAvatar();
        $('.avatarUpload').colorbox({
            initialHeight: '520',
            initialWidth: '650',
            iframe: false,
            opacity: 0.45,
            onClosed: function () {
                loadUserAvatar();
            }
        });


        $('.resetPasswordWindow').colorbox({
            initialHeight: '0',
            initialWidth: '0',
            iframe: false,
            opacity: 0.45,
            onClosed: function () {

            },
            onComplete: function () {

                $.validator.addMethod("passwordsMustMatch", function (value, element) {
                    return $('#validatePassword').val() == $('#password').val();
                }, "The passwords do not match");

                $('.resetPasswordForm').validate({
                    onkeyup: false,
                    errorClass: 'error',
                    validClass: 'valid',
                    errorPlacement: function (error, element) {
                        error.appendTo(element.closest("div.controls"));
                    },
                    highlight: function (element) {
                        $(element).closest("div.control-group").addClass("error f_error");
                        var thisStep = $(element).closest('form').prev('ul').find('.current-step');
                        thisStep.addClass('error-image');
                    },
                    unhighlight: function (element) {
                        $(element).closest("div.control-group").removeClass("error f_error");
                        if (!$(element).closest('form').find('div.error').length) {
                            var thisStep = $(element).closest('form').prev('ul').find('.current-step');
                            thisStep.removeClass('error-image');
                        };
                    },
                    rules: {
                        password: { required: true, minlength: 6, passwordsMustMatch: true },
                        validatePassword: { required: true, minlength: 6, passwordsMustMatch: true }
                    },
                    invalidHandler: function (form, validator) {
                        $.sticky("There are some errors. Please corect them and submit again.", { autoclose: 5000, position: "top-right", type: "st-error" });
                    }
                });
            }
        });

    });


    function loadUserAvatar(parameters) {
        $.ajax({
            url: '/Admin/Avatar/AvatarLoad/@Model.Id',
            type: 'POST',
            cache: false,
            timeout: 100000,
            error: function (xhr, status, error) {
                alert(error + " " + status);
            },
            success: function (data) {
                $("#userAvatar").attr("src", data.Image.ThumbNailRelativePath);
            }

        });
    }

    function OnSuccess(parameters) {
        $.sticky("The user profile has been updated successfully.", { autoclose: 5000, position: "top-right", type: "st-error" });
    }
    function OnFailure(parameters) {
        $.sticky("There was an error saving the profile. </br>" + parameters.message, { autoclose: 5000, position: "top-right", type: "st-error" });
    }
</script>

UPDATE:

After a little research at what as happening, I was getting this error after the post: An item with the same key has already been added

Answer 1

Well, i figured out the issue. Kind of silly really. The issue was I had an interface on my Model. There were 2 version of the property Username. One was named UserName (with a capital N) and the other was Username (lowercase n). This blog post helped.

Answer 2

You can't bind directly to Collections - see ASP.NET Wire Format for Model Binding to Arrays, Lists, Collections, Dictionaries for examples of how to accomlish what you are trying to do.