Loading Partial View from JQuery not showing in MVC

I am having problem getting my partial view to render in ASP.Net MVC 1.0 when I load it with JQuery.

I have a controller like:

    public ActionResult Index() {
        return View(_invoiceService.FindAllInvoices());
    }

    public ActionResult InvoiceSearchResults() {
        return PartialView("InvoiceSearchResults",_invoiceService.FindAllInvoices());
    }

I have an Index View:

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.Script("/scripts/InvoiceSearch.js") %>

<h2>Search</h2>
<div class="SearchBar">
</div>

<div class="SearchResults"></div>

<p><%= Html.ActionLink("Create New", "Create") %></p>
</asp:Content>

I then have a PartialView:

<table>
    <tr>
        <th></th>
        <th>InvoiceId</th>
        <th>InvoiceNo</th>
        <th>SupplierId</th>
        <th>InvoiceDate</th>
        <th>TotalValue</th>
        <th>InputDate</th>
        <th>PaymentDueDate</th>
        <th>InvoiceStatusId</th>
        <th>AuthoriserId</th>
    </tr>

<% foreach (var item in Model) { %>
    <tr>
        <td>
            <%= Html.ActionLink("Edit", "Edit", new { id=item.InvoiceId }) %> |
            <%= Html.ActionLink("Details", "Details", new { id=item.InvoiceId })%>
        </td>
        <td><%= Html.Encode(item.InvoiceId) %></td>
        <td><%= Html.Encode(item.InvoiceNo) %></td>
        <td><%= Html.Encode(item.SupplierId) %></td>
        <td><%= Html.Encode(String.Format("{0:g}", item.InvoiceDate)) %></td>
        <td><%= Htm开发者_开发百科l.Encode(String.Format("{0:F}", item.TotalValue)) %></td>
        <td><%= Html.Encode(String.Format("{0:g}", item.InputDate)) %></td>
        <td><%= Html.Encode(String.Format("{0:g}", item.PaymentDueDate)) %></td>
        <td><%= Html.Encode(item.InvoiceStatusId) %></td>
        <td><%= Html.Encode(item.AuthoriserId) %></td>
    </tr>
<% } %>
</table>

I have some JQuery:

$(document).ready(function() {
    $("#InvoiceDropDown").change(function() {
        $("#SearchResults").load("/Invoice/InvoiceSearchResults/");      
    });
});

I've removed some of the code that I know is working to make the question easier to read.

When I click on the my DropDownList it calls the JQuery, goes to my controller and seems to run the partial class but it doesn't render anything.

I've tried evilDonald's answer and the same thing happens so maybe something stupid I've done somewhere?

Any help or general advice here much appreciated.

I have a solution for you:

Rather than use

$("#SearchResults").load("/Invoice/InvoiceSearchResults/");

Try using an $.ajax() to request the controller and then put the reply in the html. I have this working successfully and i'll try and paraphrase the answer below:

Controller method

Keep it the same

public ActionResult InvoiceSearchResults()
{                        
    return PartialView("InvoiceSearchResults",_invoiceService.FindAllInvoices());
}

Ajax Call

$.ajax({
    url: "/Invoice/InvoiceSearchResults/",
    type: 'GET',
    dataType: 'html', // <-- to expect an html response
    success: doSubmitSuccess
});

OnSuccess js method

function doSubmitSuccess(result)
{
    $('div#MyDiv').html(result);
}

$("#SearchResults").load("/Invoice/InvoiceSearchResults/");   

should have been:

$(".SearchResults").load("/Invoice/InvoiceSearchResults/");     

selector issues - couldn't see it for looking at it.

Thanks (EvilDonald - I've voted up your answer)

Hmm... though the code above should work (the $.ajax too.) I've been using a third approach to render my partials. A $.get request.

Here's a sample

$.get(postUrl, function(data) {
                $("#posts").append(data);
                $('#ajaxLdMore').addClass('hideElement');
                $('#ldMore').removeClass('hideElement');
            });

So maybe you will get third time lucky.