有没有一种方法可以在MVC视图中获取具有相同标签的所有html元素

Question

in my index.shtml, I want to change the text of all <button> in page after user checking a checkbox. I tried this in the checkbox onclick method:

    @functions{  

          private void Invisibilize()
          {
              List<HtmlButton> buttons = new List<HtmlButton>();
              buttons = this.HtmlControls.OfType<HtmlButton>().ToList();// error
              foreach (HtmlButton button in buttons)
              {
                  button.Style="Color:red";
                  button.InnerTex = "Currently not selectable";
              } //end foreach
          }// end method       
      }

It does not work. Error says the page:

does not contain a definition for 'HtmlControls'

I already imported all the libraries needed

@using System.Web.UI.HtmlControls;
@using System.Linq;
@using System.Collections;

Does anyone know how to fix this?

---

HTML markup:

<input id="cb60" type="checkbox" onclick="Invisibilize()" />
    <label for="cb60">Disable the buttons</label>

Answer 1

It's not possible via the way you're trying. MVC works differently than Web Forms. By the time you have a fully rendered HTML document, it's already on it's way back to the client. You need to use JavaScript to do this. That's pretty straight-forward though:

var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++)
{
    buttons[i].innerHTML = 'new button text';
}

Or, if you want to use jQuery:

$('button').each(function () {
    $(this).html('new button text');
});

EDIT

The function syntax you have is incorrect. In fact, I'm not sure where you even got the idea for that syntax. In JavaScript a function is declared thus:

function myAwesomeFunction() {
    ...
}

There's no accessibility keyword on a JavaScript function because JavaScript has no concept of method accessibility; everything is public within scope. There's also no return type on a JavaScript function because JavaScript is duck-typed. Also the @functions bit you have needs to go. I'm not sure what that is.

So, what you should have is something like:

<script>
    function Invisiblize() {
        // code to alter buttons
    }
</script>

Or, you can just directly bind to the event and put the code there, without a separate named function:

$('#checkbox').on('click', function () {
    // code to alter buttons
});