MVC4 using Ajax.BeginForm not sending ViewModel to controller? - asp.net-mvc

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> Reset Password
</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

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.

Answer 2

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.