ASP.NET CORE "btnName" does not exist in current context in cshtml file - C# Newbie

Question

I'm trying to figure out how to get buttons/text to change based on button click ultimately to hide certain objects. I found this post which is similar to what I'm trying to achieve.

Change button text after click, then change it back after clicking again

This is one example out of several I've attempted and I can never get the.cs file to see the button/object names. Is there a reference I'm missing?

Here's the entire code I'm attempting to learn how this works:

.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";
            }
        }

    }
}

Error Message Image

Answer 1

Are you sure that the button is named "OrdersButton"? If not change it to that.

Answer 2

This is not possible using just C# in ASP.NET Core.

Here's Why:

ASP.NET Core is used for server-side processing, whereas you would like to alter the front-end result. Web page serving works by sending static files to a user at page load, then closing the connection(which stops all communication with the web server). Every new thing you'd like to do between the server and client requires a new connection.

A Solution:

Something like this would be best done using JavaScript, the most common web frontend language. Here's an example:

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

Answer 3

This code can't work in asp.net core.

There are two methods can fit your requirement. The first one is using javascript . You can set a onclick event to change button's text.

 <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>

But If you just want to use c# code instead of javascript to change the text, Using Razor component is the second method. Please refer to this issue to learn how to use razor component in asp.net core razor page/mvc.

Then write a razor component:

<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";
        }
    }
}

Then refer this component in your view

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

Demo: