Rechargement de la page après l'action jQuery.get vers le contrôleur MVC

Question

J'essaie de créer une vue MVC qui affichera des données dans un certain nombre de tableaux et permettra ensuite de mettre à jour ces données en appuyant sur un bouton d'envoi sur le tableau à mettre à jour. Au moment où le tableau est mis à jour, les enregistrements dans le tableau peuvent se déplacer d'un tableau à l'autre (tout ceci est géré dans la couche de service, pas dans la vue). Actuellement, la vue est rendue par le contrôleur et chacun des tableaux est une vue partielle distincte qui affiche les données à l'utilisateur. Ma mise à jour est interceptée par une méthode jQuery qui capture les données du tableau et les envoie au contrôleur sous forme de chaîne JSON. Le contrôleur désérialise ensuite le JSON et l'envoie à la couche de service.

Ce que j'aimerais ensuite, c'est que le contrôleur renvoie un résultat de vue qui rafraîchira toute la page, en mettant à jour chaque tableau pour qu'il affiche les enregistrements appropriés. Tout fonctionne sauf le rafraîchissement de la page - mon contrôleur renvoie un résultat de vue et la vue et le modèle sont corrects au point de retour, mais la page ne se rafraîchit pas comme je l'attends.

Je pense que j'ai raté quelque chose de stupide, mais pour l'instant je ne vois pas ce que c'est...

Code --

jQuery script sur la vue :

function DailyPaymentIn(payInId, payOut, notes) {
  this.PayInId = payInId;
  this.PayOut = payOut;
  this.Notes = notes;
}

$(function () {
  $('#update-yes-payments').submit(function (e) {
    e.preventDefault();

    var payments = new Array();

    $('#payment-table-yes tbody tr').each(function () {
      var payInId = $('input#PayInId', this).val();
      var payOut = $('input#PayOut', this).is(':checked');
      var notes = $('input#payment_Notes', this).val();

      payments.push(new DailyPaymentIn(payInId, payOut, notes));
    });

    $.get('/payments/UpdatePayments', { json: JSON.stringify(payments) });
  });
});

Ce qui précède consiste à capturer des valeurs dans un objet, puis à les sérialiser en JSON. Tout cela fonctionne - les données sont envoyées à la méthode du contrôleur et sont dans le bon format lorsqu'elles arrivent. J'ai échangé get pour post en expérimentant et je n'ai pas eu de chance.

Méthodes de contrôle :

Méthode pour rendre les données :

[HttpPost]
public ViewResult PayInAdmin(PayInAdminModel model)
{
    var payments = _autoPayOutService.PopulatePayments(model.PaymentsDate);

    return View("AutoPayOut/PayInAdmin", payments);
}

Cela renvoie la vue correctement remplie.

Méthode pour mettre à jour les données :

public ViewResult UpdatePayments(string json)
{
    var updates = Deserialise<List<DailyPaymentInUpdateModel>>(json);

    var model = _autoPayOutService.UpdatePayments(updates);

    return View("AutoPayOut/PayInAdmin", model);
}

Il reçoit le JSON et le traite correctement, mais lorsqu'il revient, la page n'est pas mise à jour. Notez que la vue renvoyée est la même pour les deux actions du contrôleur et que le type de retour des appels de service est également identique - je peux voir un modèle correctement rempli renvoyé dans le débogage.

Je ne sais pas quel est le problème, à ma connaissance, cela devrait renvoyer la vue correctement. Je suis assez novice en matière de jQuery et de MVC 3, il se peut donc que je m'y prenne de la mauvaise façon - que je doive effectuer cette opération d'une manière différente ou que j'aie simplement manqué quelque chose, je n'en suis pas sûr.

Cheers

Answer 1

Si vous devez mettre à jour la page entière, vous n'avez pas besoin d'utiliser la fonction $.get , une méthode ajax. Essayez plutôt ceci :

window.location = '/payments/UpdatePayments?json=' + JSON.stringify(payments);

Answer 2

Désolé, mais le problème est que vous retournez la page mais vous n'obtenez pas le retour, pour obtenir le retour vous devez utiliser un callback... function(Data)... voir l'exemple ci-dessous.ensuite si vous faites un console.log sur le callback vous pouvez voir le retour. Vous devez faire quelque chose comme ça.

$.get('/payments/UpdatePayments', { json: JSON.stringify(payments) }, function(data){
  //The data is the return.. is the view
  console.log(data);
 // you can change the div content
 $("#content").html(data)
});

la fonction(Data) est la donnée retournée après le traitement du get.

Answer 3

Une fois que vous avez reçu les données du serveur, vous n'avez pas vraiment faire n'importe quoi avec. Mettez à jour votre $.get en ajoutant une fonction de rappel qui colle le résultat là où il est censé aller.

Vous pouvez en savoir plus sur l'approche de jQuery. get fonction dans la documentation de jQuery .

Answer 4

Lorsque l'appel jQuery est exécuté, vous n'effectuez aucune action en cas de succès ou d'échec.

La requête sera exécutée via AJAX mais rien ne se passera sur la page et le contenu renvoyé sera supprimé.

Si le contenu renvoyé est du HTML, vous devrez peut-être effectuer un remplacement en place sur la page.

EDITAR

Pour remplacer l'intégralité de la balise body de la page par la balise body de la réponse, vous pouvez procéder comme suit. Dans un gestionnaire de succès, vous savez que la réponse aux données sera un document HTML, donc ...

$.get(url, data, function(data, textStatus, jqXHR) {
    $('body').replaceWith( $('body', $(data)) );
});

C'est vraiment de la force brute et je ne suis pas convaincu à 100% que cela fonctionnera, mais vous pouvez essayer et voir ce qui se passe.

Answer 5

Si vous souhaitez recharger la page complète, il suffit d'utiliser ce code dans jquery location.reload(); ce code s'écrit lorsque vous avez besoin de rafraîchir votre page.