Databases
StackOverflow2013
Postsdbo
POMVC 3 issue when model binding checkbox through AJAX rather than postback
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMVC 3 issue when model binding checkbox through AJAX rather than postback
    text
    copied!<p>I have an issue with model binding a checkbox from a form to an action on the server with a custom object containing a boolean.</p> <p>Doing a google there seems to be a lot of problems with this, and no good solution. I have tried multiple things, and the problem seems to only happen when it is sent through an ajax call rather than a normal postback.</p> <p>I have the following in my project (cut down for brevity):</p> <p><strong>View</strong></p> <pre><code>@Html.LabelFor(model =&gt; model.TillAccess) @Html.CheckBoxFor(m =&gt; m.TillAccess) </code></pre> <p><strong>Model</strong></p> <pre><code>public class CreateUserModel { public Boolean TillAccess { get; set; } } </code></pre> <p><strong>Controller Action</strong></p> <pre><code>[HttpPost] public virtual ActionResult CreateUserWizard(CreateUserModel model) { ... } </code></pre> <p>I have added 2 buttons to the form, one sends as a postback and works. It sends the following with a postback if I check it on fiddler2:</p> <pre><code>TillAccess=true&amp;TillAccess=false </code></pre> <p>It sends the following if I send it with the ajax button, and doesnt work:</p> <pre><code>{"TillAccess":["true","false"]} </code></pre> <p>Is there an issue with the way MVC model binds JSON that stops this working??</p> <p>I can't get this working through AJAX (which I will be using heavily), every other field binds fine, just not the checkbox, and the fact this works perfect as a normal postback suggests its an issue with the JSON serialiser or model binder for MVC?</p> <p>UPDATE</p> <p>The ajax call is as follows:</p> <pre><code>function CreateUser() { var FormData = JSON.stringify($('#CreateUserWizardForm').serializeObject()); $.ajax({ url: '@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)', data: FormData, contentType: "application/json", dataType: "json", type: 'POST', cache: 'false', success: function (response) { alert('successfully created user!'); }, error: function (xhr) { alert('There was an error creating a user'); } }); } </code></pre> <p>Full ajax post is as follows just fyi:</p> <pre><code>{"BusinessUnitId":"cd56b710-0171-11e1-be50-0800200c9a66","Person.Salutation":"","Person.FirstName":"","Person.LastName":"","‌​TillAccess":["true","false"],"OfficeAccess":"false","TillLoginId":"","OfficeEmail‌​Address":"","OfficePassword":""} </code></pre> <p>UPDATE</p> <p>The serializeObject method was downloaded from the internet (as I was having json issues with the post) and is as follows:</p> <pre><code>$.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; </code></pre> <p>UPDATE</p> <p>The reason I used this serializeObject method was due to an error I received if I used the inbuilt call of:</p> <pre><code>$('#CreateUserWizardForm').serialize() </code></pre> <p>It created a post of:</p> <pre><code>BusinessUnitId=cd56b710-0171-11e1-be50-0800200c9a66&amp;Person.Salutation=&amp;Person.FirstName=&amp;Person.LastName=&amp;TillAccess=true&amp;TillAccess=false&amp;OfficeAccess=false&amp;TillLoginId=&amp;OfficeEmailAddress=&amp;OfficePassword= </code></pre> <p>Which gave me an error as follows:</p> <pre><code>System.ArgumentException: Invalid JSON primitive: BusinessUnitId. </code></pre> <p><strong>UPDATE - ANSWER (I tried to add my answer at the bottom, but it won't let me)</strong></p> <p><strong>I found the solution. It was my AJAX call that was wrong. I changed it to the following and it is working.</strong></p> <pre><code>$.ajax({ url: '@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)', data: $('#CreateUserWizardForm').serialize(), type: 'POST', cache: 'false', success: function (response) { alert('successfully created user!'); }, error: function (xhr) { alert('There was an error creating a user'); } }); </code></pre> <p>The old AJAX call:</p> <pre><code>var FormData = JSON.stringify($('#CreateUserWizardForm').serializeObject()); $.ajax({ url: '@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)', data: FormData, contentType: "application/json", dataType: "json", type: 'POST', cache: 'false', success: function (response) { alert('successfully created user!'); }, error: function (xhr) { alert('There was an error creating a user'); } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload