C# 为什么我的子表单中的submit按钮会在发布主表单时滚动？_C#_Javascript_Jquery_Asp.net Mvc

C# 为什么我的子表单中的submit按钮会在发布主表单时滚动？

c# javascript jquery asp.net-mvc

C# 为什么我的子表单中的submit按钮会在发布主表单时滚动？,c#,javascript,jquery,asp.net-mvc,C#,Javascript,Jquery,Asp.net Mvc,这是我的观点，它有1个主窗体，里面有3个子窗体 @*MainForm*@ @using(Html.BeginForm("Create_SelectPersons","Appointment", FormMethod.Post)) { @Html.AntiForgeryToken() <h4>Step 2</h4> <hr /> @Html.ValidationSummary() @*Child Form1*@

这是我的观点，它有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>
}

@*MainForm*@
@使用（Html.BeginForm（“Create_SelectPersons”，“约会”，FormMethod.Post））
{
@Html.AntiForgeryToken（）
步骤2

@Html.ValidationSummary（）
@*儿童表格1*@
使用（Ajax.BeginForm（“addAttendeManual”、“Attendee”、新的AjaxOptions{HttpMethod=“POST”、OnSuccess=“doneManualEmail”}））
{
@Html.HiddenFor（m=>m.SelectedManualEmail.AppointmentId）
@LabelFor（m=>m.SelectedManualEmail.Email，新的{@class=“col-md-2控制标签”}）
@Html.TextBoxFor（m=>m.SelectedManualEmail.Email，新的{@class=“form control”，PlaceHolder=“Email”}）
//下面的按钮尝试提交整个表单（主表单），而不是子表单
}
if（已连接的发卡机构型号）
{
@*儿童表格2*@
使用（Ajax.BeginForm（“AddAttendeeSuperOffice”、“Attendee”、新的AjaxOptions{HttpMethod=“POST”、OnSuccess=“done”}））
{
@Html.HiddenFor（m=>m.SelectedSuperOfficeEmail.FirstName，新的{id=“SelectedSuperOfficeEmail\u FirstName”}）
@Html.HiddenFor（m=>m.SelectedSuperOfficeEmail.LastName，新的{id=“SelectedSuperOfficeEmail\u LastName”}）
@Html.HiddenFor（m=>m.selectedSuperOffice电子邮件.AppointmentId）
@Html.HiddenFor（m=>m.SelectedSuperOfficeEmail.SuperOfficePersonId，新的{id=“SelectedSuperOfficeEmail\u SuperOfficePersonId”}）
@LabelFor（m=>m.selectedSuperOffice电子邮件.Email，新的{@class=“col-md-2控制标签”}）
@Html.TextBoxFor（m=>m.selectedSuperOffice电子邮件.Email，新的{id=“selectedSuperOffice电子邮件”，@class=“form control”，PlaceHolder=“在SuperOffice中搜索”}）
}
}
if（型号IsInternalAddressBookEmpty）
{
@*三年级*@
使用（Ajax.BeginForm（“addAttendeerInternalAddressBook”，“Attendee”，新的AjaxOptions{HttpMethod=“POST”，OnSuccess=“done”}））
{
@Html.HiddenFor（m=>m.SelectedAddressBookPerson.FirstName）
@Html.HiddenFor（m=>m.SelectedAddressBookPerson.LastName）
@Html.HiddenFor（m=>m.SelectedAddressBookPerson.AppointmentId）
@LabelFor（m=>m.SelectedAddressBookPerson.Email，新的{@class=“col-md-2控制标签”}）
@Html.TextBoxFor（m=>m.SelectedAddressBookPerson.Email，新的{id=“SelectedAddressBookPerson”，@class=“form control”，PlaceHolder=“在地址簿中搜索…”）
}
}
//我希望提交主表单的这个按钮没有任何作用
}
.ui自动完成加载{
背景：url（'/Content/themes/base/images/ui-anim_basic_16x16.gif'）右中心不重复；
}
@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
@Scripts.Render（“~/Scripts/jquery-ui-1.10.4.min.js”）
@Scripts.Render（“~/Scripts/jquery.unobtrusiveajax.min.js”）
$（函数（）{
$（“#所选超级办公室电子邮件”）。
自动完成({
资料来源：“/任命/上级主管”，
最小长度：1，
选择：功能（事件、用户界面）{
$（'#selectedSuperOffice电子邮件'）.val（ui.item.value）；
$（@Html.IdFor（m=>m.selectedSuperOffice电子邮件.FirstName））.val（ui.item.FirstName）；
$（@Html.IdFor（m=>m.selectedSuperOffice电子邮件.LastName））.val（ui.item.LastName）；
$（@Html.IdFor（m=>m.SelectedSuperOfficeEmail.SuperOfficePersonId））.val（ui.item.ExternalPersonId）；
}
});
$（“#SelectedAddressBookPerson”）。自动完成({
资料来源：“/Appointment/AddressBookPerson”，
最小长度：1，
选择：功能（事件、用户界面）{
$（@Html.IdFor（（m=>m.SelectedAddressBookPerson.FirstName））.val（ui.item.FirstName）；
$（@Html.IdFor（m=>m.SelectedAddressBookPerson.LastName））.val（ui.item.LastName）；
},
});
});
函数doneManualEmail（）{
$（@Html.IdFor（m=>m.SelectedManualEmail.Email））.val（“”）；
}
函数完成（）{
$（@Html.IdFor（m=>m.selectedSuperOffice电子邮件.Email））.val（“”）；
$（@Html.IdFor（m=>m.SelectedAddressBookPerson.Email））.val（“”）；
$（@Html.IdFor（m=>m.SelectedManualEmail.Email））.val（“”）；
}
}

在上面的

子表单1

和

子表单3

代码中，当我提交时，单击旁边的按钮，它提交子表单，但是对于子表单1，当我单击旁边的按钮时，它不应该提交子表单吗

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

还有类型为submit的Next按钮，因为当我单击主窗体时，它什么也不做

我应该如何解决这个问题

编辑1：根据答案，我可以通过删除主窗体并为下一个>>按钮使用jquery on click功能来解决这个问题。但是为什么第二和第三个子表单工作而不是第一个子表单呢？

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

从官方

表单不能包含其他表单元素

因此，最好删除主窗体，并为下一个按钮提供jquery代码，该代码会将我转发到post方法