Comment puis-je mettre à jour un ASP.NET MVC ViewData via jQuery ajax?

Question

J'ai une page qui dépend fortement d'un IList (dans ActionResult "MyEvents") que je passe dans ViewData. Quelque chose comme ça: ViewData ["events"] = listOfEvents; et à la fin, je juste return View();

Et dans ma vue, je prends ce ViewData ["events"] et fais un foreach pour que je puisse parcourir son contenu. Mais, ce ViewData doit être rempli dynamiquement. Donc, quand je clique sur un jour (j'utilise jQuery DatePicker), ce jour est envoyé comme argument à "MyEvents" et ce jour sera très important pour mes listOfEvents qui rempliront mes ViewData ["events"]. Mais le résultat que je reçois est que la div qui contient mon foreach crée une autre page entière à l'intérieur !! J'ai essayé de faire $ ("# myDiv"). Html (contentFromMyEvents) et c'est ce qui s'est passé.

Juste pour le test, je l'ai essayé aussi de faire $ (« # myDiv »). (Texte contentFromMyEvents) et tout le code html avec toutes ses étiquettes et everyting autre de ma page est apparu dans la div! C'était une page à l'intérieur d'une page !!

Donc, je pense que cela se passe parce que je suis de retour "return View();" et bien sûr, il rendra toute ma vue à nouveau. Alors, comment puis-je passer juste le ViewData ["events"] et le mettre à jour sur ma page ???

Merci!

Answer 1

Regardez la fonction de charge dans jQuery (http://docs.jquery.com/Ajax/load). Appelez votre contrôleur avec la charge, puis injectez le résultat dans votre document html.

$("myDiv").load("/Controller/Action"); 

Votre ViewData sera analysé côté serveur. Au lieu de renvoyer View(), renvoyez un PartialView() pointant vers un contrôle utilisateur. Ce qui sort le est juste un fragment de HTML.

Answer 2

Vous pouvez utiliser un rendu partiel ou vous pouvez avoir jquery sélectionner l'élément à partir de la valeur de retour.

$("#myDiv").empty().append($(contentFromMyEvents).find('#myDiv')); 

De plus, gardez à l'esprit que si vous avez des datepickers ou des liens qui nécessitent des événements à l'intérieur de là, vous pourriez avoir à les lier de nouveau.

Answer 3

Vous devriez regarder dans le transfert de données en avant et en arrière comme JSON. Ensuite, en utilisant jQuery/Javascript pour manipuler et formater les données comme bon vous semble. N'oubliez pas qu'une fois que la page est sur le client, le navigateur du client n'a aucune idée de ce que ViewData est.

Edit: Code d'action:

public ActionResult AjaxGetEvents(int id) 
{ 
    IList<object> events = new List<object>(); 
    foreach(Event event in SomeMethodToGetEvents(id)) 
    { 
     events.Add(new { Property1 = event.Property1, Property2 = event.Property2 }); 
    } 
    return JSON(events); 
} 

client Code Side:

var url = "some url that returns JSON"; 
jQuery.getJSON(url, function(data){ 
    jQuery.each(data){ 
     jQuery("#someDiv").append(data.Property1 + " " + data.Property2 "<br/>"); 
    }); 
});