Json request parseerror - unexpected token < MVC3

Question

So Im having an issue with my Json Call to the Controller. Im getting an error "parseerror - Unexpected token <"

my code is as follows in my view:

$("select[name='SelectedProjectStatus']").change(function () {

        var DashboardModel = {
            SelectedProjectStatus: $("select[name='SelectedProjectStatus']").val(),
            Page: 1
        };

        $.ajax({
            url: '@Url.Action("Dashboard", "Dashboard")',
            type: 'POST',
            data: JSON.stringify(DashboardModel),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $('#DashboardResult').replaceWith(data);
            },
            error: function (request, status, err) {
                alert(status);
                alert(err);
            }
        });

    });

and in my controller:

    [HttpPost]
    public ActionResult Dashboard(DashboardModel dashboard)
    {
        var MyProjects = EFProject.Project.Where(x => x.UserID == 1);
        if (dashboard.SelectedProjectStatus != 0)
            MyProjects = MyProjects
                        .Where(x => x.Status == dashboard.SelectedProjectStatus)
                        .OrderByDescending(p => p.AuditingCD)
                        .Skip((dashboard.Page - 1) * PageSize)
                        .Take(PageSize);
        else
            MyProjects = MyProjects
                      .OrderByDescending(p => p.AuditingCD)
                      .Skip((dashboard.Page - 1) * PageSize)
                      .Take(PageSize);

        DashboardModel model = new DashboardModel
        {
            Projects = MyProjects,
            PagingInfo = new PagingInfo
               {
                   CurrentPage = dashboard.Page,
                   ItemsPerPage = PageSize,
                   TotalItems = EFProject.Project.Where(x => x.UserID == 1).Count()
               }
        };
        if (Request.IsAjaxRequest())
        {
            return PartialView("DashboardResult", model);
        }
        else
        {
            return View(model);
        }
    }

The partial view im trying to render only has the following:

@using BidThatProject.Web.Models.NonReusableModels.ProjectManagment
@model DashboardModel
<div id="DashboardResult">

</div>

and the parent view obviously has the div with the same id's. It should work at least by showing in me an empty space, but it seems that its having a problem parsing the data back to the view. It could be that its not reading it as a application/json type? I really have no idea.

Answer 1

use Json Result and return Json(model);

public JsonResults MyTest(){
    var model = FROM b in Table WHERE b.id == 1 select b;
    return Json(model);
}

$.ajax({
        url: '@Url.Action("Dashboard", "Dashboard")',
        type: 'POST',
        data: {page: 1, selected: $("select[name='SelectedProjectStatus']").val() },
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) { // 
            // process the json object into html page
        },
        error: function (request, status, err) {
            alert(status);
            alert(err);
        }
    });

here is an edit, as the blog post is getting a partial view via ajax, not json data via ajax:

public ActionResults MyTest(SearchModel  results){
    var model = FROM b in Table WHERE b.id == 1 select b;
    return PartialView("ViewName",model);
}
// you create a partial view that takes in your model
$.ajax({
    url: '/ajax/MySearch',
    type: 'POST',
    data: $("form").serialize(),        
    success: function (data) { // 
        $("#searchresults").html(data);
    },
    error: function (request, status, err) {
        alert(status);
        alert(err);
    }
});