Razor Page中PageModel的OnPost方法验证失败时如何触发显示模态框

以下是两种常用的无额外依赖实现方式，优先推荐第一种：

方案1：PageModel新增属性绑定（推荐） #

原理是通过PageModel的公共属性传递显示标识，视图渲染时直接根据标识控制模态框状态

步骤1：修改PageModel代码 #

首先在你的PageModel类中新增一个布尔类型的公共属性：

// 新增属性，默认不显示模态框
public bool ShowAddUserModal { get; set; } = false;

public IActionResult OnPostAddUser()
{
    if (ModelState.IsValid)
    {
        if (AddUserInput == null)
        {
            ModelState.AddModelError("AddUserInput", "Please enter an email");
            UsersonHearingList = HttpContext.Session.GetObjectFromJson<List<UsersModel>>("UsersonHearingList");
            // 给属性赋值，标记需要显示模态框
            ShowAddUserModal = true;
            return Page();
        }
    }
    else
    {
        return RedirectToPage("/Shared/Error");
    }
    // 其他业务逻辑
    return RedirectToPage();
}

步骤2：修改Razor视图控制模态框显示 #

两种修改方式二选一即可：

• 方式A：直接控制模态框的style属性

<!-- 把原来的模态框div的style改成动态渲染 -->
<div class="modal" tabindex="-1" role="dialog" id="AddUserForm" style="display:@(Model.ShowAddUserModal ? "block" : "none")">

• 方式B：页面加载时调用已有的显示方法（更适配你现有js代码）
  在页面的script标签末尾新增以下代码：

window.addEventListener('load', function() {
    // 后端标记需要显示时调用现有显示方法
    if(@Model.ShowAddUserModal.ToString().ToLower()) {
        ShowAddUserForm();
    }
});

方案2：TempData传值（适配重定向场景） #

如果后续有重定向后仍要显示模态框的需求，可以用TempData存储标识，用法和方案1类似：

1. PageModel中赋值：TempData["ShowAddUserModal"] = true;
2. 视图中判断：

@if(TempData["ShowAddUserModal"] as bool? == true)
{
    <script>
        window.addEventListener('load', ShowAddUserForm);
    </script>
}

注意事项 #

如果你使用的是Bootstrap等框架的模态框组件，不要直接修改display属性，调用框架提供的显示方法即可，比如Bootstrap的用法是$('#AddUserForm').modal('show')。

内容的提问来源于stack exchange，提问作者user9758771