Html.BeginForm inside of Html.BeginForm MVC3

Question

I have a main view that renders two partial views. The main view encompasses both of the partial views within a form. Each of the partial views also contain forms. All 3 views share the same viewmodel. What I want to do is encapsulate the data from all views with the main view, and run specific Controller action results with the partial views.

I want to know if this is even possible. When debugging I see that my content always posts to the HTTPPost of the Main views form. I have submit buttons for each of the forms accordingly. Sorry for the code post, its coming out all split up.

Main View:

@using (Html.BeginForm("Main", "Registration", FormMethod.Post, 
    new { @class="mainform" }))
{
    <form>
        <fieldset>
            <div id ="option1" class="conglomerate">
                @Html.Partial("_GetBusiness")
            </div> 
            <div id ="option2" class="dealership">
                @Html.Partial("_GetLocation")
            </div>
            <button type="submit" value="Create" class="buttonBlue" id="">
                <span>Create a new dealer</span>
            </button>
         </fieldset>
    </form>

Partial 1

@using (Html.BeginForm("CreateBusiness", "Business", FormMethod.Post, 
        new { @class="buisinessform" }))
{
    <form>
        <div class="editor-field">
            @Html.DropDownListFor(m =>m.BusinessId, new SelectList(Model.Businesses, 
                "BusinessId", "BusinessName"), "")
        </div>
        <label>Your company not listed? Register yours below:</label>
        <div class="editor-label">
            @Html.LabelFor(model => model.BusinessName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.BusinessName)
            @Html.ValidationMessageFor(model => model.BusinessName)
        </div>
        <button type="Button" value="" class="buttonBlue"id="TestSubmit">
           <span>Add Dealer</span>
        </button>
        <div class ="confirm">
            <button type="submit" value="Create" class="buttonBlue" id="">
                <span>Click here to confirm dealer addition</span>
            </button>
        </div>
    </form>
}

Solution 1

As Dave mentions, It is not valid HTML to nest forms. It's not just HTML5, but any version of HTML.

It might work in some browsers, in certain circumstances, but it is never valid. And you can never depend on what will happen even if it does seem to work. Your best course of action is to use multiple non-nested forms on a page.

Can you explain why you think you need nested forms?

Solution 2

No, you cannot have nested forms. Sorry.

See HTML5 guidelines

"Flow content, but with no form element descendants"

Comments

[Dave Alperovich]

Amen. Maybe a good additional question, can these partials have encapsulated forms rather than nested forms?

[WiseGuy]

Thanks both of you, i wasn't too aware of the concept. Yeah, theres got to be another way to do what i need. Which is to pass the ID values obtained from both of the partial views back to the view model.

[Erik Funkenbusch]

@BenjaminRandal - you can achieve that by simply posting all the data together as a single post.

[Dave Alperovich]

@BenjaminRandal, try either posting everything together and using selectively (as Mystere suggests) or breaking out multiple separate forms.

[WiseGuy]

I ended up splitting the submits into multiple separate forms, thanks for the input guys, wish I'd have learned that bit about html submission before the headache. Seemed like a good idea at the time :)