2009-09-16 13 views
3

J'ai une div avec une partie intérieure quelque part sur la page. J'ai un événement sur un bouton. Comment pourrais-je écrire un Javascript qui prend le div et le recharge et recharge également la vue partielle.Comment recharger un div avec une vue partielle dans ASP.NET MVC en utilisant jQuery?

Je l'ai dans une autre vue. Mais je ne peux pas le faire comme ça maintenant. Mais j'ai besoin que la même chose se produise seulement exécuter par un jQuery pas directement dans la page. Puis-je exécuter peut-être un code ajax simulaire dans le script jQuery, car son javascript n'est-il pas ?.

<% using (Ajax.BeginForm("EditFeiertag", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "feiertage" })) 
    { %> 
<div id="feiertage"> 
    <% Html.RenderPartial("FeiertagTable"); %> 
</div> 
<% } %> 

Je me aider si je pouvais exécuter le script ci-dessus en début d'un événement de clic ou quelque chose comme ça

Répondre

8

Commençons par quelques actions de contrôleur de base:

public class FeiertagController 
{ 
    IFeiertagService feiertagService = new FeiertagService(); 

    public ActionResult EditFeiertag() 
    { 
     // ... return your main edit view 
     return View(); 
    } 

    // Will be called by your jquery ajax call 
    public PartialResult GetFeiertagTable() 
    { 
     var feiertagData = messageService.getLatestFeiertagData(); 
     var viewModel = new FeiertagViewModel(); 
     feiertagViewModel.feirtagTableData = feiertagData; 

     return PartialView("FeiertagTableView", viewModel); 
    } 

} 

Ainsi, EditFeiertag () est utilisé pour rendre toute votre page d'édition, et cette page appellera GetFeiertagTable() quand elle veut afficher votre vue partielle de manière asynchrone.

Maintenant, votre point de vue, permet de dire que vous avez quelque chose comme:

<div id="Container"> 
    <div id="LeftPanel"> 
     // ... Some menu items 
    </div> 
    <div id="RightPanel"> 
     <a id="ReloadLink" href="#">Reload Table</a> 
     <div id="FeiertagTable> 
      <% Html.RenderPartial("FeiertagTable", Model.feiertagTableData); %> 
     </div> 
    </div> 
</div> 

Cela fonctionne bien et va charger votre table une fois. Mais vous voulez faire le rechargement de la table Feiertag si vous cliquez sur un certain élément (dans notre cas le #ReloadLink).

Ajouter ce qui suit à partie de votre page:

<head> 
     <script src="../../Scripts/Jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      jQuery(document).ready(function($) { 
       $('#ReloadLink').click(function(e) 
       { 
        e.preventDefault(); // stop the links default behavior 
        $('#FeiertagTable').load('/Feiertag/GetFeiertagTable'); 
       }); 
      }); 
     </script> 
</head> 

qui sera ensuite ajouter un événement sur l'événement, cliquez pour votre lien reload qui appellera une méthode charge jquery(). Cette méthode est une requête ajax get simplifiée et elle remplacera le contenu de la div sélectionnée (FeiertagTable), avec ce qui est retourné.

Notre action de contrôleur GetFeiertagTable() retournera la vue partielle, qui est ensuite insérée dans ce div. J'espère que cela vous met dans la bonne direction!

Questions connexes