Blazor Compiler Error CS1061 - Report has no definition for Title

Question

in my blazor project I have two applications (Server, Client, Shared). Now I'm stuck for hours, because in my Report.razor page the IDE shows error CS1061. I can't resolve any property from the Report List with Report objects.

Does anyone have inputs to fix my problem? Thank you!

Server application: ReportController.cs

using BlazorApp.Shared;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Http.HttpResults;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Identity.Web.Resource;

namespace BlazorApp.Server.Controllers
{
    [Authorize]
    [ApiController]
    [Route("[controller]")]
    [RequiredScope(RequiredScopesConfigurationKey = "AzureAd:Scopes")]
    public class ReportController : ControllerBase
    {

        private readonly ILogger<ReportController> _logger;

        public ReportController(ILogger<ReportController> logger)
        {
            _logger = logger;
        }

        private List<Report> Reports = new()
        {
            new("Title","Desc","Name","Lastname")
        };

        [HttpGet("List")]
        public ActionResult List()
        {
            return Ok(Reports);
        }
    }
}

Client application: Report.razor

@page "/reports"
@using BlazorApp.Shared
@using Microsoft.AspNetCore.Authorization;
@attribute [Authorize]
@inject HttpClient Http

<PageTitle>Report</PageTitle>

<h1>Report</h1>

<ul>
    @foreach (var report in Reports)
    {
        <li>@report.Title</li> -> Compiler Error CS1061
    }
</ul>

@code {

    private List<Report> Reports = new();

    protected override async Task OnInitializedAsync()
    {
        Reports = await Http.GetFromJsonAsync<List<Report>>("List/Report");
    }
}

My Shared class: Report.cs

namespace BlazorApp.Shared
{
    public class Report
    {
        public string Title { get; set; }

        public string Description { get; set; }

        public string ReporterName { get; set; }

        public string ReporterLastname { get; set; }

        public Report() { }

        public Report(string title, string description, string reporterName, string reporterLastname)
        {
            this.Title = title;
            this.Description = description;
            this.ReporterName = reporterName;
            this.ReporterLastname = reporterLastname;
        }
    }
}

Answer 1

You have

public class Report
{
   public string Title { get; set; }
   ...
}

but also a Report.razor page. That compiles to another class Report, and that one doesn't have a Title property.

  private List<Report> Reports = new();  // is a list of Blazor components

A quick fix is to rename your page to for instance ReportPage.razor. You can keep the @page "/reports" line so it won't affect anything else.

I use the Page suffix a lot, for precisely this reason.