ASP.NET Razor Pages 布局中实现注册Modal弹窗的问题咨询

Razor Pages项目不需要为Layout布局页单独配置控制器，你只需要提供一个可访问的接口返回弹窗的局部视图内容即可，以下是两种可行实现方案，同时附现有代码的修正点：

方案1：使用Razor Pages原生处理程序（无需引入控制器） #

Razor Pages支持命名处理程序，可以直接返回局部视图，无需额外创建MVC控制器：

1. 在Pages目录下新建一个共用的Razor Page，命名为ModalService.cshtml，对应后端ModalService.cshtml.cs代码如下：

using Microsoft.AspNetCore.Mvc.RazorPages;
using Models;

public class ModalServiceModel : PageModel
{
    // 命名处理程序，对应请求参数handler=AddEditUser
    public IActionResult OnGetAddEditUser()
    {
        AddEditUserModalM usr = new();
        return Partial("AddEditUserModal", usr);
    }
}

2. 修改你的JS请求地址：

function CreateUser(e) {
    e.preventDefault();
    // 改为Razor Page处理程序地址
    var url = "/ModalService?handler=AddEditUser";
    $.ajax({
        type: "GET",
        url: url,
        success: function (data) {
            $("#modalplace").html(data);
            // Bootstrap5 modal调用兼容写法
            new bootstrap.Modal(document.getElementById('addUser')).show();
        }
    })
}

方案2：保留MVC控制器实现 #

Razor Pages项目默认兼容MVC控制器，只需做简单配置即可使用你原有控制器逻辑：

1. 确认Program.cs中已注册控制器服务与路由：

var builder = WebApplication.CreateBuilder(args);
// 加这行注册控制器服务
builder.Services.AddControllersWithViews();

builder.Services.AddRazorPages();

var app = builder.Build();

// ... 其他中间件配置

app.UseAuthorization();
// 加这行映射控制器路由
app.MapDefaultControllerRoute();
app.MapRazorPages();

app.Run();

2. 在项目根目录新建Controllers文件夹，创建AccountController.cs，放入你的控制器方法：

using Microsoft.AspNetCore.Mvc;
using Models;

public class AccountController : Controller
{
    [HttpGet]
    public IActionResult AddEditUserModal()
    {
        AddEditUserModalM usr = new();
        return Partial("AddEditUserModal", usr);
    }
}

3. JS请求地址改为/Account/AddEditUserModal即可正常请求。

现有代码问题修正 #

你现有代码存在以下问题会导致弹窗无法正常显示，需要同步修改：

• 弹窗HTML类名拼写错误：原代码<div class="model fade" id="addUser">改为<div class="modal fade" id="addUser">
• Bootstrap5属性不兼容：关闭按钮的data-dismiss="modal"改为data-bs-dismiss="modal"，Bootstrap5已废弃旧版data属性
• 删除Layout中重复引入的jQuery、Bootstrap资源：你同时引入了CDN版本和本地lib版本，会导致JS冲突，保留任意一组即可

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