Model is always null on Razor page

Question

hello All,

I have the following code on my cshtml page:

@if (Model!=null && Model.EmergencyInfos!=null && Model.EmergencyInfos.ToList().Count>0)

        {

                var count = Model.EmergencyInfos.Count;

                @for (var i = 0; i < count; i++)

                {

                    <div class="form-group row">

                        <div class="col">

                            <label asp-for="@Model.EmergencyInfos.ToList()[i].LastName" class="control-label"></label>

                            <input name="EmergencyInfos[@i].LastName" value="@(string.IsNullOrEmpty(Model.EmergencyInfos.ToList()[i].LastName)? "": @Model.EmergencyInfos.ToList()[i].LastName)" class="form-control" />

                            <span asp-validation-for="@Model.EmergencyInfos.ToList()[i].LastName" class="text-danger"></span>

                       </div>

                        <div class="col">

                        <label asp-for="@Model.EmergencyInfos.ToList()[i].FirstName" class="control-label"></label>

                            <input name="EmergencyInfos[@i].FirstName" value="@(string.IsNullOrEmpty(Model.EmergencyInfos.ToList()[i].FirstName)? "": @Model.EmergencyInfos.ToList()[i].FirstName)" class="form-control" />

                        <span asp-validation-for="@Model.EmergencyInfos.ToList()[i].FirstName" class="text-danger"></span>

                        </div>

}

}

else

            {

                @for (var i = 0; i < 2; i++)

                {

                    <div class="form-group row">

                         <div class="col">

                        <label asp-for="@Model.EmergencyInfos.ToList()[i].LastName" class="control-label"></label>

                            <input name="EmergencyInfos[@i].LastName" class="form-control" />

                            <span asp-validation-for="@Model.EmergencyInfos.ToList()[i].LastName" class="text-danger"></span>

                    </div>

                        <div class="col">

                            <label asp-for="@Model.EmergencyInfos.ToList()[i].FirstName" class="control-label"></label>

                            <input name="EmergencyInfos[@i].FirstName" class="form-control" />

                            <span asp-validation-for="@Model.EmergencyInfos.ToList()[i].FirstName" class="text-danger"></span>

                        </div>

}}

I have two rows of value in the database for emergencyInfo table, but when I put the debugger on this particular line:

(Model!=null && Model.EmergencyInfos!=null && Model.EmergencyInfos.ToList().Count>0)

I always get null for emergencyInfos. Below is the screen shot:

below is the screen shot from the database that shows two rows in the emergencyInfo table:

Another issue that I am having is when I first Input the value for LastName, firstName, I get the exception that model state is not valid. I put the debugger on Model state and noticed that, I am forced to input the value for second row of LastName and firstName. I just want to put the value for first row of LastName and FirstName. I want the value for second row to be optional, but somehow the model is not allowing that. Below is my model classes:

public partial class EmployeeInfo

{

    

[DisplayName("Last Name")]

    public string LastName { get; set; } = null!;

    [DisplayName("First Name")]

    public string FirstName { get; set; } = null!;

   public virtual ICollection<EmergencyInfo> EmergencyInfos { get; } = new List<EmergencyInfo>();

}

public partial class EmergencyInfo

{

  

 public string LastName { get; set; } = null!;

    public string FirstName { get; set; } = null!;

  public virtual EmployeeInfo EmployeeInfo { get; set; } = null!;

}