Render partial view with JQuery / AJAX

Question

I try to render partial view and place between div elements. I read few articles e.g. Rendering a partial view with jquery but still doesn't work.

Where I made mistake?

A.) Place where I want to render my partial view:

<div id="target">

        </div>

If I put between and @Html.Partial() I received error!

B.) How I call controler action:

 $("#target").load('@Url.Action("GetMessageTypeView", "EmailMessages")');

I also tried with:

$.ajax({
        url: '@Url.Action("GetMessageTypeView", "EmailMessages")',
        type: "POST",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        $('#target').html(data);
    }
});

In both cases I called controller action, but no result.

C.) My controller action:

public ActionResult GetMessageTypeView()
    {
        return PartialView("Partials/MessageTypes");
    }

Where I made mistake? Is it possible to render partial view and put somewhere in the page without call controler? Thanks

Doesn't help. What is wrong with this: <div id="target"></div> ? I always use like this and that format works. — kat1330
– kat1330, Commented Aug 7, 2014 at 22:18
Why are you doing this with javascript and not just using @Html.Partial()? (the action method does not seems to be modifying the partial view in any way) — user3559349
– user3559349, Commented Aug 7, 2014 at 23:21
I have to insert partial view when I click on button. Do you have some idea to acomplish this? — kat1330
– kat1330, Commented Aug 7, 2014 at 23:31
That doesn't make sense because your not passing any parameters to GetMessageTypeView() so the view you return will always be the same (herefore why not load it initially). However there appears nothing wrong with the .load() method (see Phaeze answer for issues with the .ajax() method. I suspect its the view or the name of the view. Put a breakpoint in GetMessageTypeView() and check that it gets hit. PS. to reply to a comment, precede with "@Stephen.." — user3559349
– user3559349, Commented Aug 7, 2014 at 23:47

user1618236 · Accepted Answer · 2014-08-07 22:24:02Z

3

Without seeing the error you mentioned I do see one issue with your code, the content type on your ajax call is incorrect it should be:

$.ajax({
        url: '@Url.Action("GetMessageTypeView", "EmailMessages")',
        type: "POST",
    contentType: "text/html; charset=utf-8",
    success: function (data) {
        $('#target').html(data);
    }
});

jquery is expecting json to be returned from the server but when it gets the html of the partial view it doesn't know what to do with it. I've had this problem recently and I didn't even get an error, it just didn't do anything.

answered Aug 7, 2014 at 22:24

user1618236

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

Collectives™ on Stack Overflow

Render partial view with JQuery / AJAX

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related