Getting Null Reference exeption in Razor View but no breakpoint in OnGet method is hitting

Question

I am using .Net Core 7 Razor Pages and for my page I have an OnGetAsync which will get data from the database and fill a model so it can be used in the html view but either the OnGetAsync action is not firing off OR it is not being allowed to finish processing before the page is getting rendered. When I open the page I get a null reference exception for Model.Sections at the view level so I put a brake point on the line after the call to the DB and that break point does not get hit before the error happens. I have tried comparing my code to a few examples and I can't find anything wrong.

Relavant HTML page code:

@page
@model ManageSectionVM

<h2 class="Title">
    Manage Section Information
</h2>

<form id="Form" enctype="multipart/form-data" method="post" autocomplete="off">
    <p>
        <label asp-for="SelectedSectionID">Update Existing Section?</label>

        <select asp-for="SelectedSectionID" asp-items="Model.Sections">
            <option value="0">Add New Section</option>
        </select>
    </p>

c# code:

using FFInfo.AdminUI.Models;
using FFInfo.BLL.Admin.Interfaces;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace FFInfo.AdminUI.Pages.Sections
{
    public class ManageSectionModel : PageModel
    {
        private readonly ISectionHelper _sectionHelper;

        public ManageSectionModel(ISectionHelper sectionHelper)
        {
            _sectionHelper = sectionHelper;
        }

        [BindProperty]
        public ManageSectionVM ManageSectionVM { get; private set; } = new ManageSectionVM();

        public async Task<IActionResult> OnGetAsync()
        {
            ViewData["Title"] = "Manage Section";
            var secitons = await _sectionHelper.GetSectionList();
            ManageSectionVM.Sections = new SelectList(secitons, "ID", "Name");
            ManageSectionVM.Synopsis = "Sorry, we do not have a synopsis available at this time.";
            return Page();
        }

        public async Task<IActionResult> OnPostAsync()
        {

            return Page();
        }

        public async Task<JsonResult> OnPostGetBasicSectionInfoAsync(int sectionID)
        {
            return new JsonResult(await _sectionHelper.GetBasicSectionInfo(sectionID));
        }
    }
}

If I remove the Model.Sections line the page will render up fine but no break point will still be hit in the c# code AND the title property will not be set. It is like it is just completely ignoring OnGetAsync

Answer 1

In your page you should change @model ManageSectionVM to @model ManageSectionModel. Then change asp-items="Model.Sections" to asp-items="Model.ManageSectionVM.Sections" and asp-for="SelectedSectionID" to asp-for="ManageSectionVM.SelectedSectionID".

@page
@model ManageSectionModel

<h2 class="Title">
    Manage Section Information
</h2>

<form id="Form" enctype="multipart/form-data" method="post" autocomplete="off">
    <p>
        <label asp-for="ManageSectionVM.SelectedSectionID">Update Existing Section?</label>

        <select asp-for="ManageSectionVM.SelectedSectionID" asp-items="Model.ManageSectionVM.Sections">
            <option value="0">Add New Section</option>
        </select>
    </p>
</form>

Razor pages should have as model the class that extends PageModel, in your case ManageSectionModel.