Question

I have an Ajax.BeginForm() in a partial view that contains a CheckBox for a bool value. The model is as follows;

public class ViewBusinessAdd
{
    [Required(ErrorMessage="Name must be supplied")]
    [Display(Name = "Business Name")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Contact must be supplied")]
    [Display(Name = "Business Contact")]
    public string Contact { get; set; }

    [Display(Name = "Phone Number")]
    public string Number { get; set; }

    public string Postcode { get; set; }

    public Dictionary<string, string> States  { get; set; }

    public string AddressRegion { get; set; }

    public bool IsFacebookPost { get; set; }

    public List<RecommendationViewAttribute> Attributes { get; set; }
}

The CheckBox is rendered using the Html helpers;

<div class="control-group">
   <label class="control-label">
      @Html.LabelFor(m => m.IsFacebookPost, "Post recommendation")
      <img src="~/Content/images/f_logo.png" alt="Facebook" />
   </label>
   <div class="controls">
      @Html.CheckBoxFor(m => m.IsFacebookPost)
   </div>
</div>

This produces the following HTML when rendered;

<input data-val="true" data-val-required="The IsFacebookPost field is required." id="IsFacebookPost" name="IsFacebookPost" type="checkbox" value="true" /><input name="IsFacebookPost" type="hidden" value="false" />

When submitting the form with, it produces this error in Chrome;

Uncaught SyntaxError: Unexpected token u

If I remove the CheckBox the form submits without any error. If I convert this to a non-Ajax form, it also submits but that’s not going to work with the page design unfortunately.

I’m absolutely stumped on this – I even changed this to a RadioButton and the same behavior exists. Does anyone have any ideas?

Edit: Forgot to add it’s a Javascript error.

Edit: The error is coming from jQuery library on the return below;

parseJSON: function( data ) {
// Attempt to parse using the native JSON parser first

  if ( window.JSON && window.JSON.parse ) {
      return window.JSON.parse( data );
  }

But this only happens if I use the Razor HTML helpers to generate the checkboxes.

Answer 1

Well it seems there was a bug introduced with jQuery 1.9.1. I’ve downgraded to 1.8.3 and the Razor helpers for the Checkboxes now work correctly. Steps to downgrade if anyone is interested;

Uninstall-Package jQuery -force

Install-Package jQuery -version 1.8.3