Validate Single Model on submit In MVC5 - asp.net-mvc

Question

Let me explain a bit what I am trying to achieve . I have a View which has to Partial Views in it and each Partial Views have two different models .
1- LoginViewModel
2- RegisterViewModel
All i want to achieve is when the Login Post action occurs only Login Model to be returned to the Partial View with All validation messages if any field is left empty .
I am having a problem when I return the same view when there is any error in validating the fields .
Here is the piece of code
Account Controller:
//
// POST: /Account/Login
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult Login(LoginViewModel model)
{
if (ModelState.IsValid)
{
var user = User.SelectByUserNameAsync(model.UserName,model.Password);
if (user != null)
{
// var x = User.SignInAsync(model);
return Redirect("Home/Index");
}
else
{
ViewBag.Model = new RegisterViewModel();
ModelState.AddModelError("", "Invalid username or password.");
}
}
// If we got this far, something failed, redisplay form
return View(model);
}
LoginView :
#{
Layout = "~/Views/Shared/_LoginLayout.cshtml";
}
<section id="page-title">
<div class="container clearfix">
<h1>My Account</h1>
<ol class="breadcrumb">
<li>Home</li>
<li>Sign-Up</li>
<li class="active">Login</li>
</ol>
</div>
</section><!-- #page-title end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<!--Login PartialView-->
#{Html.RenderPartial("_LoginBox");}
<!--Login PartialView Ends-->
<!--Register PartialView-->
#{Html.RenderPartial("_Register");}
<!--Register PartialView Ends-->
</div>
</div>
</section><!-- #content end -->
but when the page returns if any error is occured it shows me the error
The model item passed into the dictionary is of type 'ConnexMi.Models.LoginViewModel', but this dictionary requires a model item of type 'ConnexMi.Models.RegisterViewModel'.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.InvalidOperationException: The model item passed into the dictionary is of type 'ConnexMi.Models.LoginViewModel', but this dictionary requires a model item of type 'ConnexMi.Models.RegisterViewModel'.
Source Error:
Line 28:
Line 29: <!--Register PartialView-->
Line 30: #{Html.RenderPartial("_Register");}
Line 31:
Line 32: <!--Register PartialView Ends-->
Can you please tell me what I am doing wrong in this code ? Thanks

Answer 1

You will need a view model that combines both the Login and Register view models. For example
View models
public class LoginVM
{
[Display(Name = "Email")]
[Required(ErrorMessage = "Please enter an email address")]
[DataType(DataType.EmailAddress)]
[EmailAddress]
public string Email { get; set; }
[Required(ErrorMessage = "Please enter a password")]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
}
public class RegisterVM
{
// properties for email, password and confirm password
}
public class LoginRegisterVM
{
public LoginVM Login { get; set; }
public RegisterVM Register { get; set; }
}
Controller (assume Account)
public ActionResult Index()
{
LoginRegisterVM model = new LoginRegisterVM();
return View(model);
}
[HttpPost]
public ActionResult Login([Bind(Prefix="Login")]LoginVM loginModel)
{
if (!ModelState.IsValid)
{
LoginRegisterVM model = new LoginRegisterVM();
model.Login = loginModel;
return View("Index", model);
}
// Login and redirect
}
[HttpPost]
public ActionResult Register([Bind(Prefix="Register")]RegisterVM registerModel)
{
if (!ModelState.IsValid)
{
LoginRegisterVM model = new LoginRegisterVM();
model.Register = registerModel;
return View("Index", model);
}
// Register and redirect
}
View
#model LoginRegisterVM
#using(Html.BeginForm("Login", "Account", FormMethod.Post)
{
#Html.LabelFor(m => m.Login.Email)
#Html.TextBoxFor(m => m.Login.Email)
#Html.ValidationMessageFor(m => m.Login.Email)
... // other properties of login model
<input type="submit" value="Login" />
}
#using(Html.BeginForm("Register", "Account", FormMethod.Post)
{
// properties of register model
<input type="submit" value="Register" />
}