c# - 为什么我的 ChildForm 中的提交按钮试图发布主表单？

Question

这是我的观点，它有 1 个主窗体，其中包含 3 个子窗体。

@*MainForm*@
@using(Html.BeginForm("Create_SelectPersons","Appointment", FormMethod.Post))
{
     @Html.AntiForgeryToken()
    <h4>Step 2</h4>
    <hr />
    @Html.ValidationSummary()
       @*Child Form1*@
        using(Ajax.BeginForm("AddAttendeeManual", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneManualEmail" }))
        {
             @Html.HiddenFor(m=>m.SelectedManualEmail.AppointmentId)
            <div class="form-group">
                @Html.LabelFor(m => m.SelectedManualEmail.Email, new { @class = "col-md-2 control-label" })
                <div class="col-md-8 input-group">
                    @Html.TextBoxFor(m => m.SelectedManualEmail.Email, new {@class = "form-control",PlaceHolder="Email"}) 
                   //button below tries to submit entire form(main) and not the child form
                    <input type='submit' class="btn btn-default" value="Add>>" />
                </div>
            </div>
        }


        if (Model.IsSuperOfficeConnected)
        {
            @*Child Form2*@
            using(Ajax.BeginForm("AddAttendeeSuperOffice","Attendee",new AjaxOptions{HttpMethod = "POST", OnSuccess = "done"}))
            {
                @Html.HiddenFor(m => m.SelectedSuperOfficeEmail.FirstName, new { id = "SelectedSuperOfficeEmail_FirstName" })
                @Html.HiddenFor(m => m.SelectedSuperOfficeEmail.LastName, new { id = "SelectedSuperOfficeEmail_LastName" })
                @Html.HiddenFor(m=>m.SelectedSuperOfficeEmail.AppointmentId)
                @Html.HiddenFor(m => m.SelectedSuperOfficeEmail.SuperOfficePersonId, new { id = "SelectedSuperOfficeEmail_SuperOfficePersonId" })
                <div class="form-group">
                    @Html.LabelFor(m => m.SelectedSuperOfficeEmail.Email, new { @class = "col-md-2 control-label" })
                    <div class="col-md-8 input-group">
                        @Html.TextBoxFor(m => m.SelectedSuperOfficeEmail.Email, new { id = "SelectedSuperOfficeEmail", @class = "form-control", PlaceHolder = "Search in SuperOffice" })

                        <input type='submit' id="btnSuperOffice" class="btn btn-default" value="Add>>" />
                    </div>
                </div>

            }

        }
        if (Model.IsInternalAddressBookEmpty)
        {
            @*Child Form3*@
            using(Ajax.BeginForm("AddAttendeeInternalAddressBook", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "done" }))
             {
                @Html.HiddenFor(m=>m.SelectedAddressBookPerson.FirstName)
                @Html.HiddenFor(m=>m.SelectedAddressBookPerson.LastName)
                @Html.HiddenFor(m=>m.SelectedAddressBookPerson.AppointmentId)
                 <div class="form-group">
                     @Html.LabelFor(m => m.SelectedAddressBookPerson.Email, new { @class = "col-md-2 control-label" })
                     <div class="col-md-8 input-group">
                         @Html.TextBoxFor(m => m.SelectedAddressBookPerson.Email, new { id = "SelectedAddressBookPerson", @class = "form-control", PlaceHolder = "Search in AddressBook..." }) 

                         <input type='submit' id="btnAddressBook" class="btn btn-default" value="Add>>">
                     </div>
                 </div>               
             }

        }


       <div class="form-group">
         <div class="col-md-offset-2 col-md-10">
             <input class="btn btn-default" value="<<Previous"/>
              //this button which i am expecting to submit the main form, does nothing
             <input type="submit" class="btn btn-default" value="Next>>" />
         </div>
    </div>

}


<style>
    .ui-autocomplete-loading {
        background: url('/Content/themes/base/images/ui-anim_basic_16x16.gif') no-repeat right center;
    }

</style>
@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")

    <script type="text/javascript">    
        $(function () {

            $("#SelectedSuperOfficeEmail").
                autocomplete({
                    source: '/Appointment/SuperOfficePerson',
                    minLength: 1,
                    select: function (event, ui) {
                        $('#SelectedSuperOfficeEmail').val(ui.item.value);
                        $(@Html.IdFor(m => m.SelectedSuperOfficeEmail.FirstName)).val(ui.item.FirstName);
                        $(@Html.IdFor(m => m.SelectedSuperOfficeEmail.LastName)).val(ui.item.LastName);
                        $(@Html.IdFor(m => m.SelectedSuperOfficeEmail.SuperOfficePersonId)).val(ui.item.ExternalPersonId);
                    }

            });

            $("#SelectedAddressBookPerson").autocomplete({
                source: '/Appointment/AddressBookPerson',
                minLength: 1,
                select: function(event,ui) {
                    $(@Html.IdFor((m=>m.SelectedAddressBookPerson.FirstName))).val(ui.item.FirstName);
                    $(@Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val(ui.item.LastName);
                },
            });

        });
        function doneManualEmail() {
            $(@Html.IdFor(m => m.SelectedManualEmail.Email)).val('');
        }
        function done() {
            $(@Html.IdFor(m=>m.SelectedSuperOfficeEmail.Email)).val('');
            $(@Html.IdFor(m=>m.SelectedAddressBookPerson.Email)).val('');
            $(@Html.IdFor(m=>m.SelectedManualEmail.Email)).val('');
        }

    </script>
}

在上面的 Child Form1 和 Child Form3 代码中，当我提交时点击它们旁边的按钮，它提交了子表单，但是对于 Child Form1 当我单击它旁边的按钮不应该提交子表单吗？

现在它正在尝试提交邮件表单。这是为什么？

还有提交类型的“下一步”按钮，因为当我单击它时主窗体什么都不做。

我该如何解决这个问题？

编辑 1:根据回答，我可以通过删除主窗体并为 Next>> 按钮添加 jquery on click 函数来解决这个问题。但是为什么第二个和第三个 child 表格起作用而不是第一个？

Answer 1

它不是有效的 HTML。您可以使用多个表单，但不能使用嵌套表单。

来自官方W3C XHTML specification prohibitions

form must not contain other form elements.