Question

I’m trying to create an MVC view that will display some data in a number of tables and then allow that data to be updated by hitting a submit button on the table to be updated. at the point the table is updated, the records in the table may move from one table to the next (this is all be handled in the service layer, not the view). At present, I have the view being rendered from the controller and each of the tables is a separate partial view displaying the data to the user. My update is intercepted by a jQuery method which captures the data from the table and then posts it to the controller as a JSON string. The controller then deserializes the JSON and posts it to the service layer.

What I’d like to then happen is the controller to return a view result which will refresh the whole page, updating the each table so that it displays the appropriate records. I have everything working apart from the page refresh – my controller returns a view result and both the view and model are correct at the point of return, however the page isn’t refreshing as I’d expect it to.

I think I’m missing something daft, but at the minute I can’t see what it is…

Code —

jQuery script on the view:

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

The above is capturing values into an object, and then serialising that into JSON. This is all working – the data is sent to the controller method and is in the correct shape when it arrives. I’ve swapped get for post in experimenting and not had any luck.

Controller Methods:

Method to render the data:

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

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

This is returning the view correctly populated.

Method to update the data:

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

    var model = _autoPayOutService.UpdatePayments(updates);

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

This is receiving the JSON and processing it correctly, however when it returns, the page is not updated. Note that the view returned is the same on both controller actions and the return type of the service calls is also identical – I can see a correctly populated model returned in debug.

I’m not sure what the problem is, to my knowledge, this should be returning the view correctly. I’m pretty new to jQuery and MVC 3, so it may well be that I’m going about it the wrong way – whether I should be performing this a different way or whether I’ve just missed something, I’m not sure.

Cheers

Answer 1

If you need to update the entire page, you don’t need to use the $.get, an ajax method.
Try this instead:

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