views:

662

answers:

5

I have a div on an ASP.NET MVC page that I would like to populate dynamically (at user request) using jQuery. I currently have jQuery placing a JSON call to my controller, which returns a JSON object, and then I use Javascript to build the HTML manually, which is then placed in the div.

Hang on a minute. Wouldn't it be much easier to get the controller to produce the HTML on its own (using a custom control (.ascx file)), and then just return the string to be placed in the div?

Easier, schmeasier!

My current attempt involves the following javascript:

$('#MyDiv').load("/MyController/GetList");

calling the following controller method:

public PartialViewResult GetList()
{
    ... create model ...
    var result = PartialView("CategoryList", model);
    return result;
}

Problem is, I get absolutely no response from the controller. It is called correctly (as proven by a breakpoint), but Firebug doesn't even register a call to the controller in Net view (although the call does show up the Firebug Console window, with a blank response).

Further, a Debug.Print command within the .ascx file produces an output, so the jQuery call and the PartialView method definitely fire.

What is PartialView (and PartialViewResult) used for, and what should I be doing instead of this?

Thanks in advance.

Oh, and it's using the Release Candidate... if that makes a difference.

+1  A: 

It works here. Are you sure the jquery load() is called?

Canton
Yeah. As mentioned, I have used a breakpoint in the controller method and it definitely fires. I'm glad it works for someone - it means I must be on the right track.
Darren Oster
A: 

I'd hate to ask but are you including the jquery script somewhere? I've been asked all to many times by others why jQuery isn't working with their MVC project. Solution being adding a tag to their master page.

Chad Moran
Yep, it's there.
Darren Oster
+2  A: 

In one of the most bizarre fixes I've found yet, it would seem that (in my case), adding a

<html><head><title></title></head><body>

before the user control code, and a

</body></html>

after the user control code, gets around the problem. Without these, the control returns nothing.

Now, it is perfectly possible that this is due to some strange issue caused by the site's evolving from Preview 3 -> Preview 4 -> Preview 5 -> Beta -> RC1, so I wouldn't be surprised if I am the ONLY PERSON IN THE WORLD getting this issue, but there you have it.

If anyone does find a better answer, please add it here...

Darren Oster
A: 

Hey Darren, can you try using Fiddler2 and see what it shows as the response? I have a feeling that if partial view is being executed, as you said, this might not be an issue with MVC. Here's something to try to reduce the problem down to its core.

When you make a direct request to /MyController/GetList, does it return the correct HTML?

Add a "foo.html" file to your website containinng the HTML output you expect from the partial. Change your jQuery code to request that foo.html instead:

$('#MyDiv').load("/foo.html");

Does that work? One thing you can do with the load method in jQuery is provide a CSS selector. So as a workaround, you could wrap the partial with the HTML head, body tags as you did in your other answer, but then add a CSS selector to the load method to grab only the portion you want like so:

$('#MyDiv').load("/MyController/GetList #stuff-i-want");
Haacked
Without the <html> tag cruft in there, Fiddler2 indicated a response length of 0 bytes (yet, as mentioned, the view does get evaluated, verified by a Debug.Print statement), but gave the correct output with the tags. The CSS selector isn't a bad idea, but not required (jQuery seems to strip it off).
Darren Oster
A: 

It just works to me. I created a sample

The View

<div id="sam"></div>

<% var url = Url.Action("GetList"); %>
<script type="text/javascript">
    $(document).ready(function() {
        $('#sam').load('<%=url%>');
    });
</script>

The Partial View - GetList.ascx

<%@ Control Language="C#" Inherits="ViewUserControl<IEnumerable<string>>" %>
<ul>
<% foreach (var s in Model) { %>
    <li><%=Html.Encode(s)%></li>
<% } %>
</ul>

The Controller

[AcceptVerbs(HttpVerbs.Get)]
public PartialViewResult GetList()
{
    return PartialView(new[] { "Hello", "Foo", "Bar" });
}

Hope this helps.

Canton