Ajax.BeginForm inside Html.BeginForm

Question

I have a view that is used for editing stuff, say Orders. Orders have line items that can be added arbitrarily. So a main view and nested partialviews.

Each partial should have an ajax form for tweaking quantities of each line item or whatever.

Thus:

Html.BeginForm()
{%>
    Ship to: blah blah blah  
    <%
    Ajax.BeginForm("EditLineItem", "Order", new { OrderLineItemID = Model.ObjectID }, itemAjaxOptions))
    {
        Item qty blah blah blah

        <--! (ajax form's submit button, etc.)-->
    }
    %>
    <--! (ajax form's submit button, etc.)-->
<%
}

I have a controller that looks like this:

[ActionName("Edit")]
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
public ActionResult Edit(int orderID)
{
    blah, blah
}

[ActionName("EditLineItem")]
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
public ActionResult EditLineItem(Guid orderLineItemID)
{
    blah, blah
}

My trouble is that when I submit the Ajax form, I get the Edit method instead of the EditLineItem methods. Both routes are mapped. Is there some gotcha like "you can't submit an Ajax form inside of an Html form" that I don't know about?

Answer 1

I tried the exact same thing a while ago. No matter what I did, it wouldn't do the AJAX submit. So I think the answer is: yes, you can't put a submit button for an AJAX form inside a regular html form.

But, why would you have partial submits merged with full submits? The easiest workaround to this imo would be to use JSON requests with jQuery.

for instance, updating a quantity span text when you change a dropdownlist (id=Order):

<script type="text/javascript">
    $(document).ready(function() {
        $('select#Order').change(function() {
            $.getJSON('/Orders/UpdateQty/' + this.value, {},
              function(data) {
                  $('#qty').html(data);
              });
        });
    });

</script>

And the code in the "Orders" controller:

public class OrdersController : Controller
{
    public ActionResult UpdateQty(int id)
    {
        return Json(yourLibrary.getQuantities(id));
    }
}

This Link might help. Regards

Edit:

So.. the link no longer exists. But thanks to the internet wayback machine, we have this copy :)

Answer 2

AFAIA the AjaxForm is still renders as a form tag, so you'd be nesting forms, which as you've found is a no no.

I reckon Francisco is on the right lines (tho I'd suggest implementing a post rather than a get as you are updating something).

Kind regards, TP