ASP.NET Core中cshtml文件报错“btnName不存在于当前上下文”求解

错误原因 #

你混淆了ASP.NET Razor Pages和Web Forms的运行机制。Web Forms是服务器控件模型，后台能直接引用前端控件ID；但Razor Pages是基于HTTP请求响应的模型，后台代码无法直接访问前端DOM元素的实例，所以才会报“OrdersButton不存在于当前上下文”的错误——这跟缺少引用没关系，是实现思路错了。

解决方案 #

根据你“切换按钮文本、最终隐藏指定元素”的需求，推荐两种实现方式：

方式一：前端JavaScript实现（无刷新，体验更流畅） #

直接在前端用JS处理点击事件，无需后台参与，代码修改如下：

@page
@model IndexModel
@{
    ViewData["Title"] = "Index";
}

<div class="row">
    <button id="OrdersButton" onclick="toggleButton()">Turn Orders On</button>
    <!-- 示例：要隐藏的目标元素 -->
    <div id="OrdersContainer" class="mt-3">
        这里是订单内容区域
    </div>
</div>

<script>
    function toggleButton() {
        const btn = document.getElementById('OrdersButton');
        const targetContainer = document.getElementById('OrdersContainer');
        
        if (btn.textContent === "Turn Orders On") {
            btn.textContent = "Turn Orders Off";
            targetContainer.style.display = 'block'; // 显示目标元素
        } else if (btn.textContent === "Turn Orders Off") {
            btn.textContent = "Hide Orders";
        } else {
            btn.style.display = 'none'; // 隐藏按钮
            targetContainer.style.display = 'none'; // 隐藏目标元素
        }
    }
</script>

方式二：后台Razor Pages处理（需页面回发） #

如果一定要通过后台逻辑处理，需要借助表单提交+模型属性来控制状态：

.cshtml代码：

@page
@model IndexModel
@{
    ViewData["Title"] = "Index";
}

<div class="row">
    <form method="post">
        <button type="submit" name="action" value="ToggleOrders">@Model.ButtonText</button>
        @if (Model.IsOrdersVisible)
        {
            <div class="mt-3" id="OrdersContainer">
                这里是订单内容区域
            </div>
        }
    </form>
</div>

.cs代码：

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

namespace TEST_WEB_APP.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        // 控制按钮文本的属性
        public string ButtonText { get; set; } = "Turn Orders On";
        // 控制目标元素是否显示的属性
        public bool IsOrdersVisible { get; set; } = false;

        public void OnGet()
        {
        }

        public IActionResult OnPostToggleOrders()
        {
            if (ButtonText == "Turn Orders On")
            {
                ButtonText = "Turn Orders Off";
                IsOrdersVisible = true;
            }
            else if (ButtonText == "Turn Orders Off")
            {
                ButtonText = "Hide Orders";
            }
            else
            {
                ButtonText = "Turn Orders On";
                IsOrdersVisible = false;
            }
            return Page();
        }
    }
}

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