Question

We want to perform some calculations on some values in a view…so when the user enters a value in a input…we want to go back to the server…perform the calculations and ‘refresh’ the view with the new values…With the code as it is now, it enters the correct (…or at least the one I ask it to) controller action, correctly performs the calculations and returns the updated ViewData to the view. When I step thru the loop that builds the html for the view, the ViewData has the updated values, but when the View is displayed on the browser, the values have not changed…

Here’s the 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); }); 

Here’s what the html for the form frmUpdate looks like

<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> 

Now just to confuse things further, the data that is not displaying correctly is in a different form on the view. The reason (right or wrong) I have two forms is that the other form on the view kicks off a save routine.

Here’s the relevant part of the controller action

 [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]);      } 

I’m thinking that maybe the reason it’s not working is that I’m updating one form and then asking the MVC view engine to update/refresh the other form(but keep in mind that when I step thru the loop on the view that builds the page, the data is updated but the page in the browser is not)…How can I cause the view to display the correct html?

/********************************************
Added the following code just to test RedirectToAction
The ajax call DOES NOT error on the above return View(‘blah’) stuff
**********************************************/

P.S. Just tried RedirectToAction in the controller like this

 [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 } ) );     } 

but then the ajax call errors with a 500 error

Thanks,
Greg

Answer 1

You’re almost there. This is how we do it.

In the view, for the section that you want to update via ajax, copy the html from here to a partial view we’ll call Partial_View_of_Form and render it on the view. We’ll put this inside a unique div so we can replace this content later on…

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

For the Update() instead of returning a View, return the partial view we just created with the new values:

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

Finally, in the ajax post, grab the html that you’re returning from the action and replace the contents of the original partial view.

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

This is pretty rough code and untested, but should be pretty easy to go from here