CODEWITHSUNDEEP
c#jqueryjsonasp.net-mvc-3
Ian Cotterill
Ian Cotterill

Reputation: 1717

Reload page after jQuery.get to MVC controller action

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

Upvotes: 3

Views: 23528

Answers (5)

Nitika Chopra
Nitika Chopra

Reputation: 1405

If you want to reload the full page, then simply use this code in jquery location.reload(); , this code writes when you need to refresh your page.

Upvotes: 0

Dave G
Dave G

Reputation: 9767

When the jQuery call is executed, you're not taking any action on success or failure.

The get will be executed via AJAX but nothing will happen to the page and the returned content will be discarded.

If the returned content is HTML, you may need to do an in place replacement on the page.

EDIT

To replace the entire body tag of the page with the body tag of the response you could do the following. In a success handler, you know the data response is going to be an HTML document so ...

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

This is really brute force and I'm not 100% convinced it will work but you could give it a shot and see what happens.

Upvotes: 0

Felipe Castro
Felipe Castro

Reputation: 1613

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

Upvotes: 5

Lefsler
Lefsler

Reputation: 1768

Sorry, but the problem is, you return the page but you dont get the return, to get the return you need to use a callback.. function(Data)... see the example below.Then if you do a console.log on the callback you can see the return. You need to do something like that.

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

the function(Data) is the returned data after the get is processed.

Upvotes: 1

yoozer8
yoozer8

Reputation: 7489

Once you receive the data from the server, you don't actually do anything with it. Update your $.get by adding a callback function that sticks the result where it is supposed to go.

You can read more about jQuery's get function in the jQuery documentation.

Upvotes: 0

Related Questions