Update Partial View with Ajax

Question

I have a partial view with the following details,

_PartialTEST.cshtml

@model FreeLance.Web.Models.PArtialTESTModel

@Html.RadioButtonFor(m => m.D1, "true", new { Name = "test1", @id = "g1", @checked = "true" }) @Html.LabelFor(m => m.MSGD1, @Model.V1)
@Html.RadioButtonFor(m => m.D2, "false", new { Name = "test1", @id = "g2" }) @Html.LabelFor(m => m.MSGD2, @Model.V1) 
@Html.RadioButtonFor(m => m.D3, "false", new { Name = "test1", @id = "g3" }) @Html.LabelFor(m => m.MSGD3, @Model.V1) 

Which is Used in another View,

MainTEST.cshtml

<div id="partialDIV">
       @{
           @Html.Partial("_PartialTEST", Model)
       }                           
</div>

Now During an Event I am trying to get the new values using AJAX

$.ajax({
                type: "GET",
                url: href,               
                traditional: true,
                async: false,
                cache: false,
                contentType: 'application/json',
                data: { DID: DID },
                success: function (data) {
                    debugger;
                    $('#partialDIV').html(data);
                },
                error: function (arg, data, value) {

                }
            });

Now though "data" has all the values, I am unable to get the partial view rendered. Any help, What I am missing here?

Answer 1

On the Server side Use this Code to Return your Partial View::

    public PartialViewResult MainTEST()
    {
        var model = new FreeLance.Web.Models.PArtialTESTModel();
        return PartialView("_PartialTEST.cshtml",model);
    }

and in you AJAX on Client Side do some changes on its success::

$.ajax({
            type: "GET",
            url: href,               
            traditional: true,
            async: false,
            cache: false,
            contentType: 'application/json',
            data: { DID: DID },
            success: function (data) {
                debugger;

                $('#partialDIV').empty();
                $('#partialDIV').html(data);
            },
            error: function (arg, data, value) {

            }
        });

Answer 2

Change your AJAX query by adding datatype as 'html'

 $.ajax({
        type: "GET",
        url: href,               
        traditional: true,
        async: false,
        cache: false,
        contentType: 'application/json',
        datatype : "html",
        data: { DID: DID },
        success: function (data) {
            debugger;

            $('#partialDIV').empty();
            $('#partialDIV').html(data);
        },
        error: function (arg, data, value) {

        }
    });

Answer 3

Please take a look in these post:

http://mazharkaunain.blogspot.in/2011/05/aspnet-mvc-razor-render-partial-view.html

http://mazharkaunain.blogspot.in/2011/04/aspnet-mvc-render-partial-view-using.html

Answer 4

You just missed a single parameter datatype , i.e. You have to specify the datatype as the type which the controller function returns, Since you are expecting partialview, you have to specify datatype as html.

    .ajax({
            type: "GET",
            url: href, 
            async: false,
            cache: false,
            contentType: 'application/json',
            datatype:'html',
            data: { DID: DID },
            success: function (data) {
                debugger;
                $('#partialDIV').html(data);
            },
            error: function (arg, data, value) {

            }
        });

This can solve your issue