Razor 通过 PageModel 的 OnPost() 方法传达模态显示

Question

我想通过我的 Razor PageModel 的 OnPost() 方法进行通信，以在出现验证错误时显示模态。这基本上意味着将模式的 css 从显示 none 更改为块。有办法做到这一点吗？

目前在 return Page() 上，模态是隐藏的，因为这是其 css 的初始设置，并且通常显示在用户单击按钮以显示它时。我在我的 PageModel 代码中标记了我希望进行通信的位置

@page
@{
    ViewData["Folder"] = "CourtUser";
    <form asp-action="AddorEditUsersOnHearing" method="post" name="AddorEditUsersOnHearingForm" id="AddorEditUsersOnHearing">

        <div class="container">
            <div class="row">
                <div class="col-md-8 mb-4">
                    <p>Add/Edit Users on  <b style="font-style:italic">@Model.HearingName </b></p>                   
                    <div class="modal" tabindex="-1" role="dialog" id="AddUserForm">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Add User</h5>
                                    <button type="button" onclick="closeAddUserForm()" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="form-group" style="margin-top:5px;padding-left:45px">
                                    <label asp-for="AddUserInput" style="width:100px"></label>
                                    <input asp-for="AddUserInput" class="form-control col-4" id="EmailInputBox" style="display:inline-block" onchange="ValidateEmail()" />
                                    <span style="display:block" asp-validation-for="AddUserInput" class="text-danger"></span>

                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-primary" style="margin:0 auto" asp-page-handler="AddUser" name="AddUserSubmit" value="Yes">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input asp-for="HearingId" type="hidden" />
                    <input asp-for="HearingName" type="hidden" />

                    <button type="button" class="btn btn-primary" onclick="ShowAddUserForm()">Add User</button>
                    <button style="float:right" class="btn btn-primary">Remove User(s)</button>


                </div>
            </div>


        </div>
    </form>

}

<script type="text/javascript">
    function ShowAddUserForm() {
        document.getElementById("AddUserForm").style.display = "block";
    }
    function closeAddUserForm() {
        document.getElementById("AddUserForm").style.display = "none";
    }
</script>

        public IActionResult OnPostAddUser()
        {
            if (ModelState.IsValid)
            {
                if (AddUserInput == null)
                {
                   
                    ModelState.AddModelError("AddUserInput", "Please enter an email");
                     
                    UsersonHearingList = HttpContext.Session.GetObjectFromJson<List<UsersModel>>("UsersonHearingList");
                     
//*****This is where I want to communicate to the view to display the modal.*******
                    return Page();
                }

               
            }
            else
            {
                return RedirectToPage("/Shared/Error");
            }
        }

Answer 1

你可以尝试使用TempData。这里有一个演示：

js:

@section Scripts
{
    <script type="text/javascript">
    $(function () {
        if ("@TempData["Modal"]" == "Display")
        {
            ShowAddUserForm();
        }
    });
    function ShowAddUserForm() {
        document.getElementById("AddUserForm").style.display = "block";
    }
    function closeAddUserForm() {
        document.getElementById("AddUserForm").style.display = "none";
    }
    </script>
}

处理程序：

public IActionResult OnPostAddUser()
        {
            if (ModelState.IsValid)
            {
                if (AddUserInput == null)
                {

                    ModelState.AddModelError("AddUserInput", "Please enter an email");

                    UsersonHearingList = HttpContext.Session.GetObjectFromJson<List<UsersModel>>("UsersonHearingList");

                    //*****This is where I want to communicate to the view to display the modal.*******
                    TempData["Modal"] = "Display";
                    return Page();
                }


            }
            else
            {
                return RedirectToPage("/Shared/Error");
            }
        }

结果：

Razor 通过 PageModel 的 OnPost() 方法传达模态显示

Razor Communicate Display of Modal from PageModel's OnPost() Method

javascript

razor

asp.net-core