jquery ajax load partial view to div tag 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 } })

Otto Kanellis · Accepted Answer · 2014-03-17 07:42:10Z

4

You have to use

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

instead of

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

answered Mar 17, 2014 at 7:42

Otto Kanellis

3,7281 gold badge26 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sanjay Dwivedi · Accepted Answer · 2015-08-26 08:46:52Z

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

answered Aug 26, 2015 at 8:46

Sanjay Dwivedi

7497 silver badges11 bronze badges

Comments

pollirrata · Accepted Answer · 2013-12-02 21:05:14Z

0

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

answered Dec 2, 2013 at 21:05

pollirrata

5,2942 gold badges35 silver badges51 bronze badges

7 Comments

AnhLun Over a year ago

In debug mode. When I click the link it does hit my action Test method. It just doesn't render the _InnverView in the div tag. Newbie question. How do I check the request/response objects of the call?

pollirrata Over a year ago

If you use Chrome, on Nework tab of developer tools you can see tab details. You can do the same in Firebug if you use Firefox... I think it is also posible to check it in IE, but not sure how

AnhLun Over a year ago

Ok. I did that and when I click on the link I see the Method=POST in Firefox>Network. When double clicked on it the POST it shows Status code: 200 OK. In the Respondse tab. I see the data that I clicked on: <div class="editor-label"> T:  Texas,  USA </div>

AnhLun Over a year ago

Any ideas? Maybe it's not refreshing when I click a link? I see the div tag in my partial view (_InnerView) populated with data that I clicked on in Firebug but it's not showing up.. This is what I see <div class="editor-label"> T:  Dallas,  USA </div>

pollirrata Over a year ago

try clearing the content of the div and then adding the results... I think I had a similar issue some time ago and that's how I solved it

|

Collectives™ on Stack Overflow

jquery ajax load partial view to div tag MVC

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related