2009-03-24 12 views
0

Nous souhaitons effectuer des calculs sur certaines valeurs dans une vue ... donc lorsque l'utilisateur entre une valeur dans une entrée ... nous voulons revenir au serveur. ..effectuer les calculs et "rafraîchir" la vue avec les nouvelles valeurs ... Avec le code tel qu'il est maintenant, il entre dans le bon (... ou du moins celui que je lui demande) action du contrôleur, effectue correctement le calculs et renvoie la ViewData mise à jour à la vue. Lorsque je fais un pas à travers la boucle qui construit le html pour la vue, le ViewData a les valeurs mises à jour, mais quand la vue est affichée sur le navigateur, les valeurs ont pas changé ...Affichage n'affiche pas les valeurs mises à jour asp.net mvc

Voici le javascript

$('input.changeValue').change(function() { 
    $('body').css('cursor', 'wait'); 
    var changedAmt = this.value; 
    var frmUpdate = $('form#frmUpdate').serializeArray(); 

    fooSoldObj = new Object(); 
    fooSoldObj.name = 'fooSoldAmt'; 
    fooSoldObj.value = changedAmt; 

    frmUpdate[frmUpdate.length] = fooSoldObj; 

    $.ajax(
      { 
       type: $('form#frmUpdate')[0].method, 
       url: $('form#frmUpdate')[0].action, 
       data: frmUpdate, 
       dataType: 'html', 
       error: function(error) { 
        alert('frmUpdate error' + error); 
       } 
      } 
     ); 

    setTimeout(function() { 
     $('body').css('cursor', 'default'); 
    }, 0); 
}); 

Voici ce que le code HTML pour la forme frmUpdate ressemble

<form action="/Forecast/Update" id="frmUpdate" method="post" name="frmUpdate"> 
    <span> 
     <input id="HiddenForecastID" name="HiddenForecastID" type="hidden" value="XXX" /> 
     <input id="HiddenForecastYear" name="HiddenForecastYear" type="hidden" value="2009" /> 
     <input id="HiddenForecastMonth" name="HiddenForecastMonth" type="hidden" value="3" />  
    </span> 
</form> 

maintenant juste pour compliquer les choses plus loin, les données qui ne sont pas correctement est affiche sous une forme différente sur la vue. La raison (bonne ou mauvaise) que j'ai deux formes est que l'autre forme sur la vue déclenche une routine de sauvegarde.

est ici la partie pertinente de l'action du contrôleur

[AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult Update(FormCollection frmUpdate)    
    { 
     //go off and do some stuff...this part works as the ViewData 
     //is correct....meaning it has the updated values that 
     //we want to see displayed in the view 
     return View("MyView", ViewData[someData]); 

    } 

Je pense que peut-être la raison pour laquelle il ne fonctionne pas est que je suis mise à jour d'un formulaire, puis demander au moteur de vue MVC mettre à jour/actualiser la autre forme (mais gardez à l'esprit que lorsque je parcours la boucle sur la vue qui construit la page, les données sont mises à jour mais pas la page dans le navigateur) ... Comment puis-je faire afficher le code html correct?

/*****************************************
Ajouté le code suivant juste pour tester RedirectToAction
l'appel ajax NE FAIT PAS erreur sur la substance Voir ci-dessus retour (« blah »)
******************** **************************/

PS Juste essayé RedirectToAction dans le contrôleur comme celui-ci

[AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult Update(FormCollection frmUpdate)    
    { 
     //go off and do some stuff...this part works as the ViewData 
     //is correct....meaning it has the updated values that 
     //we want to see displayed in the view 
     return RedirectToAction("MyView", new RouteValueDictionary(new { controller = "Forecast", action = "MyView", addMonth = monthAdd })); 
    } 

mais les erreurs d'appel ajax avec une erreur 500

Merci,
Greg

Répondre

3

Vous êtes presque là. C'est comme ça qu'on fait. Dans la vue, pour la section que vous voulez mettre à jour via ajax, copiez le html d'ici à une vue partielle, nous appellerons Partial_View_of_Form et le rendrons sur la vue. Nous allons mettre cela à l'intérieur d'un div unique, afin que nous puissions remplacer ce contenu par la suite ...

<div id="replace_me"> 
    <% Html.RenderPartial("Partial_View_of_Form", ViewData[someData]); %> 
</div> 

Pour la mise à jour() au lieu de retourner une vue, retour à la vue partielle que nous venons de créer avec les nouvelles valeurs:

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult Update(FormCollection frmUpdate) 
{ 
    // do whatever processing you need here 
    return PartialView("Partial_View_of_Form", ViewData[updatedData])); 
} 

Enfin, dans le poste ajax, saisissez le code HTML que vous êtes de retour de l'action et de remplacer le contenu de la vue partielle d'origine.

success: function(html) 
{ 
    $("#replace_me").html(html); 
} 

C'est un code assez rude et non testé, mais devrait être assez facile de passer d'ici

+0

Merci pour ça ... j'essaierai certainement ça ... ça a du sens – w4ik

0

Vous avez 2 environnements distincts ici. Votre code MVC s'exécute sur le serveur et votre javascript s'exécute sur le client (navigateur). Lorsque vous soumettez votre formulaire, le navigateur envoie une demande au serveur et votre contrôleur le gère & fournit des données pour la vue à rendre. La vue rendue est renvoyée au navigateur, qui doit l'interpréter. Un code de réponse 500 signifie "erreur du serveur". En d'autres termes, le serveur rencontre un problème avant d'envoyer la réponse au navigateur. Essayez d'examiner les détails d'erreur fournis lorsque vous voyez l'erreur. Cela devrait vous donner une idée de ce qui ne va pas. Il y a probablement une erreur dans la vue que vous visualisez.

+0

Mais je ne suis pas l'erreur si je viens d'utiliser la vue de retour (« bla ») stuff .. .myabe je n'aurais pas du ajouter ça, ça rend la question déroutante ... – w4ik

0

Je suis la vue pour afficher les données mises à jour ... il est tout simplement pas ajaxy ... voici le changement que je fait le javascript

$('input.changeValue').change(function() { 
    $('body').css('cursor', 'wait'); 
var changedAmt = this.value; 
var frmUpdate = $('form#frmUpdate').serializeArray(); 

fooSoldObj = new Object(); 
fooSoldObj.name = 'fooSoldAmt'; 
fooSoldObj.value = changedAmt; 

frmUpdate[frmUpdate.length] = fooSoldObj; 

$.ajax(
     { 
      type: $('form#frmUpdate')[0].method, 
      url: $('form#frmUpdate')[0].action, 
      data: frmUpdate, 
      dataType: 'html', 
      /* the line below is the change */ 
      success: function() { window.location = document.location.href; }, 
      error: function(error) { 
       alert('frmUpdate error' + error); 
      } 
     } 
    ); 

setTimeout(function() { 
    $('body').css('cursor', 'default'); 
}, 0); 
}); 

maintenant le $ .ajax envoie les frmUpdate de données hors de le serveur ... apporte des modifications aux données de l'objet Session ...stocke les données enregistrées dans l'objet Session ... et la vue est chargé par le

window.location = document.location.href 

ligne qui démarre l'action du contrôleur

[AcceptVerbs(HttpVerbs.Get)] 
public ActionResult MyView(int monthAdd) 

qui ressemble alors dans l'objet de session, obtient les données juste changé et renvoie la vue ... semble que je vais autour de mon coude pour obtenir à mon un $$ :)

Questions connexes