Issue returning 'PartialView' inside JSON response

Question

I have a partial that I am reloading after an Ajax call. The following code works:

public PartialViewResult AddPreferredPosition(string playerID, int positionID)
    {
            playerService.AddPlayerPreferredPosition(Guid.Parse(playerID), positionID);

            PreferredPositionsModel model = new PreferredPositionsModel();
            model.PreferredPositions = playerService.GetPlayerPreferredPositions(Guid.Parse(playerID));
            model.Positions = playerService.GetPositions();
        return PartialView("~/Areas/Admin/Views/Player/Partials/PreferredPositions.cshtml", model);
    }

along with:

var params = {};
    params.playerID = $('#PlayerID').val();
    params.positionID = $("select[name='ddlPositionID'] option:selected").val();
    $.ajax({
        type: 'POST',
        url: '/Admin/Player/AddPreferredPosition',
        data: params,
        success: function (data) {
                $('#PreferredPositions').html(data);
        }
    });

I want to alter it slightly to manage my error handling further to something like this:

public ActionResult AddPreferredPosition(string playerID, int positionID)
    {
        try
        {
            playerService.AddPlayerPreferredPosition(Guid.Parse(playerID), positionID);

            PreferredPositionsModel model = new PreferredPositionsModel();
            model.PreferredPositions = playerService.GetPlayerPreferredPositions(Guid.Parse(playerID));
            model.Positions = playerService.GetPositions();

            return Json(new
            {
                Success = true,
                HTML = PartialView("~/Areas/Admin/Views/Player/Partials/PreferredPositions.cshtml", model)
            }, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            return Json(new
            {
                Success = false,
                ErrorMessage = ex.Message,
                InnerException = (ex.InnerException != null ? ex.InnerException.Message : ""),
                ex.StackTrace
            });
        }
    }

with:

$.ajax({
        type: 'POST',
        url: '/Admin/Player/AddPreferredPosition',
        data: params,
        success: function (data) {
            if (data.Success) {
                $('#PreferredPositions').html(data.HTML);
            } else {
                alert(data.ErrorMessage);
                console.log(data.StackTrace);
            }
        }
    });

However, when I do this then data.HTML is not the compiled partial view's HTML, as it is in the working example.

What am I doing wrong?

score 2 · Answer 1 · answered Jan 10 '18 at 11:56

Correct your Code in this Section.

$.ajax({
    type: 'POST',
    url: '/Admin/Player/AddPreferredPosition',
    data: params,
    success: function (data) {
        if (data.Success) {
            $('#PreferredPositions').html(data.HTML);
        } else {
            alert(data.ErrorMessage);
            console.log(data.StackTrace);
        }
    }
});

As you are returning JSON, you'll have to parse that Data from Json. Else you won't be able to access that data directly by

data.HTML

Hope this helps.

Peter B · Answer 2 · 2018-01-10T11:55:11.850

0

In the original code, the PartialView is returned which then gets rendered by Razor to HTML. In the modified version you return the same thing but inside an object, and therefore it stays unrendered.

In fact rendering does take place, but it is JSON rendering, which does not 'automagically' lead to HTML rendering of the PartialView object that it contains. See this question or this question for possible solutions to achieve that.

edited Jan 10 '18 at 11:55

answered Jan 10 '18 at 11:43

Peter B

22,460
5
32
69

Ok, I get what you're saying. Is there a way around that so that I can have the view rendered by Razor, but still have some error handling in my ajax call? – Mark Seymour Jan 10 '18 at 11:52
I added some links into the answer, I think they should help you achieve that. – Peter B Jan 10 '18 at 11:54

Issue returning 'PartialView' inside JSON response

2 Answers2