jQuery ajax将局部视图加载到div标签MVC

Question

I've been searching around with no luck on how to make a jquery call to load a partial view in a div tag on my Index view. Some how I am not getting the partial view to update when I click on a link on my tree. The partial view loads when I first run it b/c I call <div id="divid"> @Html.Partial("_InnerView")</div> . After that nothing happens when I click on the link. Or maybe I am not getting the full picture here. Some mentioned to use $('#divid').load = data; or $('#divid').innerHTML= data; but nothing works for me. This is what I have.

Controller:

 public ActionResult Test(string parentEls)
    {
        if (Request.IsAjaxRequest())
        {
            Employee employee = new Employee();
            employee.Name = parentEls + "1";
            return PartialView("_InnerView", employee);
        }
        return View("_InnerView");            
    }

Index view:

<div id="divid">
@Html.Partial("_InnerView")</div>


$('#tree a').click(function () {
    var parentEls = $(this).parents('ul').map(function () {
        return $(this).find('a').first().text();
    }).get().join(", ");

    $.ajax({
        type: 'POST',
        url: '@Url.Content("~/Home/Test")',
        data: {
            parentEls: parentEls                
        },
        success: function(data) {
            $('#divid').innerHTML = data;
        }
    });
});

_InnerView.cshtml:

  @model TreeDemo.Models.Employee

EmpName:@Model.Name

UPDATE: I got this to work with this

  $.ajax({ url: '/Home/Test/', contentType: 'application/html; charset=utf-8', type: 'GET', dataType: 'html', data: { parentEls: parentEls } }) 

Answer 1

You have to use

$('#divid').html(data);

instead of

$('#divid').innerHTML = data;

Answer 2

Load Partial View in a div MVC 4

Recently I want load Partal View in Div , after doing lots of R&D and It's work for me

 $.ajax({
    type: 'POST',
    url: '@Url.Content("~/ControllerName/ActionName")',
    data: {
        title: title
    },
    success: function(result) {
        $('#divid').innerHTML = result;
    }
});

    And In Partal View Action Controller Code

    public PartialViewResult ShowCategoryForm(string title)
    {
        Model model = new Model();
        model.Title = title;
        return PartialView("~/Views/ControllerName/PartalView.cshtml", model);
    }

Answer 3

I think it can be useful if you check the request/response objects of your call, so you can see what is really happening after you make the call... As per your code, I can notice that you're posting using

 $.ajax({
        type: 'POST',
        url: '@Url.Content("~/Home/Test")',
        data: {
            parentEls: parentEls                
        },
        success: function(data) {
            $('#divid').innerHTML = data;
        }
    });

but your action is marked for 'getting'... you'd need to have something like this

[HttpPost]
public ActionResult Test(string parentEls)

so MVC can understand that the action should be called when HttpPost verb is used