Chargement d'une vue partielle dans MVC ASP.Net en utilisant jQuery

Question

Je suis très nouveau à ces deux, alors s'il vous plaît pardonnez ma question de base.

J'ai une page d'index comme:

<div id="SearchBar">    
    <%= Html.Encode("Search by Site Name: ") + Html.TextBox("SearchTextBox") %>  
    <input type="submit" value="Search" id="jQuerySubmit" /> 
</div> 
<div id="SiteList"> 
    <% Html.RenderPartial("SiteIndexSearchResults", Model); %>      
</div> 

Tout cela fonctionne très bien.

Je veux recharger cette partie en fonction de ce que les types d'utilisateur dans « SearchTextBox » (je l'ai codé en dur ce dans le contrôleur pour l'instant - à des fins de test)

Je ne peux pas obtenir le partiel pour recharger en utilisant:

$(document).ready(function() { 
    $("#jQuerySubmit").click(function() { 
     $("#SiteList").load("/Site/IndexSearch/");   
    }); 
}); 

Il va dans le contrôleur et ne retourne la nouvelle vue basée sur IsAjaxResult être vrai, mais ne pas rafraîchir la page.

Merci d'avance.

Davy

Answer 1

Merci pour les réponses - les deux vraiment utiles. Je retournais une vue au lieu d'une vue partielle dans mon contrôleur (âne).

J'ai maintenant un textBox qui renvoie de façon incrémentielle des lignes à ma liste partielle basée sur une valeur de textbox, ce qui est ce que j'allais pour le long.

Merci encore.

Davy

Answer 2

Depuis #jQuerySubmit est une forme bouton de soumission dont vous avez besoin pour empêcher l'action par défaut qui est présente le formulaire normalement (sans AJAX). Pour ce faire, vous devez return false de votre gestionnaire de clic:

$(document).ready(function() { 
    $("#jQuerySubmit").click(function() { 
     $("#SiteList").load("/Site/IndexSearch/");   
     return false; 
    }); 
}) 

Answer 3

Vous devez arrêter le traitement « normal » du clic de lien. Dans la plupart des navigateurs, cela se fait en laissant le retour gestionnaire de clic false, mais dans Firefox, vous pouvez également utiliser event.preventDefault(), comme ceci:

$(function() { // Shorthand for the $(document).ready(function() { - does the same 
    $('#jQuerySubmit').click(function(ev) { // Takes the event as a parameter 
     ev.preventDefault(); 
     $('#siteList').load('/Site/IndexSearch/'); 
     return false; 
    }); 
}); 

S'il y a une possibilité que plus de liens seront chargés avec AJAX que vous voulez d'appliquer ce comportement, vous pouvez utiliser .live() au lieu de .click(), comme ceci:

$(function() { 
    $('#jQuerySubmit').live('click', function(ev) { 
     // The behavior is now applied to all links that are ever loaded on the page 
     // that have the id set to jQuerySubmit. 
     ... 
    }); 
});