jQuery/JSON Error "SyntaxError: JSON.parse: unexpected character"

Question

I am working on MVC4 and trying to pass values form view to controller using JQuery and JSON. The query is extracting values of checkboxes inside a grid. Following is the code:

<script type="text/javascript">
function DeleteCustomer() {
    var temp = "";
    var id = "";

    if (confirm("Are you sure to delete records?")) {
        $('#myGrid table tr').each(function () {
            if ($(this).find("input[id*='assignChkBx']").length > 0) {
                if ($(this).find("input[id*='assignChkBx']")[0].checked == true) {
                    temp = $(this).find("input[id*='assignChkBx']").val();
                    if (temp != "" || temp != null) {
                        id = id + " " + temp;
                        temp = "";
                    }
                } // End of Loop
            }
        }); //End of each Loop
        $.ajax({
            url: "Customer/DeleteCustomeByID",
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            data: "{'CustomerID':'" + id + "'}",
            success: function (data) {
                //alert('Records deleted');
                $('#lblMessage').html('Records Deleted');
            },
            error: function (xhr, textStatus, err) {
                alert('Error: ' + err);
                //$('#lblMessage').html(err);
            }
        });
    }
}

My html code is following:

<input type="button" id="btnDelete" value="Delete" title="Delete" onclick="DeleteCustomer()" style="color: Gray" />

@{
    WebGrid grid = new WebGrid(Model, rowsPerPage: 15, ajaxUpdateContainerId: "myGrid");
}
@grid.GetHtml(
    fillEmptyRows: false,
    alternatingRowStyle: "alternate-row",
    headerStyle: "grid-header",
    footerStyle: "grid-footer",
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",
    columns: new[] {
        grid.Column("", format: @<text><input class="check-box" type="checkbox" id="assignChkBx" value="@item.CustomerID" /></text>),
        grid.Column("CustomerID", "CustomerID", canSort: true),
        grid.Column("CompanyName", "Company Name", canSort: true),
        grid.Column("ContactName", "Contact Name", canSort: true),
        grid.Column("Address", "Address", canSort: false),
        grid.Column("City", "City", canSort: true),
        grid.Column("", 
                    header: "Actions",
                    format: @<text>
                    @Html.ActionLink("Edit",   "Edit",   new { id=item.CustomerID} )
                    @Html.ActionLink("Delete", "Delete", new { id=item.CustomerID} )
                    </text>
        )
})

When I click on delete button the jquery mentioned above will take the selected values to the controller. The controller code is written below:

[HttpPost]
    public ActionResult DeleteCustomeByID(string CustomerID)
    {
        Customer customer = new Customer();
        try
        {
            if (ModelState.IsValid)
            {
                string[] values = CustomerID.Split(' ');

                for (int i = 1; i <= values.Length - 1; i++)
                {
                    if (values[i].ToString().Trim() != "" || values[i].ToString() != null)
                    {
                        customer = db.Customers.Find(values[i].ToString());
                        db.Customers.Remove(customer);
                        db.SaveChanges();
                    }
                }
                return RedirectToAction("Index");
            }
            return View(customer); // Error in Model, if any
        }
        catch (DbEntityValidationException dbEx)
        {
            foreach (var validationErrors in dbEx.EntityValidationErrors)
            {
                foreach (var validationError in validationErrors.ValidationErrors)
                {
                    Trace.TraceInformation("Class: {0}, Property: {1}, Error: {2}",
                        validationErrors.Entry.Entity.GetType().FullName,
                        validationError.PropertyName,
                        validationError.ErrorMessage);
                }
            }

            throw new Exception();  // You can also choose to handle the exception here...
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
    }

When I click on the delete button, the values go to controller and delete records. But the problem is, after deleting records when it back to controller, I am getting the following error: "SyntaxError: JSON.parse: unexpected character" for FireFox, "json parse error unrecognized token '< '" for Safari and "Error: object error." I search various sites and try various solutions. But nothing is working. I am using Northwind db.

Thanks in advance.

Partha

Answer 1

According to the docs, the following property:

dataType: "json"

... tells jQuery the type of data you're expecting back from the server. Then your action is returning HTML. So when jQuery tries parsing the JSON it's expecting, it runs into HTML, and gives you this error.

Either change the action to return a JsonResult, or set your dataType to "html".