使用 ASP.Net Razor 页面的条件验证

Question

我正在使用 ASP.Net Core 2.2 剃须刀页面和 Bootstrap 4，其中用户为每个家庭成员提供用户信息。相同的表单用于添加成员和编辑，但调用不同的处理程序。如果他们不提供电子邮件，我想显示一个确认它的模式。使用我当前的代码，如果他们提供电子邮件，它会正确提交。如果没有电子邮件，模式会显示，但按“是”什么也不做，调试控制台中也没有任何内容。

 function submitForm() {
        if ($("#email").val() === "") {
            $('#modalNoEmail').modal();
            return false;
        } else {
            document.getElementById("frm1").submit();
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="col-md-8 order-md-1">    
      
        <form method="post" onsubmit="return submitForm()" id="frm1">

            <div class="modal" tabindex="-1" role="dialog" id="modalNoEmail">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"> No Email Specified</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>
                                You have not entered an email address. Confirm proceeding without entering an email address?
                            </p>
                        </div>
                        <div class="modal-footer">
                            @if (Model.Subscriber != null && Model.CountOfSubscribers > 0)
                            {
                                <button class="btn btn-primary btn-secondary btn-block button" type="submit" asp-page-handler="Edit">Yes</button>
                            }
                            else
                            {
                                <button class="btn btn-primary btn-secondary btn-block button" type="submit" asp-page-handler="Add">Yes</button>
                            }
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                        </div>
                    </div>
                </div>
            </div>
            

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label>First name</label>
                    <input asp-for="Subscriber.FirstName" class="form-control">
                    <span asp-validation-for="Subscriber.FirstName" class="text-danger"></span>
                </div>
                <div class="col-md-6 mb-3">
                    <label>Last name</label>
                    <input asp-for="Subscriber.LastName" class="form-control">
                    <span asp-validation-for="Subscriber.LastName" class="text-danger"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label>Email</label>
                    <input asp-for="Subscriber.Email" class="form-control" id="email">
                    <span asp-validation-for="Subscriber.Email" class="text-danger"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    @if (Model.Subscriber != null && Model.CountOfSubscribers > 0)
                    {
                        <button class="btn btn-primary btn-lg btn-block button" type="submit" asp-page-handler="Edit">Save</button>

                    }
                    else
                    {
                        <button class="btn btn-primary btn-lg btn-block button" type="submit" asp-page-handler="Add">Add Member</button>
                    }
                </div>               
            </div>

        </form>
        </div>
    </div>
</div>

Answer 1

也许我读错了，但看起来你有一个无限循环。您正在提交回处理程序，您的电子邮件仍然是一个空字符串，所以它只是再次调用模态窗口。