Asp.net Core Razor Pages中Bootstrap模态框内表单Add按钮失效问题

你的Add按钮没有触发POST请求的核心原因是按钮类型为type="button"，这种类型的按钮仅作为普通交互按钮，不会触发表单的提交动作，因此无法触发Razor Pages中对应的OnPostAddConfigItem处理方法。

下面提供两种可行的解决方式，根据你的需求选择：

方式一：修改按钮类型为submit（页面刷新式） #

这种方式最简单，直接让按钮触发表单提交，同时处理页面刷新后重新打开模态框的问题：

1. 修改Add按钮的类型
   将按钮的type="button"改为type="submit"，保留asp-page-handler="AddConfigItem"属性：

<button type="submit" class="btn btn-primary m-1" asp-page-handler="AddConfigItem">
    Add
</button>

2. 添加模态框自动重开逻辑
   在你的PageModel中添加一个布尔属性，用于标记是否需要重新打开模态框：

public bool ShowModal { get; set; }

然后在OnPostAddConfigItem方法末尾设置ShowModal = true;：

public IActionResult OnPostAddConfigItem()
{
    var scope = Scope.Global;
    if(string.IsNullOrEmpty(CreateInput.Key) || string.IsNullOrEmpty(CreateInput.Value))
    {
        StatusMessage = "Error: Key or value is empty.";
        ShowModal = true; // 标记重开模态框
        return Page();
    }
    else
    {
        ConfigurationItems.Add((scope, CreateInput.Key, CreateInput.Value));
        CreateInput.Key = "";
        CreateInput.Value = "";
        ShowModal = true; // 标记重开模态框
        return Page();
    }
}

3. 页面添加脚本控制模态框显示
   在页面的Scripts区块中添加逻辑，根据Model的ShowModal值自动打开模态框：

@section Scripts {
    <script>
        @if (Model.ShowModal)
        {
            <text>
                const modal = new bootstrap.Modal(document.getElementById('newBenchmark'));
                modal.show();
            </text>
        }
    </script>
}

方式二：AJAX异步提交（无刷新式） #

这种方式可以避免页面刷新，保持模态框始终打开，提升用户体验：

1. 修改Add按钮并添加状态信息容器
   给按钮添加ID，同时在模态框内添加状态信息显示区域：

<!-- 在模态框body顶部添加状态信息容器 -->
<div id="statusMessage" class="text-danger mb-3"></div>

<!-- 修改Add按钮 -->
<button type="button" class="btn btn-primary m-1" id="addConfigBtn">
    Add
</button>

2. 添加AJAX提交脚本
   在页面的Scripts区块中添加异步提交逻辑：

@section Scripts {
    <script>
        document.getElementById('addConfigBtn').addEventListener('click', async function() {
            const form = document.querySelector('form');
            const keyInput = document.querySelector('input[name="CreateInput.Key"]');
            const valueInput = document.querySelector('input[name="CreateInput.Value"]');
            const statusEl = document.getElementById('statusMessage');
            
            // 先做前端简单验证
            if (!keyInput.value.trim() || !valueInput.value.trim()) {
                statusEl.textContent = "Error: Key or value is empty.";
                return;
            }
            
            const formData = new FormData(form);
            formData.append('handler', 'AddConfigItem'); // 指定要触发的handler
            
            try {
                const response = await fetch(window.location.href, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                    }
                });
                
                const html = await response.text();
                // 解析返回的页面内容，提取需要更新的部分
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                
                // 更新配置项表格
                const newTable = doc.querySelector('table');
                document.querySelector('table').replaceWith(newTable);
                
                // 清空输入框
                keyInput.value = '';
                valueInput.value = '';
                
                // 更新状态信息
                const newStatus = doc.getElementById('statusMessage');
                if (newStatus) {
                    statusEl.textContent = newStatus.textContent;
                } else {
                    statusEl.textContent = '';
                }
            } catch (err) {
                statusEl.textContent = "Error: Failed to add config item.";
                console.error(err);
            }
        });
    </script>
}

3. 确保PageModel的StatusMessage可被前端获取
   确保你的PageModel中StatusMessage是公开属性：

public string StatusMessage { get; set; }

• 确保你的表单中存在Razor Pages自动生成的防伪令牌（__RequestVerificationToken），这是POST请求必须的，Razor Pages的<form>标签默认会自动生成，无需手动添加。
• 前端验证可以减少不必要的后端请求，提升体验，建议保留。

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