Loading Partial View from JQuery not showing in MVC.

Question

Hi

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 some JQuery:

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

})

I have an Index View:

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

<%= Html.Script("/scripts/InvoiceSearch.js") %>

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

    <!--hardcoded select list for test purposes - removed from here-->           
</div>

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

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

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>
            <%= Html.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'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.

Answer 1

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

Answer 2

he he - $("#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)

Answer 3

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.