ASP.NET 核心“btnName”在 cshtml 文件的当前上下文中不存在 - C# 新手

Question

我试图弄清楚如何根据按钮单击最终更改按钮/文本以隐藏某些对象。 我发现这篇文章与我想要实现的目标相似。

单击后更改按钮文本，然后再次单击后将其更改回

这是我尝试过的几个例子中的一个，我永远无法获取 .cs 文件来查看按钮/对象名称。 我缺少参考资料吗？

这是我试图了解其工作原理的完整代码：

.cshtml:

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


<div class="row">
    <button id="OrdersButton" onclick="OrdersButton_Click"> test</button>
</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 void OnGet()
        {

        }
        private void OrdersButton_Click(object sender, EventArgs e)
        {
            if (OrdersButton.Text == "Turn Orders On")
            {
                OrdersButton.Text = "Turn Orders Off";
            }
            else if (OrdersButton.Text == "Turn Orders Off")
            {
                OrdersButton.Text = "Turn Orders On";
            }
        }

    }
}

错误信息图片

Answer 1

您确定该按钮名为“OrdersButton”吗？ 如果不是将其更改为那个。

Answer 2

在 ASP.NET Core 中仅使用 C# 是不可能的。

这就是为什么：

ASP.NET 核心用于服务器端处理，而您想更改前端结果。 Web 页面服务的工作原理是在页面加载时向用户发送 static 个文件，然后关闭连接（这将停止与 web 服务器的所有通信）。 你想在服务器和客户端之间做的每一件新事情都需要一个新的连接。

一个解法：

像这样的事情最好使用 JavaScript 来完成，这是最常见的 web 前端语言。 这是一个例子：

 <script> function ChangeText(button){ button.textContent = "Goodbye, world," } </script> <button id='myButton' onclick='ChangeText(this)'>Hello, World!</button>

Answer 3

此代码无法在 asp.net 内核中运行。

有两种方法可以满足您的要求。 第一个是使用javascript 。 您可以设置 onclick 事件来更改按钮的文本。

 <button id="OrdersButton" onclick="OrdersButton_Click(this)"> Text</button> <script> function OrdersButton_Click(button){ if (button.textContent.= "Turn Orders On"){ button.textContent = "Turn Orders On" }else{ button.textContent = "Turn Orders Off" } } </script>

但是如果你只想使用 c# 代码而不是javascript来更改文本，则使用 Razor 组件是第二种方法。 asp.net core razor page/mvc中razor组件的使用请参考这个issue 。

然后写一个razor组件：

<div class="row">
    <button id="OrdersButton" @onclick="OrdersButton_Click"> @text</button>
</div>

@code {
    [Parameter]
    public  string text { get; set; } = "Turn Orders On";

    private void OrdersButton_Click()
    {
        if (text == "Turn Orders On")
        {
            text = "Turn Orders Off";
        }
        else if (text == "Turn Orders Off")
        {
            text = "Turn Orders On";
        }
    }
}

然后在你的视图中引用这个组件

@(await Html.RenderComponentAsync<Pager>(RenderMode.ServerPrerendered))

演示：