ASP.NET MVC多个注册表单提交问题

Question

I have multiple button in one view for now. For example, Admin and Student . If I click the Admin button , the view will show a popup modal-dialog of the Admin registration form and the same goes to Student .

The following is the code that I written in cshtml :

    @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary("", new { @class = "text-danger" })

    <div class="container">
    -- the button | admin --
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#AdminModal">Admin Modal</a>

    <div class="modal fade" id="AdminModal" style="width:auto">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h3 class="modal-title" >Admin Modal</h3>
                </div>
                <div class="modal-body">
                    <form id="AdminForm">

    -- with other textfields ---
    -- and DropDownList for selecting User role, eg. Admin/Student --

                    </form>
                </div>    
                <div class="modal-footer">
                    <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                    <input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" />
                </div>
            </div>
        </div>
    </div>
</div>



    <div class="container">
    -- the button | student --
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#StudentModal">Student Modal</a>

    <div class="modal fade" id="StudentModal" style="width:auto">
        <div class="modal-dialog">--student form content--<div>
    </div>
    </div>
    }

Provided with .Js :

$(document).ready(function () {
    $("#btnSubmit").click(function () {
        var AdminFormdata = $("#AdminForm").serialize();

        $.ajax({
            type: "POST",
            url: "/Account/Register",
            data: AdminFormdata,
            success: function (d) {
                console.log(d);
                $("#AdminModal").modal("hide");
            }
        })
    })
});

I tried with the Admin dialog , the above code does work to popup the particular dialog . However when I click the Submit button, it does not get the appropriate data from the chosen registration form . What is the problem here?

Answer 1

HTML does not allow to nest a <form> inside another <form> . Move the <div class="modal "> outside of the @using(Html.BeginForm) block.

Something like this:

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
        @Html.AntiForgeryToken()
        @Html.ValidationSummary("", new { @class = "text-danger" })
        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#AdminModal">Admin Modal</a>
} @* close main form here! *@

<div class="modal fade" id="AdminModal" style="width:auto">
    @* ... *@
    <form id="AdminForm"> ... </form>
</div>