Проверка формы в .NET Core MVC

Я пытаюсь добавить некоторую проверку формы в несколько моих полей. У меня есть раскрывающийся список и поле ввода. Оба входа нуждаются в проверке. Моя цель - отобразить пользователю сообщение об ошибке, если одно из них недействительно. Форма позволяет пользователю создать копию существующей книги с новым автором. В раскрывающемся списке есть список книг из базы данных, и пользователь вводит имя нового автора в текстовое поле. Кнопка отправки создает копию существующей книги с новым автором.

Используя jQuery, jquery.validate.js и jquery.validate.unobtrusive.js, мне удалось отобразить сообщение об ошибке для пользователя, но проверка происходит сразу после загрузки страницы, поэтому сообщения об ошибках появляются, как только загрузка страницы. (Возможно, мне понадобится скрытое поле или мне придется изменить обработчик HttpGet).

Прямо сейчас, если пользователь попытается отправить форму, не выбрав книгу и/или не введя имя автора, маршрут останется прежним, но форма исчезнет, ​​и на экране появится объект json со статусом 400 и он говорит: «Обязательно поле bookName» и «Обязательно поле автора». Мне просто нужен красный текст рядом с полями ввода, который говорит, что их нельзя оставлять пустыми, как я могу это сделать? Спасибо!

Моя модель:

public int ID { get; set; }
[Required]
public string bookName { get; set; }
[Required]
public string Author { get; set; }

Мой cshtml:

<form method="post" asp-controller="Index" asp-action="Index" role="post">
    <div class="form-group">
        <label asp-for="bookName"></label>
        <select name="bookName" asp-items="@(new SelectList(ViewBag.message, "ID", "bookName"))">
</select>
        <span asp-validation-for="bookName">Please select a book.</span>
    </div>
    <div class="form-group">
        <label asp-for="Author"></label>
        <input asp-for="Author" class="form-control" />
        <span asp-validation-for="Author">Please type in the author's name.</span>
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

Мой контроллер:

[HttpGet("[action]")]
[Route("/Index")]
[Produces("application/json")]
public IActionResult Index()
{
  return View();
}

[HttpPost("[action]")]
[Route("/Index")]
[Produces("application/json")]
public async Task<IActionResult> Index([FromForm] bookModel model)
{
  if(ModelState.IsValid)
   {
      //do stuff
      return View(model)
   }
   else
   {
     //display an error message & remain on same page
   }
}

Атрибут [Produces("application/json")]не нужен, если ожидается, что ваш контроллер вернет html из представления. Поэтому этот атрибут следует удалить.

Также ваша проверка spanдолжна иметь атрибут , который у asp-validation-forвас есть, as-validation-forкоторый не будет правильно связывать сценарий проверки.

Правильный:

<span asp-validation-for="bookName">Please select a book.</span>

Исправление этого должно привести к тому, что сообщения об ошибках будут отображаться только после того, как элемент управления вводом потерял фокус.

Вы хотите показать сообщение подтверждения при нажатии кнопки? Если да, вы можете изменить сообщение об ошибке в модели и удалить сообщение в своем <span asp-validation-for=xxx></span>Вот демо-версия:

Модель:

public class bookModel
    {
        public int ID { get; set; }
        [Required(ErrorMessage = "Please select a book.")]
        public string bookName { get; set; }
        [Required(ErrorMessage = "Please type in the author's name.")]
        public string Author { get; set; }
    }

Контроллер:

public class BookController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.message = addMessage();

            return View();
        }
       [HttpPost]
        public ActionResult Index(bookModel model) {
            ViewBag.message = addMessage();
            return View();
        }
        public static List<SelectListItem> addMessage() {
            List<SelectListItem> list = new List<SelectListItem>();
            SelectListItem s1 = new SelectListItem { Text = "book1", Value = "b1" };
            SelectListItem s2 = new SelectListItem { Text = "book2", Value = "b2" };
            SelectListItem s3 = new SelectListItem { Text = "book3", Value = "b3" };
            list.Add(s1);
            list.Add(s2);
            list.Add(s3);
            return list;
        }

       
    }

Вид:

@{
    ViewData["Title"] = "Index";
}
@model bookModel
<h1>Index</h1>
<form method="post">
    <div class="form-group">
        <label asp-for="bookName"></label>
        <select asp-for="bookName" asp-items="@ViewBag.message"></select>
        <span asp-validation-for="bookName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Author"></label>
        <input asp-for="Author" class="form-control" />
        <span asp-validation-for="Author" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

Результат: