Error on Option Select asp.net dropdown - Razor Pages.

Question

Hello everyone

I have the following error on my registration form:

System.NullReferenceException: 'Object reference not set to an instance of an object.'
HyperWeb_V4.Pages.Users.Register.RegisterModel.MyItems.get returned null.

I load the list from th server side code into the model

The code on my asp file:

...
<div class="mb-3">
    <label for="Country" class="form-label">Country</label>
    <select asp-for="SelectedItemId" class="form-select" id="Country" name="Country" required>
        @foreach (var item in Model.MyItems)
        {
            <option value="@item.Text">@item.Text</option>
        }
    </select>
</div>
...

And the code on my server side file:

using HyperWeb_V4.Models.User;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace HyperWeb_V4.Pages.Users.Register
{
    public class RegisterModel : PageModel
    {
        public List<SelectListItem> MyItems { get; set; }
        public string SelectedItemId { get; set; }

        public void OnGet()
        {

            var countries = new List<string>
        {
           "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia",
                "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin",
                "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi",
                "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Central African Republic", "Chad", "Chile", "China", "Colombia",
                "Comoros", "Congo", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Côte d'Ivoire", "Denmark", "Djibouti",
                "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea",
                "Estonia", "Eswatini", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece",
                "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hungary", "Iceland", "India",
                "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya",
                "Kiribati", "Korea, North", "Korea, South", "Kosovo", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho",
                "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali",
                "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia",
                "Montenegro", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand",
                "Nicaragua", "Niger", "Nigeria", "North Macedonia", "Norway", "Oman", "Pakistan", "Palau", "Panama", "Papua New Guinea",
                "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis",
                "Saint Lucia", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia",
                "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia",
                "South Africa", "South Sudan", "Spain", "Sri Lanka", "Sudan",
                "Suriname", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga",
                "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates",
                "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam",
                "Yemen", "Zambia", "Zimbabwe"
        };

            MyItems = new List<SelectListItem>();

            foreach (var country in countries)
            {
                MyItems.Add(new SelectListItem
                {
                    Value = country,
                    Text = country
                });
            }

        }

        UserDataAccessLayer objUser = new UserDataAccessLayer();

        // This will help to capture the data posted by the form in our object.
        [BindProperty]
        public UserModel User { get; set; }

        public ActionResult OnPost()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            objUser.AddUser(User);

            return RedirectToPage("/User/Index");
        }

    }
}

I am pretty sure the problem is in the html.

 

I am able to copy the code in the dom after the selection:
 

<select class="form-select" id="Country" name="Country" required="" data-val="true" data-val-required="The SelectedItemId field is required.">
       ... Deleted all the countries not needed for the example
        <option value="France">France</option>
        <option value="Gabon">Gabon</option>
        <option value="Gambia">Gambia</option>
        <option value="Georgia">Georgia</option>
        <option value="Germany">Germany</option>
        <option value="Ghana">Ghana</option>
        <option value="Greece">Greece</option>
        <option value="Grenada">Grenada</option>
        <option value="Guatemala">Guatemala</option>
        <option value="Guinea">Guinea</option>
        <option value="Guinea-Bissau">Guinea-Bissau</option>
        <option value="Guyana">Guyana</option>
       ... Deleted all the countries not needed for the example
</select>

It looks like it cannot get the option in the selected input.

The page loads very well and the list works fine, but somehow the value is not readable and the code returned is null.
Not sure why. Please help.

Best regards

Rui Ruivo