asp.net mvc complex ajax updates - asp.net

Question

i'm wanted to perform some ajax calls in a certain way.
I have a page. In this page are 2 ViewUserControls, say control1 and control2.
control1 has a list of Ajax.ActionLinks that call control2 like this:
<%= Ajax.ActionLink(page.Name, "PageDetails", new { pageSysName = page.SysName }, new AjaxOptions { UpdateTargetId = "pageEdit" })%>
control2 has an Ajax form which updates fine. The Ajax.BeginForm method looks like this:
Ajax.BeginForm("SavePage", "Admin", new AjaxOptions { UpdateTargetId = "pageEditUpdated" })
When a user hits the Save button, it currently updates a div called pageEditUpdated with a basic Content("updated") return type from the Controller.
The part i'm stumped on is how to update control2 to reflect the new changes.
To sum it up, a Page has 2 controls. I'd like control2 to refresh itself and also update a div to notify the user that the update has been performed.

Answer 1

Have your SavePage method return a partial that reflects the updated form contents, including the update message. Have the update target be the "inner container" of the form.
<% Ajax.BeginForm("SavePage", "Admin", new AjaxOptions { UpdateTargetId = "innerForm" }) { %}
<div id="innerForm">
<% Html.RenderPartial( "EditPageContents" ) %>
</div>
<% } %>
Your save action should then return
updatedModel.UpdateMessage = "updated";
return PartialView( "EditPageContents", updateModel );
and your partial view should have
<% if (!string.IsNullOrEmpty( UpdateMesage )) { %>
<%= Html.Encode( UpdateMessage ) %>
<% } %>
Honestly, though, this would be a lot easier using jQuery to post the form via AJAX:
$(function() {
$('form').submit( function() {
$.post( $(this).attr('action'), $(this).serialize(), function(data) {
$('#updateMessage').html(data).show();
});
return false;
});
});

Answer 2

I have to second tvanfosson's comment (I'd vote for him, but my reputation apparently isn't high enough yet). At any rate, when I integrated Ajax functionality with my MVC site I found the Microsoft provided Ajax methods to be fairly clunky. So instead I switched to using the jQuery.form plugin (good examples here). I found it made things much easier to work with. I just created MVC user controls for the section of page I wanted to be ajax, and just reloaded that user control as neccessary.