ASP.Net Core Razor Pages: Changing class of HTML element from server side code

mauian
 
on Nov 19, 2022 08:56 AM
445 Views

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 & manipulate 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 read only (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!

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Nov 21, 2022 05:18 AM

Use if else condition in the Razor Page.

Model

public class PersonModel
{
    [BindProperty]
    public string FirstName { get; set; }

    [BindProperty]
    public string LastName { get; set; }
}

Index Model

public class IndexModel : PageModel
{
    public PersonModel Person { get; set; }

    public void OnGet()
    {
    }

    public void OnPostSubmit(PersonModel person)
    {
        this.Person = person;
    }
}

Razor Page

@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model Razor_Form_Submit.Pages.IndexModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        .red { color: red; }
        .green { color: green; }
    </style>
</head>
<body>
    <form method="post">
        <div>
            @if (Model.Person != null)
            {
                if (!string.IsNullOrEmpty(Model.Person.FirstName))
                {
                    <label asp-for="Person.FirstName" class="form-label green">First Name:</label>
                    <input asp-for="Person.FirstName" class="form-control" placeholder="First Name">
                }
                else
                {
                    <label asp-for="Person.FirstName" class="form-label red">First Name:</label>
                    <input asp-for="Person.FirstName" class="form-control" placeholder="First Name">
                }
            }
            else
            {
                <label asp-for="Person.FirstName" class="form-label">First Name:</label>
                <input asp-for="Person.FirstName" class="form-control" placeholder="First Name">
            }
        </div>
        <div>
            <label asp-for="Person.LastName" class="form-label">Last Name:</label>
            <input asp-for="Person.LastName" class="form-control" placeholder="Last Name">
        </div>
        <input type="submit" value="Submit" asp-page-handler="Submit" />
    </form>
</body>
</html>

Screenshot