asp.net mvc complex ajax updates

Question

Hi,

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.