Controller returns raw JSON object as view

Question

i'm using MVC architecture, i've a POST form as Bootstrap Modal that attach its form data after submit to an AJAX Call

$.ajax({
    type: "POST",
    url: action,
    enctype: "multipart/form-data",
    data: dataString,
    cache: false,
    contentType: contentType,
    processData: processData,
    beforeSend: function () {
        block('#mymodal');
    },
    success: function (data, status, xhr) { console.log("success ajax"); onAjaxSuccess(xhr, status, '#mymodal') },
    error: function (xhr, status) { console.log("error ajax"); onAjaxFailed(xhr, status, error, '#error-div') },
    complete: function (xhr, status) { console.log("complete ajax"); onAjaxComplete(xhr, status, '#mymodal', '#alert', '#myModal') }
});

where action is the Controller Method where it passes the required data, contentType and processData are both false

this ajax call is working fine and sends the call to the controller correctly

public ActionResult MyCtroller(myViewModel model)
{
    //processing stuff

    JsonResultObject result = new JsonResultObject();

    try
    {
       //return secess
    }
    catch (Exception ex)
    {
       //return error
    }

    SearchCriteria<MyModel> viewModel = new SearchCriteria<MyModel>();
    viewModel.SortExpression = m => m.OrderByDescending(a => a.Date);
    SearchResult<MyModel> searchResult = MyModelService.Instance.Search(viewModel);

    result.PartialViewHtml = RenderPartialViewToString("PartialView.cshtml", searchResult);


    return Json(result));
}

after the processing is completed and it's time to return the page it print the result as pure JSON with the partial view in that JSON as object, instead of rendering the partialView and the success, complete, error in the Ajax call earlier doesn't get called

{
  "IsRedirect": false,
  "RedirectUrl": null,
  "Success": true,
  "AlertMessage": {
   "IsAutoHide": false,
   "Dissmisable": true,
   "ShowIcon": false,
   "Message": "success",
   "AlertCSS": "alert alert-success",
   "AlertType": 3,
   "AlertTypeMetronic": "success"
},
"PartialViewHtml":"-----partialView HTML code-----"
}

Answer 1

You should call Json directly with the data you intend to serialize. The Json call will return a JsonResult object so do not pass it an instance of JsonResult. If you do want to use JsonResult directly then return that without the additional call to Json.

Also use the overload of Json with the JsonRequestBehavior parameter.

[HttpPost]
public ActionResult MyCtroller(myViewModel model)
{
    var result = new ActualInstanceOrContainerToBeReturned;
    return Json(result, JsonRequestBehavior.AllowGet);
}

Also I am not sure why you would want to return the view inside the JsonResult so I will not comment except to say that might be bad design. In the interest of SOC keep the data and the view separate (this includes the generation of these items).

Answer 2

I think you need to change your controller

public ActionResult MyCtroller(myViewModel model)
{
    //processing stuff

    JsonResultObject result = new JsonResultObject();

    try
    {
       //return secess
    }
    catch (Exception ex)
    {
       //return error
    }

    SearchCriteria<MyModel> viewModel = new SearchCriteria<MyModel>();
    viewModel.SortExpression = m => m.OrderByDescending(a => a.Date);
    SearchResult<MyModel> searchResult = MyModelService.Instance.Search(viewModel);

    // result.PartialViewHtml = RenderPartialViewToString("PartialView.cshtml", searchResult);

    // If you want to render as html partial view

    return PartialView("PartialView.cshtml", searchResult);

    // return Json(result));
}

and Javascript code

   $.ajax({
            type: "POST",
            url: action,
            enctype: "multipart/form-data",
            data: dataString,
            cache: false,
            contentType: contentType,
            processData: processData,
            beforeSend: function () {
                block('#mymodal');
            },
            success: function (data, status, xhr) { 
                  console.log("success ajax"); 
                  onAjaxSuccess(xhr, status, '#mymodal')
                  $("#YOUR_DIV_ID").html(data);
            },
            error: function (xhr, status) { console.log("error ajax"); onAjaxFailed(xhr, status, error, '#error-div') },
            complete: function (xhr, status) { console.log("complete ajax"); onAjaxComplete(xhr, status, '#mymodal', '#alert', '#myModal') }
        });