ASP .NET MVC 3 - How to submit an ajax form nested within an html form

Question

I have an ASP .NET MVC 3 project and a problem with one of my 'Create' views.

I have cascading drop-down fields that I have implemented with ajax forms.

The view is roughly speaking - like this:

@using (Html.BeginForm(...))
{
    @Html.MyDropDown1

    using (Ajax.BeginForm(...))
    {
        @Ajax.MyDropdown2
        <input type="submit" value="Select" />
    }

    using (Ajax.BeginForm(...))
    {
        @Ajax.MyDropdown3
        <input type="submit" value="Select" />
    }

    <!-- other form fields -->

    <input type="submit" value="Create" />
}

The problem is that the submit buttons inside the ajax forms actually submit the outer html form.

Is there any way to specify the name of the form I want to submit?

I thought about putting my ajax forms above my html form so there would not be any nesting - but I need the values of the drop-down's selected items in my html post.

Thanks, Pete

Answer 1

As pointed out in comments you can't have nested forms. Remove all the using (Ajax.BeginForm(...)) bits, and handle your ajax calls through jQuery (or sth else).