Why are my id and name attributes not always the same as my model property?

Question

This problem only seems to happen with one Property from my model, UserName...

My model is

public class UserModel
{
    public Guid Id { get; set; }

    [Display(Name = "Firstname")]
    public string FirstName { get; set; }

    [Display(Name = "Surname")]
    public string Surname { get; set; }

    [Display(Name = "Email Address")]
    public string EmailAddress { get; set; }

    [Display(Name = "Username")]
    public string UserName { get; set; }

    [Display(Name = "Active")]
    public bool Active { get; set; }

    [Display(Name = "Active")]
    public string ActiveAsText => Active ? "Active" : "Inactive";
}

here is how I have implemented in my page.

 <input asp-for="UserName" type="text" class="form-control" placeholder="Enter the username..."  required />

Logically, and according to the documentation, my id and name attributes should be my property name, so in this case UserName, but look at the id and name it is...

<input id="Username" name="Username" type="text" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" placeholder="Enter the username..." required=""  value="" ng-model="pageModel.UserName" ng-class="isInputInvalid(form3E2F2153D9334BC08DFB3C68E16DF93D.UserName)">

Anyone have any ideas why?

I know I can just change the model name, blah blah blah, but it makes no sense why the issue only occurs with that model property but EmailAddress works correctly.

<input id="EmailAddress" name="EmailAddress" type="email" class="form-control ng-pristine ng-untouched ng-empty ng-valid-email ng-invalid ng-invalid-required form-control-danger" placeholder="Enter the email..." required=""  value="" ng-model="pageModel.EmailAddress" ng-class="isInputInvalid(form3E2F2153D9334BC08DFB3C68E16DF93D.EmailAddress)">

Answer 1

Display attribute has no effect on name or id HTML attributes. It is for displaying the properties nicely in HTML pages. For example:

public class UserModel
{
    public Guid Id { get; set; }

    [Display(Name = "Your name")]
    public string FirstName { get; set; }

    [Display(Name = "Lastname")]
    public string Surname { get; set; }

    [Display(Name = "E-mail address")]
    public string EmailAddress { get; set; }

    [Display(Name = "Username")]
    public string UserName { get; set; }

    [Display(Name = "Active")]
    public bool Active { get; set; }

    [Display(Name = "Active")]
    public string ActiveAsText => Active ? "Active" : "Inactive";
}

---

<table>
  <tr>
    <th>@Model.FirstName</th>
    <th>@Model.Surname</th> 
    <th>@Model.EmailAddress</th>
    ...
  </tr>
  ...
</table>

---

It will be rendered like:

<table>
  <tr>
    <th>Your name</th>
    <th>Lastname</th> 
    <th>E-mail address</th>
    ...
  </tr>
  ...
</table>