Bind int as enum in Razor Pages handler

Question

I'm using ASP.NET Core Razor Pages 7.

An enum:

public enum Animals { None = 0, Dog, Cat, Rat }

In some page's markup:

<select id="Animal" name="Animal">
  <option value="" selected>Select an animal</option>
  <option value="1">Dog</option>
  <option value="2">Cat</option>
  <option value="3">Rat</option>
</select>

Notice that I've rendered them as ints rather than enum values.

In the page's code behind:

[BindProperty] public Animals Animal { get; set; }     // an enum

That enum is always bound to None rather than the value I choose from the select control.

A workaround is this:

[BindProperty] public int AnimalInt { get; set; }
public Animals Animal => (Animals)AnimalInt;

But that workaround is messy and less maintainable. Another approach is a custom model binder, but I hope that's unnecessary.

So, assuming I'm rendering ints rather than enum values, is there a built-in way to bind to enum values rather than ints?

---

NOTE: further to responses below, notice from above that I know how to render an enum to a select. The trouble is in the reverse: binding the selected int to an enum value in the razor page's POST handler.

Answer 1

So, assuming I'm rendering ints rather than enum values, is there a built-in way to bind to enum values rather than ints?

Actually, within IHtmlHelper interface wee have GetEnumSelectList() which can get enum value using IHtmlHelper. As you can see below:

Amimal Enum:

public enum Animal
    {
        [Display(Name = "None")] None = 0,
        [Display(Name = "Dog")] Dog = 1,
        [Display(Name = "Cat")] Cat = 2,
        [Display(Name = "Rat")] Rat = 3,
    }

Note: Anything with 0 value would be selected by default as default of an enum is 0.

Render Razor View:

@using RazorPageDemoApp.Enum
<div class="row">
    <div class="form-group">
        <table style="border-spacing: 12px;">
            <tr>            
            </tr>

            <tr>
                <td><strong>Setting Dropdown Default Value From Enum</strong></td>
                <td>@Html.DropDownList("Animal", Html.GetEnumSelectList<Animal>(),  new { @class = "form-control" })</td>

            </tr>
        </table>

    </div>
</div>

Note: Here I have an enum folder which I am refering here as ProjectName.Enum: That is:

Output:

Update:

Request Model:

public class RequestModel
    {

        public Animal Animal { get; set; }
    }

Request Method:

public void OnPost(RequestModel requestModel)
        {
            var getEnumValue = requestModel.Animal;
            var getEnumIndex = (int)requestModel.Animal;
        }

Submit View:

@using RazorPageDemoApp.Enum
<form class="form-group" method="post">
    <div class="row">
        <div class="form-group">
            <table style="border-spacing: 12px;">
                <tr>
                </tr>
                <tr>
                    <td><strong>Setting Dropdown Default Value From Enum</strong></td>
                    <td>@Html.DropDownList("Animal", Html.GetEnumSelectList<Animal>(),  new { @class = "form-control" })</td>
                </tr>
            </table>

        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Output: