如何在 Identity Razor 页面.net core 中使用模式引导

Question

我想使用引导模式在我的网站主页上调用个人 Microsoft 身份的注册或登录。一切都很顺利，直到应用验证并将其从模式页面转移到非模式页面并调用验证

_共享文件夹中的主布局

<a class="model-btn" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="fa fa-user-plus"></i></a>


    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Register</h5>
                    <a class="fa fa-window-close" data-bs-dismiss="modal" aria-label="Close"></a>
                </div>
                <div class="modal-body" id="register-modal">
                </div>
                
            </div>
        </div>
    </div>


    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    <script type="text/javascript">
        function OnComplete() {
            $(".modal").modal("hide");
        }
        $(function () {
            $('a.model-btn').on('click', function () {
                $('.modal-body').load(`/Identity/Account/Register`);
            });
        })
    </script>

在区域/身份/页面/帐户文件夹中注册

@page

@model RegisterModel


@{
    ViewData["Title"] = "Register";
}

<div class="col-lg-12">
    <form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="ajax-contact form-style6" data-ajax="true" data-ajax-update="register-modal" data-ajax-complete="OnComplete">
        <div class="form-group">
            <input type="email" asp-for="Input.Email" placeholder="[email protected]" />
            <span asp-validation-for="Input.Email" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="password" asp-for="Input.Password" placeholder="password" />
            <span asp-validation-for="Input.Password" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="password" asp-for="Input.ConfirmPassword" placeholder="password" />
            <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
        </div>
        <button class="vs-btn" type="submit">Register</button>
        <p class="form-messages"></p>
    </form>
</div>

https://qawithexperts.com/article/asp-net/bootstrap-pop-up-modal-validation-in-aspnet-core-mvc/363 asp.net core 2.1 和 Razor 页面中的模态表单验证

Answer 1

首先，关于验证：jQuery Unobtrusive Validation 依赖 HTML 数据属性来触发和显示验证消息。当您通过 jQuery 的 .load() 方法动态加载内容时，它不会自动触发 jQuery Unobtrusive Validation。要解决此问题，您需要在加载表单后手动触发验证。

其次，当注册过程完成时，您将关闭该模式。但是，如果存在验证错误，模式应保持打开状态，以允许用户更正其输入。

以下是修改代码的方法：

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
    $(function () {
        // Function to load registration form into modal
        $('a.model-btn').on('click', function () {
            $('.modal-body').load(`/Identity/Account/Register`, function() {
                // Trigger jQuery Unobtrusive Validation after loading form
                $.validator.unobtrusive.parse("#registerForm");
            });
        });

        // Function to handle registration completion
        function onRegisterComplete() {
            // Check if there are any validation errors
            if ($('#registerForm').valid()) {
                // If no errors, hide the modal
                $(".modal").modal("hide");
            }
        }

        // Register completion event handler
        $(document).on('submit', '#registerForm', function (e) {
            e.preventDefault(); // Prevent default form submission
            var form = $(this);
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: form.serialize(),
                success: function (response) {
                    // Update modal content with response
                    $('.modal-body').html(response);
                    // Trigger jQuery Unobtrusive Validation on updated form
                    $.validator.unobtrusive.parse("#registerForm");
                    // Handle completion
                    onRegisterComplete();
                }
            });
        });
    });
</script>