BeginForm isn't getting called from HTML Partial

Question

I need to make a table with a password reset modal in it and I have a div with the html partial for the reset password view in it. Inside the partial it has a beginform that isn't ever getting called. Also the manage method in the controller is never getting called either. Any idea why?

Could it be because of the fact I have a form outside the html partial too?

_ChangePasswordPartial.cshtml

@using Microsoft.AspNet.Identity
@model Spectrum.Models.ManageUserViewModel

@*<p>You're logged in as <strong>@User.Identity.GetUserName()</strong>.</p>*@

@using (Html.BeginForm("Manage", "User", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Change Password Form</h4>
    <hr />
    @Html.ValidationSummary()
    <div class="form-group">
        @Html.LabelFor(m => m.OldPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.OldPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.NewPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.NewPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Change password" class="btn btn-primary" />
        </div>
    </div>
}

Index.html

<div class="modal fade" id="modalResetPassword" tabindex="-1" role="dialog">
    <div class="modal-dialog" style=" max-height:50%;  margin-top: 50px; margin-bottom:50px;">
        <div class="modal-content" style="max-height:50%">
            <form name="ResetPassword" role="form" data-ng-submit="formUser.$valid && vm.saveActiveUser()">
                <div class="modal-header btn-info">
                    <button type="button" class="close" data-close-modal data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title whitetext">Manage User {{vm.activeUser.UserName}}</h4>

                    <div class="modal-body" style="padding-left: 7px; padding-top: 0px; height: 550px;">
                        @Html.Partial("~/Areas/Administration/Views/Shared/_ChangePasswordPartial.cshtml")
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

You are having nested forms ! One in your index.cshtml and one in your partial view. Nested forms are not valid!

Also i see you have some javascript/angular method for your outer form submit

Remove the outerform and everything will work fine (Assuming you do not have any javascript code which is intercepting the submit event and preventing the default form submit behavior.

<div class="modal fade" id="modalResetPassword" tabindex="-1" role="dialog">
    <div class="modal-dialog" style=" max-height:50%;  margin-top: 50px; margin-bottom:50px;">
        <div class="modal-content" style="max-height:50%">           
                <div class="modal-header btn-info">
                    <button type="button" class="close" data-close-modal data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title whitetext">Manage User {{vm.activeUser.UserName}}</h4>

                    <div class="modal-body" style="padding-left: 7px; padding-top: 0px; height: 550px;">
                        @Html.Partial("~/Areas/Administration/Views/Shared/_ChangePasswordPartial.cshtml")
                    </div>
                </div>            
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Also make sure to use the correct action method name in your partial view's Html.BeginForm method call.