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);