Loading Partial View from JQuery not showing in MVC

Question

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

sorry - formatting has gone on this post :). Need to go offline and will repost later> — Davy
– Davy, Commented Oct 7, 2009 at 16:47
Look at the response from the server in Fiddler or Firebug's Net panel. Does it look right? — Craig Stuntz
– Craig Stuntz, Commented Oct 7, 2009 at 16:55
It's an xmlHHTPRequest and does look OK - should I be using JSON or something here as it's not html? — Davy
– Davy, Commented Oct 7, 2009 at 17:16

dano · Accepted Answer · 2009-10-07 17:32:31Z

9

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

edited Oct 7, 2009 at 17:32

answered Oct 7, 2009 at 17:17

dano

5,6105 gold badges29 silver badges27 bronze badges

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

2 Comments

Davy Over a year ago

Thanks - the same thing is happening. Am I missing something basic?

Craig Stuntz Over a year ago

These two (load and ajax/success/html) do the same thing.

AlexB · Accepted Answer · 2016-11-06 14:22:37Z

2

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

edited Nov 6, 2016 at 14:22

AlexB

7,44412 gold badges61 silver badges76 bronze badges

answered Oct 7, 2009 at 18:29

Davy

1,0732 gold badges12 silver badges22 bronze badges

1 Comment

dano Over a year ago

Thanks for showing me you can call a controller though a load() method! Until now, I didn't realize you could do that :D

Cyril Gupta · Accepted Answer · 2009-10-07 18:31:21Z

0

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.

answered Oct 7, 2009 at 18:31

Cyril Gupta

13.8k11 gold badges70 silver badges92 bronze badges

Collectives™ on Stack Overflow

Loading Partial View from JQuery not showing in MVC

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related