Question

I have Partial A1 inside Partial A.

I need to render my Partial view A1 on button A1B click.

For that i have an partial view action with parameter type of model of Partial view A (because there is some dependencies on A)

public PartialViewResult A1Partial(A model)
{
    //Getting my deserialized model here successfully

    //doing changes in the model collections

    return PartialView("A1Partial", model);
}

I have onclick function to call my A1Partial partial action:

$(document).ready(function () {
    $("#A1B").click(function () {

        dataString = $("#myForm").serialize();

        $.ajax({
            type: "POST",
            url: "/Controller/A1Partial",
            data: dataString,
            dataType: "json",
            success: function (data) { 
                            //not working here

                            $("#myDiv").html("");
                $("#myDiv").html(data); 
            }

        });

        return false;
    });
});

My call from jQuery ajax working correctly and dataString getting deserialized in controller without any issues.

But i am didn’t get anything in $("#myDiv").append(data); looks like the html didn’t came through.

What changes i need to made to make it work?

Answer 1

You indicate that you expect a JSON response type:

dataType: "json"

And yet you try to use it as if it was HTML:

$('#myDiv').append(data);

So remove this dataType: 'json' from the AJAX request and in the success callback the data variable will represent the HTML returned by the A1Partial.