ASP.NET Core 7 Razor Page提交后Create按钮异常隐藏的解决方法

核心原因 #

表单提交（点击Search按钮）后，Razor Page会重新渲染页面，原来仅绑定在下拉框change事件的toggleButtonVisibility函数不会自动执行——即便下拉框选中值仍大于0，按钮状态也不会被重新检查，最终导致按钮被隐藏。

解决方案 #

1. 修改JS逻辑：页面加载时自动检查按钮状态 #

让按钮状态检查逻辑在**页面初始化（包括回发后）**和下拉框改变时都执行：

function toggleButtonVisibility() {
    const dropdown = document.getElementById('YourDropdownId');
    const createBtn = document.getElementById('CreateButtonId');
    // 根据下拉框值切换按钮显示/隐藏
    createBtn.style.display = dropdown.value > 0 ? 'block' : 'none';
}

// 页面加载完成时立即执行一次（覆盖初始加载和回发后的情况）
document.addEventListener('DOMContentLoaded', function() {
    toggleButtonVisibility();
    // 绑定下拉框change事件
    document.getElementById('YourDropdownId').addEventListener('change', toggleButtonVisibility);
});

2. 确保下拉框选中值回发后保留 #

在后端PageModel中添加绑定属性，前端用asp-for绑定下拉框，保证提交后下拉框仍保持原来的选中值：

后端PageModel代码

public class YourPageModel : PageModel
{
    // 绑定下拉框选中值，回发后自动保留
    [BindProperty]
    public int SelectedDropdownValue { get; set; }

    public async Task<IActionResult> OnPostSearchAsync()
    {
        // 你的搜索业务逻辑
        // 返回当前页面，SelectedDropdownValue会被带回前端
        return Page();
    }
}

前端表单代码

<form method="post">
    <select asp-for="SelectedDropdownValue" id="YourDropdownId">
        <option value="0">请选择</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <!-- 其他选项 -->
    </select>
    <button type="submit" asp-page-handler="Search">Search</button>
    <button type="button" id="CreateButtonId" style="display:none;">Create</button>
</form>

原理说明 #

表单提交后页面重新渲染，DOMContentLoaded事件会再次触发，此时toggleButtonVisibility函数会检查回发后下拉框的选中值（因为后端绑定了属性，下拉框会保持选中状态），从而正确设置Create按钮的显示状态。

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