Why passing a form control to a ViewModel is not working in ASP.NET Core 2.0? - asp.net-core-mvc

Question

I built a simple ASP.NET Core 2.0 application and I have a simple login view. I am using ASP.NET Core Identity which means I am using "IdentityUser" class
#model LoginViewModel
<h2 class="my-4 text-center text-lg-left">Before contacting us, please log in or
<a asp-action="Register" asp-controller="Account"> register!</a></h2>
<form asp-action="Login" asp-controller="Account" method="post" role="form">
<!-- To show form error after submission -->
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserName">User Name</label>
<input type="text" class="form-control" placeholder="Username">
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password">Password</label>
<input type="password" class="form-control" placeholder="Password">
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Log In!</button>
</form>
As you can see, I created a view model called "LoginViewModel" which is going to detect the passed parameters in the submitted form
LoginViewModel
public class LoginViewModel
{
[Required]
[Display(Name = "User name")]
public string UserName { get; set; }
[DataType(DataType.Password)]
public string Password { get; set; }
}
When a user hits "Login" on the form, my ASP.NET tag helpers indicates that the post request is going to hit the "Login" action within the "Account" controller
Here is my "Login" Action
private readonly SignInManager<IdentityUser> _signInManager;
private readonly UserManager<IdentityUser> _userManager;
public AccountController(SignInManager<IdentityUser> signInManager, UserManager<IdentityUser> userManager)
{
_signInManager = signInManager;
_userManager = userManager;
}
[HttpGet]
public IActionResult Login()
{
return View(new LoginViewModel());
}
[HttpPost]
public async Task<IActionResult> Login(LoginViewModel loginViewModel)
{
if (!ModelState.IsValid)
{
return View(loginViewModel);
}
var user = await _userManager.FindByNameAsync(loginViewModel.UserName);
if (user != null)
{
var result = await _signInManager.PasswordSignInAsync(user, loginViewModel.Password, false, false);
if (result.Succeeded)
{
return RedirectToAction("Index", "Home");
}
}
ModelState.AddModelError("", "User name/password not found");
return View(loginViewModel);
}
The object "loginViewModel" that I am passing to the "Login" action is null, this means that it is not grabbing the form data on the time the user submits the form.
Any idea what I am missing here, pretty sure it is something stupid?

Answer 1

You're missing the tag helpers on the inputs!!
<div class="form-group">
<label asp-for="UserName">User Name</label>
<input type="text" class="form-control" placeholder="Username"
asp-for="UserName" /> <!-- You're missing this -->
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
My 2 cents:
You don't need to indicate the method="post". That's the default method. Also you might want to specify the area as well, just in case you have multiple controllers with the same name but live in different areas.
<form asp-area="" asp-controller="account" asp-action="login">
....
</form>
When you use tag helper on labels, you don't need to put the text in between. The tag helper will generate that based on your [Display] annotation.
<label asp-for="UserName"></label>
You can use HTML helpers to generate the placeholder text from [Display] as well if you want. That way you don't need to hard code the text on the view.
<div class="form-group">
<label asp-for="UserName"></label>
<input type="text" class="form-control" asp-for="UserName"
placeholder="#Html.DisplayNameFor(x => x.UserName)" />
</div>

Answer 2

You are generating manual html for you inputs and they do not have a name attribute so they do not post a value when the form is submitted.
Change your inputs to use the TagHelpers, which will generate the correct html, including the name attribute and the data-val-* attributes for client side validation
// <input type="text" class="form-control" placeholder="Username">
<input asp-for="UserName" class="form-control" placeholder="Username">
// <input type="password" class="form-control" placeholder="Password">
<input asp-for="Password" class="form-control" placeholder="Username">