Почему передача элемента управления формы в ViewModel не работает в ASP.NET Core 2.0?

Question

Я создал простое приложение ASP.NET Core 2.0, и у меня есть простое представление входа в систему. Я использую ASP.NET Core Identity, что означает, что я использую класс "IdentityUser"

@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>

Как вы можете видеть, я создал модель представления под названием "LoginViewModel", которая будет определять переданные параметры в отправленной форме

LoginViewModel

public class LoginViewModel
    {
        [Required]
        [Display(Name = "User name")]
        public string UserName { get; set; }

        [DataType(DataType.Password)]
        public string Password { get; set; }
    }

Когда пользователь нажимает «Логин» в форме, мои помощники по тегам ASP.NET указывают, что почтовый запрос будет выполнять действие «Вход» в контроллере «Учетная запись»

Вот мое действие "Войти"

        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);
        }

Объект "loginViewModel", который я передаю действию "Вход в систему", имеет значение null, это означает, что он не захватывает данные формы во время отправки пользователем формы.

Есть идеи, что мне здесь не хватает, точно уверен, что это что-то глупое?

Answer 1

Вы генерируете html вручную для своих входных данных, и у них нет атрибута name, поэтому они не публикуют значение при отправке формы.

Измените свои входные данные, чтобы использовать TagHelpers, который будет генерировать правильный HTML, включая атрибут name и атрибуты data-val-* для проверки на стороне клиента

// <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">

Answer 2

Вам не хватает тэгов-помощников на входах !!

<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>

Мои 2 цента:

• Вам не нужно указывать method = "post". Это метод по умолчанию. Также вы можете указать эту область, на случай, если у вас есть несколько контроллеров с одинаковым именем, но они живут в разных областях.

  <form asp-area="" asp-controller="account" asp-action="login">
      ....
  </form>
  

• Когда вы используете тег-помощник на ярлыках, вам не нужно помещать текст между ними. Помощник по тегам сгенерирует это на основе вашей аннотации [Display].

  <label asp-for="UserName"></label>
  

• Вы также можете использовать HTML helpers для генерации текста-заполнителя из [Display], если хотите. Таким образом, вам не нужно жестко кодировать текст в представлении.

  <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>