如何在无效的表单字段中显示错误消息？

Question

我会尽量简短。这是我的问题：

在我的 asp.net 项目中，我有一个将数据发送到 MongoDB 的表单页面。当我填写所有表格时效果很好。但是，现在我正在尝试对表单进行一些验证，以警告用户他忘记了一个没有填写的字段。 但是，当我点击“提交”时，我的页面会返回一个空白 html 中的 json 字段。

有人知道问题出在哪里吗？

我从asp.net开始，所以我不知道发生了什么。

这是我的代码：

我的模型“CadastrarModel”

public class CadastrarModel 
    {
        public string Nome { get; set; }

        [Required(ErrorMessage = "Campo obrigatório!")]
        public string Sexo { get; set; }
        
        [Required(ErrorMessage = "Campo obrigatório!")]
        public string TipoPessoa {get;set;}

        [Required(ErrorMessage = "Campo obrigatório!")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
        public DateTime DataNascimento { get; set; }

        [Required(ErrorMessage = "Campo obrigatório!")]
        public CadastrarEnderecoModel EnderecoModel { get; set; }
    }

我的控制器“CadastrarController”

public class CadastrarController : Controller
    {
        private readonly IServiceRepository _service;
        
        public CadastrarController(IServiceRepository service)
        {
            _service = service;
        }

        [Route("/Cadastrar")]
        public IActionResult Cadastrar()
        {
            return View();    
        }

        [HttpPost]
        [Route("/Cadastrar")]
        [ValidateAntiForgeryToken]
        public IActionResult Cadastrar([FromForm] CadastrarModel cadastrarModel)
        {
            try 
            {
                if (!ModelState.IsValid)
                {
                    return View(cadastrarModel);
                }
                _service.Adicionar(cadastrarModel);
                return View("Views/Home/Index.cshtml");
            }
            catch (Exception)
            {
                return BadRequest();
            }
        }
    }

我的 cshtml 页面“Cadastrar.cshtml” - 路径 /Shared/Cadastrar.cshtml

@using (Html.BeginForm("Cadastrar", "Cadastrar", FormMethod.Post))
{
  @Html.AntiForgeryToken()
  <div class="w3-row-padding w3-margin-bottom div-half">
    <div style="width: 50%; margin-left: 1%; margin-top: 0px;">
      @Html.ValidationSummary()
      <fieldset class="form-group"></fieldset>
      <fieldset class="form-group">
        <label for="TipoPessoa">Tipo</label>
        <div class="form-group">
          <div class="form-check">
            <label asp-for="TipoPessoa" class="form-check-label">
              @Html.RadioButtonFor(p => p.TipoPessoa, "Vacinado", new { @class = "form-check-input"})
              Vacinado
              @Html.ValidationMessageFor(p => p.TipoPessoa)
            </label>
          </div>
          <div class="form-check">
            <label asp-for="TipoPessoa" class="form-check-label">
              @Html.RadioButtonFor(p => p.TipoPessoa, "Infectado", new { @class = "form-check-input"})
              Infectado
              @Html.ValidationMessageFor(p => p.TipoPessoa)
            </label>
          </div>
        </div>
        <div class="form-group">
          <label asp-for="Nome">Nome</label>
            @Html.TextBoxFor(p => p.Nome, new {@class="form-control"})
            @Html.ValidationMessageFor(model => model.Nome, "This field cannot be empty", new { @class = "text-danger"})
        </div>
        <div class="form-group">
          <label asp-for="DataNascimento">Data de Nascimento</label>
          <div class="form-date">
            @Html.EditorFor(p => p.DataNascimento, new { @class = "dtn"})
            @Html.ValidationMessageFor(model => model.DataNascimento)
          </div>
        </div>
        <div class="form-group">
          <div class="form-check">
            <label class="form-check-label">
              @Html.RadioButtonFor(p => p.Sexo, "Masculino", new { @class = "form-check-input"})
              @Html.ValidationMessageFor(model => model.Sexo)
              Masculino
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              @Html.RadioButtonFor(p => p.Sexo, "Feminino", new { @class = "form-check-input"})
              @Html.ValidationMessageFor(model => model.Sexo)
              Feminino
            </label>
          </div>
        </div>
        <fieldset>
            <button type="submit" class="btn btn-primary">Submit</button>
          </fieldset>
      </fieldset>
    </div>
  </div>    
}

ModelState无效时的结果页面：

result-page

Answer 1

你的cshtml页面"Cadastrar.cshtml"路径不对，应该在文件夹：/View/Cadastrar/xxxx下，像这样：

所以你需要做的是：

1：在您的View 文件夹中创建一个名为Cadastrar 的新文件夹。

2：更改您的操作名称，使其与您的控制器名称不同，例如我的屏幕截图中的CreateCadastrar。

public class CadastrarController : Controller
{
    [Route("/Cadastrar")]
    public IActionResult CreateCadastrar()
    {
        return View();
    }

    [HttpPost]
    [Route("/Cadastrar")]
    [ValidateAntiForgeryToken]
    public IActionResult CreateCadastrar([FromForm] CadastrarModel cadastrarModel)
    {
        try
        {
            if (!ModelState.IsValid)
            {
                return View(cadastrarModel);
            }
            return View("Views/Home/Index.cshtml");
        }
        catch (Exception)
        {
            return BadRequest();
        }
    }
}

3：在您的文件夹中创建一个与您的操作同名的视图。

4：更改表单中的网址，如：

@using (Html.BeginForm("CreateCadastrar", "Cadastrar", FormMethod.Post))

测试结果：