Question

I have an MVC 3 page that has two partial views, one for Items in Bucket A, and one for Items in Bucket B (simplified for discussion… there’s significant logic to rendering each bucket, and that logic is different between the buckets).

I have a link on the page that lets me move an item from Bucket A to Bucket B. Once that link is clicked, I have to refresh the partial views for Items in Bucket A, and the partial view for Items in Bucket B.

I can refresh one or the other using Ajax, like this:

@Ajax.ActionLink("Move to B", "_BucketB", "Home", new { item = Model.Item }, 
new AjaxOptions()
{
    UpdateTargetId = "divForBucketB",
    HttpMethod = "Post", 
    InsertionMode = InsertionMode.Replace
})

How can I approach the problem of also refreshing divForBucketA when the ActionLink is clicked?

UPDATE

The HTML that goes into divForBucketA needs to be generated using the appropriate View and Controller. The changes to the div contents are too significant to be processed on the client in JavaScript (other than perhaps invoking another Ajax call… can that be done?)

Answer 1

This is how you could do it with jQuery. Obviously you would need to fix the Url.Action calls and this does assume that the BucketA controller method returns a PartialView.

$(document).ready(function() {
   $('#mybutton").click(function() {
     $.get(@Url.Action("Index", "BucketA"), function (data) {
        $('#bucketA').html(data);
     });
     $.get(@Url.Action("Index", "BucketB"), function (data) {
        $('#bucketB').html(data);
     });

     e.preventDefault();
   });
});