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

I want to communicate from my Razor PageModel’s OnPost() method to display the modal upon validation errors for it. Which basically means changing the modal’s css from display none to block. Is there a way for this to be done?

Currently on return Page() the modal is hidden because thats what its css is initially set to, and is normally displayed on the user clicking the button to show it. I marked in my PageModel code where Id like the communication to occur

@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

You can try to use TempData.Here is a demo:

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>
}

handler:

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");
            }
        }

result: