Dynamically Generated Ajax.BeginForm

Question

Hello,

I have a problem with ASP.NET MVC Ajax forms. I generate several Ajax forms in a table, like this:

<% 
foreach (var item in Model)
       {
           var statefulItem = item as StatefulEffectiveItem; %>
    <tr>
        <td>
            <% using (Ajax.BeginForm("ShowAddActivity", "EffectiveItems", new { id = item.Id }, new AjaxOptions() { UpdateTargetId = "details", OnSuccess = "dialogIt" }))
               { %>
            <input type="submit" name="activity" value="Add Activity" />
            <% } %>
        </td>
    </tr>
    <% } %>

so far so good. When I post one of those forms, it renders a partial view in a div, and this new partial view contains a new Ajax.BeginForm (which is NOT nested in the originator form). This second Ajax.BeginForm is absolutely similar to the ones I generate in the table, but when I post it I don't get an "Ajax post", but a normal post which sends me to a new page. I don't understand what causes the difference between this two Ajax form, why this "dynamically generated" Ajax form behaves like a normal html form?

By the way, I know I can do this in different ways using Javascript, but I would like to understand if this can be done just using MVC helpers and Ajax Library and, if the answer is "yes", where I do wrong.

Thank you very much,

Wasp

Answer 1

I don't know if it can be done with MS AJAX but I can tell you what is wrong. Once you update the partial on the first ajax, this updated partial contains javascript to register ajax for the new form. This javascript is not executed because there's nothing that is telling it to execute. You must call a javascript function that registers ajax for the second form on the success callback of the first ajax request.