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

ajaxasp.net-mvc-3form-submitnested-forms

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

Best Answer

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).

Related Topic