在 ASP.NET Core MVC 中对模态创建进行客户端验证时如何触发错误消息

Question

尽管验证正在运行，但我在显示基本错误消息时遇到了麻烦（例如防止使用无效值创建项目）。这是代码

这是我的视图（Index.cshtml）

@model PickYaKoi.Models.KoiViewModel

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Table here -->


<!-- Modal -->
<div class="modal fade" id="createKoiModal" tabindex="-1" aria-labelledby="createKoiModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="createForm" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="createKoiModalLabel">Create new Koi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="border p-3 mt-4 modal-body">
                
                    <div class="mb-3">
                        <label asp-for="Koi.Name" for="Name" class="p-0">Name</label>
                        <input asp-for="Koi.Name" id="Name" type="text" name="Name" class="form-control" />
                        <span asp-validation-for="Koi.Name" class="text-danger"></span>
                    </div>
                    <div class="mb-3">
                        <label asp-for="Koi.Description" for="Description" class="p-0">Description</label>
                        <input asp-for="Koi.Description" id="Description" name="Description" type="text" class="form-control" />
                        <span asp-validation-for="Koi.Description" class="text-danger"></span>
                    </div>
                    <div class="mb-3">
                        <label asp-for="Koi.Amount" for="Amount" class="p-0">Amount Left</label>
                        <input asp-for="Koi.Amount" id="Amount" type="text" name="Amount" class="form-control" />
                        <span asp-validation-for="Koi.Amount" class="text-danger"></span>
                    </div>
                    <div class="mb-3">
                        <label asp-for="Koi.Status" for="Status" class="p-0">Choose Status</label>
                        <select asp-for="Koi.Status" id="Status" name="Status" class="form-control">
                            <option value="Available">Available</option>
                            <option value="Unavailable">Unavailable</option>
                        </select>
                    </div>
               
                        <div class="modal-footer">
                            <a href="#" class="btn btn-primary form-control" id="btnSave"> Create </a>
                            <button class="btn btn-outline-secondary form-control" id="btnCancel" data-bs-dismiss="modal">Go back</button>
                        </div>
                    
                </div>
            </form>
        </div>
    </div>
</div>

这是我的模型

public class Koi
{
    [Key]
    public int Id { get; set; }

    [Required]
    [DisplayName("Koi Name")]
    public string Name { get; set; }

    [DisplayName("Koi Description")]
    [MaxLength(255)]
    public string Description { get; set; }

    [Required]
    [Range(0, 9999)]
    public int Amount { get; set; }

    [Required]
    public availableStatus Status { get; set; }

}

我尝试调用partial name =“_ValidationScriptsPartial”，这有助于在Index.cshtml底部启用这些客户端验证。这通常适用于基本的非模态形式；不过，我现在正在使用模态

@section Scripts {
    @{
        <partial name="_ValidationScriptsPartial" />
        
    }

}

在_ValidationScriptsPartial.cshtml中有：

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

Answer 1

您应该将

asp-action

添加到表格中，并且您的

ask-for

和

asp-validation-for

应仅写入属性。你的创建按钮可以这样写

<input type="submit" value="Create" class="btn btn-primary" />

我复制您的代码并完成操作来编写示例。

1.KoiViewModel.cs。如果类名和文件名不一致，就会报错，所以我把它们改成一样

public class KoiViewModel
{
    [Key]
    public int Id { get; set; }
 
    [Required]
    [DisplayName("Koi Name")]
    public string Name { get; set; }
 
    [DisplayName("Koi Description")]
    [MaxLength(255)]
    public string Description { get; set; }
 
    [Required]
    [Range(0, 9999)]
    public int Amount { get; set; }
}

2. 我使用脚手架工具为电影模型生成创建、读取、更新和删除 (CRUD) 页面。 您可以从这个网站了解更多信息：https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-model?view=aspnetcore-8.0&tabs=visual-studio

3. 写下行动。第一个 (HTTP GET) CreateModal 操作方法显示初始创建表单。第二个 ([HttpPost]) 版本处理表单 post。第二个 CreateModal 方法（[HttpPost] 版本）调用 ModelState.IsValid 来 检查createKoiModal是否有验证错误。 您可以从这个网站了解更多信息：https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/validation?view=aspnetcore-8.0

控制器.cs：

public IActionResult CreateModal()
{
     return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> CreateModal([Bind("Id,Name,Description,Amount")] KoiViewModel koiViewModel)
{
     if (ModelState.IsValid)
     {
         _context.Add(koiViewModel);
         await _context.SaveChangesAsync();
         return RedirectToAction(nameof(Index));
     }
     return View(koiViewModel);
}

4. .cshtml

    @model ExceptionDemo.Models.KoiViewModel
        <!-- Bootstrap JS -->
        <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   
        <!-- jQuery -->
        <script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
   
    <!-- Table here -->
   
   
    <!-- Modal -->
   @*<div class="modal" id="createKoiModal" tabindex="-1" aria-labelledby="createKoiModalLabel" >
        <div class="modal-dialog">
            <div class="modal-content"> *@
              <form id="createForm" method="post" asp-action="CreateModal">
                    <div class="modal-header">
                        <h5 class="modal-title" id="createKoiModalLabel">Create new Koi</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
   
                    <div class="border p-3 mt-4 modal-body">
   
                        <div class="mb-3">
                            <label asp-for="Name" for="Name" class="p-0">Name</label>
                            <input asp-for="Name" id="Name" type="text" name="Name" class="form-control" />
                            <span asp-validation-for="Name" class="text-danger"></span>
                        </div>
                        <div class="mb-3">
                            <label asp-for="Description" for="Description" class="p-0">Description</label>
                            <input asp-for="Description" id="Description" name="Description" type="text" class="form-control" />
                            <span asp-validation-for="Description" class="text-danger"></span>
                        </div>
   
   
                            <div class="modal-footer">
                                <input type="submit" value="Create" class="btn btn-primary" />
                                @* <a href="#" class="btn btn-primary form-control" id="btnSave"> Create </a> *@
                                <button class="btn btn-outline-secondary form-control" id="btnCancel" data-bs-dismiss="modal">Go back</button>
                            </div>
   
                    </div>
                </form>
           </div>
        @*</div>
    </div> *@
   

结果是：