Страницы Razor ядра .NET - добавление класса CSS к элементу ввода, когда состояние модели недопустимо - PullRequest
Новая
       24

Страницы Razor ядра .NET - добавление класса CSS к элементу ввода, когда состояние модели недопустимо

0 голосов
/ 03 мая 2019

Я новичок в бритвенных страницах .NET core 2.0 и мне трудно решить мою проблему чистым способом.

Я создаю простую форму входа в систему, в которой пользователь должен ввести свой адрес электронной почты и пароль. Я использую модель со свойствами для электронной почты и пароля с соответствующими аннотациями данных. 

public class AuthorizeOrganizationCommand
{
    [Required(ErrorMessage ="Please fill in your email")]
    public string Email { get; set; }

    [Required(ErrorMessage ="Please fill in your password")]
    public string Password { get; set; }
}

Моя страничная модель выглядит так: 

public class IndexModel : PageModel
{
    public IndexModel()
    {
    }

    [BindProperty]
    public AuthorizeOrganizationCommand Command { get; set; }

    public void OnGet()
    {
    }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        // Code to validate the credentials

        return RedirectToPage("/Index");
    }
}

Когда мой ModelState недействителен, я хочу визуализировать сообщение об ошибке. Это прекрасно работает со следующим кодом: 

<div class="form-group">
    <label class="form-label" asp-for="Command.Email">Email</label>
    <input type="text" class="form-control" asp-for="Command.Email">
    <small class="invalid-feedback d-block">
        <span asp-validation-for="Command.Email"></span>
    </small>
</div>

Кроме того, я хочу добавить класс css 'is-invalid' в мой элемент ввода, когда состояние моей модели недопустимо для этого конкретного свойства. Это приводит к красному элементу ввода (начальная загрузка 4). Я заставил это работать со следующим кодом: 

<input type="text" class="form-control @(ModelState["Command.Email"]?.ValidationState == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid ? "is-invalid": string.Empty)" asp-for="Command.Email">

Если честно, мне не нравится это решение. Жестко закодированный «Command.Email» нарушает код, когда переименование выполняется для имени или свойства экземпляра класса. Попробовав несколько вещей, я не нашел хорошего и чистого способа решить эту проблему.

У меня вопрос: есть ли лучшая практика для достижения того, что я делаю?

Спасибо.

1 Ответ

0 голосов
/ 03 мая 2019

Взгляните на ненавязчивый jQuery для проверки интерфейса. Вы сможете использовать jQuery для проверки правильности формы, а затем применить класс CSS по своему усмотрению.

...