Chargement de la vue partielle à partir de JQuery ne s'affiche pas dans MVC

Question

Je n'arrive pas à obtenir ma vue partielle à afficher dans ASP.Net MVC 1.0 lorsque je le charge avec JQuery.

j'ai un contrôleur comme:

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

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

J'ai un Voir Index:

<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> 

J'ai alors 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> 

J'ai quelques JQuery:

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

J'ai supprimé une partie du code que je sais qui fonctionne pour rendre la question plus facile à lire. Quand je clique sur le mon DropDownList il appelle le JQuery, va à mon contrôleur et semble exécuter la classe partielle mais il ne rend rien.

J'ai essayé la réponse de evilDonald et la même chose se passe donc peut-être quelque chose de stupide que j'ai fait quelque part?

Toute aide ou conseil général ici très apprécié.

Answer 1

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

aurait dû être:

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

questions de sélection - ne pouvaient pas le voir pour le regarder.

Merci (EvilDonald - J'ai voté votre réponse)

Answer 2

J'ai une solution pour vous:

Plutôt que d'utiliser

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

Essayez d'utiliser un .ajax de $() pour demander au contrôleur, puis mettre la réponse dans le code HTML. J'ai ce travail avec succès et je vais essayer de paraphraser la réponse ci-dessous:

méthode contrôleur

Gardez la même

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

Ajax Appel

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

Méthode OnSuccess js

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

Answer 3

Hmm ... bien que le code devrait fonctionner au-dessus (le .ajax $ aussi.) J'utilise une troisième approche pour rendre mes partials . Une requête $ .get.

Voici un exemple

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

Alors vous peut-être obtenir une troisième fois la chance.