ModelState.AddModelError not displaying error in view - ASP.NET - asp.net

Question

I have been banging my head against the wall trying to solve this issue.
I have this view controller
public class LoginController : Controller
{
public ActionResult Index(LoginClass model)
{
return View(model);
}
[HttpPost]
public ActionResult Login(LoginClass model, string ReturnUrl)
{
if (!this.ModelState.IsValid)
{
return this.View(model);
}
if (ModelState.IsValid)
{
if (Membership.ValidateUser(model.UserName, model.Password))
{
FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
if (Url.IsLocalUrl(ReturnUrl) && ReturnUrl.Length > 1 && ReturnUrl.StartsWith("/")
&& !ReturnUrl.StartsWith("//") && !ReturnUrl.StartsWith("/\\"))
{
return Redirect(ReturnUrl);
}
else
{
return RedirectToAction("Index", "Home");
}
}
else
{
ModelState.AddModelError(string.Empty, "The user name or password provided is incorrect");
}
}
return RedirectToAction("Index", "Login", model);
}
public ActionResult Logout()
{
FormsAuthentication.SignOut();
return RedirectToAction("Index", "Home");
}
}
and here is my view:
<section id="login">
<div class="container">
<form action="~/Login/Login" id="Login" method="post">
<div class="row">
<div class="col-md-12">
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username" class="form-control" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<input type="submit" id="submit" name="submit" value="Login" class="btn btn-default" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<label for="password">Remember Me?</label>
<input type="checkbox" id="chkPersist" name="chkPersist" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
#Html.ValidationSummary()
</p>
</div>
</div>
</form>
</div>
</section>
My issue is that my error message is not appearing when I enter the wrong username and password. Why is not displaying?

Answer 1

The problem is with the last line in your Login method. You are calling RedirectToAction instead of View. This has the consequence that you lose all your view specific state including the model state and validation errors that you built up in your Login Action. You can change your Login method like so (I simplified it a little), really the only change is replacing RedirectToAction("Index", "Login", model) with View(model) on the last line.
If you do want to redirect in the event of authentication failure and you did want to use RedirectToAction then see my other answer I posted here.
[HttpPost]
public ActionResult Login(LoginClass model, string ReturnUrl)
{
if (!this.ModelState.IsValid)
return this.View(model);
if (Membership.ValidateUser(model.UserName, model.Password))
{
FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
if (Url.IsLocalUrl(ReturnUrl) && ReturnUrl.Length > 1 && ReturnUrl.StartsWith("/")
&& !ReturnUrl.StartsWith("//") && !ReturnUrl.StartsWith("/\\"))
{
return Redirect(ReturnUrl);
}
else
{
return RedirectToAction("Index", "Home");
}
}
ModelState.AddModelError(string.Empty, "The user name or password provided is incorrect");
return this.View(model); // return to the same view to show your error message
// return RedirectToAction("Index", "Login", model); // do not redirect
}

Answer 2

You need to add a placeholder by using the Html Helper function to display the message.
<div>#Html.ValidationMesssage("KeyName")</div>
to your view so that you can display the validation message.
The KeyName comes from controller
ModelState.AddModelError("KeyName", "The user name or password provided is incorrect");
Also you may need to ensure client side validation is enabled in your web.config.(usually they are)
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>