How to refresh multiple partialview on click of Ajax.Actionlink

Question

I am using multiple partial views on my View. on the left-hand side. I have some link button.

In middle, I have 2 partial views let us suppose Up and Down I m able to update the Up partial view now I want to update Down partial view on the click of the same link button

I am able to send only one UpdateTargetID in Ajax.ActionLink button but I want to update 2 Partial views on the click of the same button.

1) Is there any way I can pass more than one UpdateTargetID in Ajax.ActionLink or 2) I can return Multiple partial views in Home Controller or any other way as you suggested Please reply to me

Thanks, Everyone for replying Let me tell you what I have done in order to refresh multiple partial view on a single click This is the Action Link which I m using to click on Here I m using a OnSucess Function of this Action link in order to update, This Action link is on a partial view

                 <%= Ajax.ActionLink("Select", "Employee", new { Id = Employee.EmployeeID }, new AjaxOptions { UpdateTargetId = "EmployeeDiv", HttpMethod = "Post", OnSuccess = "function(){EmployeeHistory(-2," + Employee.EmployeeID.ToString() + ");}" })%>

This is a javascript that I m calling from a partial view

 function  EmployeeHistory(EmployeeID) {
    var url = '<%= Url.Action("PartialviewAction", "ControllerName") %>'
    $('#PartialviewDiv1').load(url, { Id: EmployeeID });
    var url1 = '<%= Url.Action("PartialviewAction", "ControllerName") %>'
    $('#PartialviewDiv2').load(url1, { Id: EmployeeID });

}

and these two div are in Index view which I want to update

        <div id="Paritalview div1"><% Html.RenderPartial("PartialViewname1"); %></div>
        <div id="Paritalview div2"><% Html.RenderPartial("PartialViewname2"); %></div>

Answer 1

Yes there is - don't use Ajax.ActionLink.

IMO, the MS Ajax library, as with Web Forms, is bloated.

Keep it simple - use jQuery - then you have total control:

$(function() {
   $('#somelink').click(function(e) {
      e.preventDefault();

      $.get('/controller/action1', function(data) {
         $('#up').html(data);
      });

      $.get('/controller/action2', function(data) {
         $('#down').html(data);
      });
   });
});

However, since you're updating both panels, I would suggest wrapping those two middle panels in a partial view of it's own - then serve that via a single action method - that way you only need 1 ajax call.

Edit

As @FelixM mentions, you should use Url.Action or Url.RouteUrl to generate the URL for the AJAX call, so if your routes change then your JS need not, e.g:

.get('@Url.Action('Controller', 'Action1')', function(data)

or

.get('@Url.RouteUrl('SomeNamedRoute')', function(data)

If your putting this script in an external file then you'll need to use a technique to set the url in the main view, then read from the external variable.

Such techniques include a JavaScript variable, hidden field, passing URL to function as parameter, etc.