How can i prevent page refresh (reload) while pressing login button in asp.net mvc identity? - asp.net-mvc

Question

So folks, i just created a _Login partial instead of Login view and rendered that partial view in my _Layout. The partial view is shown in a Modal, until yet everything seems OK! But whenever i just click the Login (Sign In) button the page reloads and nothing happens although i expect an error like the E-mail field cannot be empty or the user does not exist but surprisingly nothing happens and the page refreshes.
Here is the code for the _Login partial.
#model Hire.af.WebUI.Models.LoginViewModel
<div class="modal-body">
<!--Social Media Login Links-->
<div class="form-group row login-socical">
<div class="col-sm-9 col-sm-offset-3">
<div class="button_socical fb">
<i class="fa fa-facebook-square"> </i>
<em class="fa-facebook-square">Login with Facebook</em>
</div>
<div class="button_socical gg">
<i class="fa fa-google-plus"> </i>
<em class="fa-google-plus">Login with Google</em>
</div>
<div class="button_socical linkedin">
<i class="fa fa-linkedin-square"> </i>
<em class="fa-linkedin-square">Login with LinkedIn</em>
</div>
</div>
</div>
<!--Login Form-->
<form class="noo-ajax-login-form form-horizontal">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<hr />
#Html.ValidationSummary(true, "", new { #class = "col-sm-3" })
<div class="form-group row">
#Html.LabelFor(m => m.Email, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.TextBoxFor(m => m.Email, new { #class = "log form-control", #placeholder="Email OR Username" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(m => m.Password, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.PasswordFor(m => m.Password, new { #class = "pwd form-control", #placeholder="Password" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
</div>
</div>
<!--Remember Me Checkbox-->
<div class="form-actions form-group text-center">
<button type="submit" class="btn btn-primary">Sign In</button>
<div class="login-form-links">
<span><i class="fa fa-question-circle"></i> Forgot Password?</span>
<span>
Don't have an account yet?
<a href="#" class="member-register-link" data-rel="registerModal">
#Html.ActionLink("Register Now", "Register") <i class="fa fa-long-arrow-right"></i>
</a>
</span>
</div>
</div>
#* Enable this once you have account confirmation enabled for password reset functionality
<p>
#Html.ActionLink("Forgot your password?", "ForgotPassword")
</p>*#
}
</form>
</div>
and below is how i rendered this partial in my _Layout.
<div class="memberModalLogin modal fade" id="userloginModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-member">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Login</h4>
</div>
<!--Login Partial Goes Here-->
#Html.Partial("_Login")
</div>
</div>
</div>
Any help would be appreciated.

Answer 1

You have nested forms which is invalid html and not supported. Remove the outer form from your partial view
<form class="noo-ajax-login-form form-horizontal"> // remove this and its closing tag
#using (Html.BeginForm(....