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>

Solution

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.

Comments

[Felix Martinez]

Good answer. Just to be sure, instead of putting the Controller/Action URL explicitly, use Url.Action to render the correct URL.

[Aman Rohilla]

Thanks for the reply, some thing I need to update I m using 3 partial view and the link on which I m clicking is on the left hand side and it is on a partial view as well, I m new to MVC, Please tell me how to use it as well

[Stephen Swensen]

+1, agreed, total control leads to happiness. If I needed to update multiple areas of a page corresponding to partial views at the same time, I'd do it using a single action with a json response with the help of a "RenderViewToString" implementation.

[RPM1984]

@user674363 - simply saying "I am new to MVC" doesn't enable us to solve your problem, rather give us an indication of how much detail to go into. So it sounds like you have 3 panels: LHS, then two in the middle. Do you want to update all three? Why would you want to update the LHS panel if that's where the user is clicking (e.g it sounds like the LHS is a "menu", and the middle is the data)

[Aman Rohilla]

As per the requirement The panel on LHS gets updated every minute and the panel on RHS should be updated when clicked on any select link button on the LHS

[RPM1984]

@user674363 - so call another action method for the other partial, or as i mentioned, wrap both in a partial view and serve that.

[uriz]

this cause 2 AJAX calls to the server instead of only 1 that will include the 2 partial views