Reputation: 45
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">×</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 -->
Upvotes: 0
Views: 132
Reputation: 218962
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">×</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.
Upvotes: 1