Continu d'actualisation de PartialView à l'aide de ASP.NET MVC 3

Je suis en train d'élaborer un site web à l'aide de ASP.NET MVC 3.

J'ai un certain nombre de sections contenant des nouvelles en provenance de différents ministères, comme le montre l'image ci-dessous:

http://i.stack.imgur.com/G21qi.png

Les sections sont ajoutées à la masterpage en utilisant

@Html.Action("_News", "Home", new { id = 1 })

Où id 1 = "Ledelsen", 2 = "Omstillingen" et ainsi de suite.

Mon Contrôleur contient les mesures suivantes:

[ChildActionOnly]
public ActionResult _News(int id)
{
    //controller logic to fetch correct data from database
    return PartialView();
}

J'ai eu CRUD et en cours d'exécution, mais ma question est comment je peux actualiser la PartialViews sans publication, à un intervalle défini?

Je suppose que je dois utiliser Javascript/jQuery pour accomplir cela, mais je n'ai pas pu.

Quelqu'un peut me pointer dans la bonne direction ou, mieux encore, de fournir un exemple de comment faire cela?

Merci d'avance

EDIT: Juste pour clarifier, je ne veux pas l'ensemble de la page pour actualiser, mais seulement une actualisation asynchrone de la partialviews

OriginalL'auteur Casper | 2011-05-29

  1. 9

    Dans votre vue partielle, je vous conseille d'enrouler le tout dans une div:

    <div id="partial1">

    En javascript, vous aurez besoin d'une fonction pour utiliser AJAX pour charger la vue partielle dans le div:

    $("#partial1").load("_News", { id="1"} );

    C'est à l'aide de jQuery. Une partie de la documentation ici. Fondamentalement, ce qui va remplacer la div indiqué avec vue généré à partir de l'appel à votre _News action. L'id peut être modifiée si vous ajoutez un peu de logique à l'appel javascript.

    Puis les envelopper l'appel à load() dans un setTimeout():

    var t = setTimeout(function () {$("#partial1").load("_News", { id="1"} );}, 60000);

    Qui va exécuter le inclus la fonction de toutes les 60 secondes. t peut être utilisé, ainsi clearTimeout(t) n'importe où dans votre code javascript pour arrêter l'auto rafraîchissant.

    MODIFIER

    Elle devrait aborder le problème de mise en cache. Merci @iko pour la suggestion. J'ai remarqué que vous avez besoin cache: false pour que cela fonctionne.

    var t = setTimeout(function () { $.ajax({ 
                                     url: "_News", 
                                     data: { "id": "1" }, 
                                     type: "POST", 
                                     cache: false, 
                                     success: function (data) { 
                                          $("#partial1").innerHTML = data; 
                                     }}); }, 60000);
    Je suis, comme, pas de jQuery expert, mais ne vous manque une fonction wrapper autour de l'appel dans setTimeout? Ce regard comme il l'aurait fait appel de la charge et de passer ensuite quelle que soit la charge de la fonction retourne (un objet de demande?) dans setTimeout qui, je pense, une erreur.
    Je pense que l'exemple est correct, bien que je ne dirais pas que c'est complet. .load() est un wrapper autour de .ajax(). Il charge le code html renvoyé dans l'élément appelant. Vous inclure une fonction de rappel, mais il n'est pas nécessaire. Et setTimeout appelle simplement la inclut le code sur le calendrier.
    Hmmm.... à moins que la charge renvoie une fermeture, alors c'est faux. SetTimeout nécessite certainement un rappel que c'est le premier argument. Je pense que cela devrait être setTimeout(function(){$("#partial1").load("_News", { id="1"} )}, 60000)
    Oui, vous avez raison. J'allais partir de la mémoire, toujours une mauvaise décision dans mon cas. Je suis à jour de ma réponse. Merci.
    J'ai fini par utiliser cette solution qui a fonctionné parfaitement sur localhost. Sur le serveur, cependant, il est toujours actualise les sections en fonction de leur contenu au chargement de la page. Cela signifie que même si je présente quelque chose, il faudra attendre 60 secondes et la première fois jQuery recharge, il va charger le contenu ancien, que si elle est mise en cache. Des idées? Comme je l'ai dit, il fonctionne parfaitement sur ma machine locale.

    OriginalL'auteur Steve Mallory

  2. 0

    Je vais vous adresser une réponse que j'ai donné à une question connexe "UpdatePanel" dans de Rasoir (mvc 3) pour un point de départ. Notez que ce n'est pas différente de Steve Mallory de la réponse, mais souligne certains autres points.

    La différence, cependant, que vous devrez peut-être supprimer le [ChildActionOnly] attribut si vous souhaitez mettre à jour chaque vue partielle individuellement (mise à jour de l'id 1 seulement ou de mettre à jour l'id 2 seulement).

    Ce script peut être placé dans le retour partiel.

    <script type="text/javascript">
    setInterval(function()
    {
          $.load('<%= Url.Action("_News", "Home", new { id = Model.Id } ) %>', function(data) {
          $('#partial_'@(Model.Id)').html(data);
      });
    }
    , 30000);
</script>

<div id="partial_@(Model.Id)" />

    OriginalL'auteur Ahmad