Razor Pages Cannot reuse a property defined in OnGet() in another method, cause it's null

Question

I'm on a little project to learn ASP.NET Core with Razor Pages. Here is a part of my page model with its properties

public List<Models.Student> allStudents { get; set; }
public Models.Student studentFocused { get; set; }
        
public async Task<IActionResult> OnGetAsync()
{
    using (var _httpClient = new HttpClient())
    {
        using (var response = await _httpClient.GetAsync(this.uri))
        {
             var fetchedResponse = await response.Content.ReadAsStringAsync();
             this.allStudents = JsonConvert.DeserializeObject<List<Models.Student>>(fetchedResponse);
        }
    }
    return Page();
}

public void OnGetDetails(int id)
{
    this.studentFocused = this.allStudents.Where(s => s.StudentId == id).SingleOrDefault();
}

I got OnGetAsync() which calls an API route to retrieve all students datas on a list, which is working, I can display the data in my page file like that:

<div class="row">
    <div class="col-6">
        <ul id="list-students">
            @foreach (var student in Model.allStudents)
            {
                <li><span class="list-students-element">@student.FirstName @student.LastName</span><a asp-page-handler="details" asp-route-id="@student.StudentId">Détails</a></li>
            }
        </ul>
        <div><a asp-page="/Student/Create">Créer nouvel étudiant</a></div>
    </div>
    <div class="col-6">
        <div id="details">
            @if (Model.studentFocused != null)
            {
                <h3>Détails</h3>
                <p>Prénom: @Model.studentFocused.FirstName</p>
                <p>Nom: @Model.studentFocused.LastName</p>
                <p>Age: @Model.studentFocused.Age ans</p>
                <p>Classe: @Model.studentFocused.SchoolClass.Name</p>
                <p><strong>Options</strong></p>
                <a asp-page="/Student/Update" asp-route-id="@Model.studentFocused.StudentId">Modifier</a>
                <a asp-page="/Student/Delete" asp-route-id="@Model.studentFocused.StudentId">Supprimer</a>
            }
        </div>
    </div>
</div>

But now on my <div id="details"> I want to display the details from one student when clicking on "Détails" button using the OnGetDetails() method. For that i'm searching in my allStudents property which is a list, with the ID from the wanted student. I guess the method is not complete, but just with that I got my problem:

public void OnGetDetails(int id)
{
    this.studentFocused = this.allStudents.Where(s => s.StudentId == id).SingleOrDefault();
}

Got an error because this.allStudents is null here, although is initialized just before in my OnGet() so I don't understand.

Roar S. · Accepted Answer · 2020-08-24T10:39:43.950

 asp-page-handler="details" asp-route-id="@student.StudentId"

will not work with OnGetDetails(int id) because of wrong method signature.

You'll need to bind your route parameter (do that e.g. right before public async Task OnGetAsync())

[BindProperty(SupportsGet = true)]
public int? Id { get; set; }

and rewrite like this

public void OnGetDetails()
{
  // here you must fetch all students like in OnGetAsync
  this.studentFocused = this.allStudents.Where(s => s.StudentId == Id.Value).SingleOrDefault();
}

Normal way of doing this is to use URLs like this.

<a asp-page="Student" asp-route-id="4">

and get URL like this in HTML

/Student/4

where 4 = student id.

With your solution, you'll get URLs like this:

/Student?id=4&handler=Details

You can use this form of URLs

<a asp-page="Student" asp-route-id="4">

by rewriting OnGetAsync like this (I cleaned up a little bit as well)

    public async Task OnGetAsync()
    {
        using var httpClient = new HttpClient();
        using var response = await httpClient.GetAsync(this.uri);
        var fetchedResponse = await response.Content.ReadAsStringAsync();
        allStudents = JsonConvert.DeserializeObject<List<Models.Student>>(fetchedResponse);

        if (Id.HasValue)
        {
            studentFocused = allStudents.FirstOrDefault(s => s.StudentId == Id.Value);
        }
    }

On top of your .cshtml, replace

@page

with

@page "{id?}"

With this final change, you can remove OnGetDetails.

I will recommend using Resharper when learning C#, it tells you in real-time what you are doing wrong, and suggest code improvements.

Razor Pages Cannot reuse a property defined in OnGet() in another method, cause it's null

1 Answers1