如何在 ASP.NET Core 6 Web 应用程序中的警报框中显示验证摘要错误消息？

Question

“我正在开发 ASP.NET Core 6 应用程序，我需要在警报框中显示验证摘要数据。我想在用户友好的警报框中显示任何验证错误或摘要信息。我该如何实现这在 ASP.NET Core 6 中吗？”

这是我的代码...

<div class="container">
    <form class="w-100" asp-controller="Home" asp-action="Index" method="post">
        <div asp-validation-summary="All" ></div>
        <div class="d-flex">
            <div>
                <label class="form-label" asp-for="Name">Username</label>
                <input asp-for="Name" class="form-control" class="w-100" />
                @* <small><span asp-validation-for="Name"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="password">Password</label>
                <input asp-for="password" class="form-control" class="w-100" />
                @* <small><span asp-validation-for="password"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="ConfirmPassword">Confirm Password</label>
                <input asp-for="ConfirmPassword" class="form-control" class="w-100" />
                @* <small><span asp-validation-for="ConfirmPassword"></span></small> *@
            </div>
        </div>
        <div class="d-flex">
            <div>
                <label class="form-label" asp-for="Age">Age</label>
                <input asp-for="Age" class="form-control" class="w-100" />
                @* <small><span asp-validation-for="Age"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="Batch">Batch</label>
                <input asp-for="Batch" class="form-control" class="w-100"/>
                @* <small><span asp-validation-for="Batch"></span></small> *@
            </div>
        </div>
        <div class="d-flex">
            <div>
                <label class="form-label" asp-for="Email">E-mail</label>
                <input asp-for="Email" class="form-control" class="w-100"/>
                @* <small><span asp-validation-for="Email"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="YourWebsite">You website name</label>
                <input asp-for="YourWebsite" class="form-control" class="w-100"/>
                @* <small><span asp-validation-for="YourWebsite"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="Phone">Enter mobile no.</label>
                <input asp-for="Phone" class="form-control" class="w-100"/>
                @* <small><span asp-validation-for="Phone"></span></small> *@
            </div>
        </div>
        <div>
            <label class="form-label" asp-for="yourAddress"></label>
            <input asp-for="yourAddress" class="form-control" class="w-100" />
            @* <small><span asp-validation-for="yourAddress"></span></small> *@
        </div>

        <br />
        <br />
        <div>
            <button class="btn btn-danger text-white">submit now !</button>
        </div>
    </form>
</div>

这是我的模型课...

    public class CandidateModel
    {
        [Required(ErrorMessage ="field should be filled !")]
        public string Name { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [Range(minimum:18, maximum:35,ErrorMessage ="Applicable for age 18 to 35")]
        public int? Age { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [Range(minimum:2015, maximum:2023, ErrorMessage ="only for batch 2015 to 2023")]
        public string Batch { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [RegularExpression("^([0-9a-zA-Z]([-\\.\\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\\w]*[0-9a-zA-Z]\\.)+[a-zA-Z]{2,9})$",ErrorMessage ="invalid e-mail")]
        public string Email { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [RegularExpression("(?=^.{8,}$)((?=.*\\d)|(?=.*\\W+))(?![.\\n])(?=.*[A-Z])(?=.*[a-z]).*$", ErrorMessage = "write atleast : one-digit, one-small character, one-capital letter, one-special character and 8-character long ")]
        public string password { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [Compare("password",ErrorMessage ="please confirm your password")]
        public string ConfirmPassword { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [Url(ErrorMessage ="enter correct url please !")]
        public string YourWebsite { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [MaxLength(10,ErrorMessage ="only 10 number allowed")]
        [MinLength(10,ErrorMessage = "only 10 number allowed")]
        public string Phone { get; set; }


        [Display(Name="your Address please")]
        [Required(ErrorMessage = "field should be filled !")]
        public string yourAddress { get; set; }
    }
}

这是我的控制器...

public IActionResult Index()
{
    return View();
}

[HttpPost]
public IActionResult Index(CandidateModel cmd)
{
    if (ModelState.IsValid)
    {
        ModelState.Clear();
    }
        
    return View();
}

我期待验证错误消息显示在警报框中。

Answer 1

根据你的描述，我建议你可以使用swal来实现你的要求。

您可以添加以下脚本并修改验证摘要 div，如下所示：

脚本：

 @section Scripts {

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>

    <script>
        function showAlert(title, message, icon, buttonLabel) {
            Swal.fire({
                title: title,
                html: message,
                icon: icon,
                confirmButtonText: buttonLabel
            });
        }
    </script>
    @if (!ViewData.ModelState.IsValid)
    {
        <script>
            // Get validation summary HTML
            var validationSummaryHtml = $('#warnning').html();

            // Display validation summary using SweetAlert
            showAlert("Validation Error", validationSummaryHtml, "error", "OK");
        </script>
    }
}

查看页面修改验证摘要div：

    <div id="warnning" asp-validation-summary="All" style="display:none"></div>