ASP.NET MVC 3.0 Update element content/html of the form using Partial action and jQuery ajax

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 th开发者_如何学Ce 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?

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.

You have to render the partial view on the server and then send the HTML result via Json like this:

public static class Renders
{
    public static string RenderPartialView(this Controller controller, string viewName, object model)
    {
        if (string.IsNullOrEmpty(viewName))
            viewName = controller.ControllerContext.RouteData.GetRequiredString("action");

        controller.ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
            var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
            viewResult.View.Render(viewContext, sw);

            return sw.GetStringBuilder().ToString();
        }
    }
}

In the controller:

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

    //doing changes in the model collections

    return Json(new
    {
        Html = this.RenderPartialView("A1Partial", model)
    }, JsonRequestBehavior.AllowGet);
}

Then in the JQuery code:

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