CODEWITHSUNDEEP
jqueryjsonajaxpartial-views
Mark Seymour
Mark Seymour

Reputation: 141

Issue returning 'PartialView' inside JSON response

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?

Upvotes: 2

Views: 179

Answers (2)

Divya
Divya

Reputation: 1213

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.

Upvotes: 2

Peter B
Peter B

Reputation: 24280

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.

Upvotes: 0

Related Questions