Changing class (or other attributes) of HTML element in server side code (Razor Pages)

Question

Hello,

I am using ASP.NET Core Razor Pages 6.0.

In a .cshtml file, I have a simple element like this:

<div class="mb-3 mt-3">
<label asp-for="User.firstname" class="form-label">First Name:</label>
<input asp-for="User.firstname" class="form-control" placeholder="First Name">
</div>

How do I access & change the above <input> element inside the 'OnGet' or 'OnPost' methods?

I need to do so as I want to add a certain class to that <input> element, or make it readonly (depending on certain conditions in my server code).

In older versions of .NET, this was possible by giving an HTML element an id, and write runat="server". Then, one could access the element in the code-behind via its id and manipulate it. How is it done now?
Should I not be able to do the same because of the asp-for tag helper which I used? But how?

Thank you for your help!

Answer 1

Razor pages (or views) are templates rather than control trees. Just pass a model property and use the value in the template. The onget or onpost will render the the view. Just set a model property to the desired value

<input asp-for="User.firstname" class="@FirstNameClass" placeholder="First Name">

Answer 2

Hi @mauian ,

Agree with Bruce, you can create a property in the view page model, then use this property to change the class or other attributes, refer to the following sample code:

[Note]When bind the properties to the html element's attribute, we need to use the @Model.{PropertyName}

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion