ASP.NET Core 6.0中从_Layout页触发登录页模态弹窗失败

你的核心需求是复用_Layout中的同一个模态弹窗，通过不同页面的按钮加载不同HTML内容，当前按钮无反应是因为缺少事件绑定和内容加载逻辑，按以下步骤即可实现：

1. 调整按钮标记，添加目标页面URL属性 #

给所有触发模态框的按钮统一添加类名和自定义属性，用来指定要加载的页面地址：

登录页按钮修改 #

<button class="btn btn-primary modal-trigger" data-url="@Url.Action("AddUser", "Account")">add new user</button>

用户详情页按钮修改 #

<button class="btn btn-primary modal-trigger" data-url="@Url.Action("AddMobile", "User")">Add Mobile Number</button>

2. 在_Layout中添加通用模态框触发逻辑 #

在_Layout的</body>标签前添加JavaScript代码，统一处理所有模态触发按钮的点击事件：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取模态框及内容容器
    const modal = document.getElementById('myModal');
    const modalBody = modal.querySelector('.modal-body');
    
    // 监听所有触发按钮
    document.querySelectorAll('.modal-trigger').forEach(btn => {
        btn.addEventListener('click', async function() {
            const targetUrl = this.getAttribute('data-url');
            
            try {
                // 异步加载目标页面内容
                const response = await fetch(targetUrl);
                if (!response.ok) throw new Error('页面加载失败');
                
                // 将加载的HTML插入模态框
                modalBody.innerHTML = await response.text();
                
                // 显示模态框（Bootstrap 5 语法）
                new bootstrap.Modal(modal).show();
            } catch (err) {
                modalBody.innerHTML = `<p class="text-danger">${err.message}</p>`;
                new bootstrap.Modal(modal).show();
            }
        });
    });
});
</script>

3. 控制器返回部分视图（Partial View） #

确保目标页面的控制器Action返回不含布局的部分视图，避免重复加载_Layout：

示例：AccountController的AddUser方法 #

public IActionResult AddUser()
{
    // 初始化需要传递的模型（如果有）
    var model = new RegisterViewModel();
    // 返回部分视图，不使用布局
    return PartialView("_AddUser", model);
}

对应的部分视图_AddUser.cshtml #

@model RegisterViewModel

<form asp-action="Register">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Username" class="control-label"></label>
        <input asp-for="Username" class="form-control" />
        <span asp-validation-for="Username" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Email" class="control-label"></label>
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <div class="form-group mt-3">
        <input type="submit" value="创建用户" class="btn btn-primary" />
    </div>
</form>

4. 确保Bootstrap依赖正确引入 #

ASP.NET Core 6中需确认已引入Bootstrap的CSS和JS（可通过LibMan安装），在_Layout中添加引用：

<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>

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