Blazor page name conflict with controller

Question

I'm seeing some odd behavior creating a client-side Blazor app with a web api. It appears you can't create a page with the same name as a web api controller.

In particular, I create the project with Visual Studio 2019, selecting the "Blazor WebAssembly App" template:

I then set the "ASP.NET Core hosted" checkbox so I'll have a server side project for accessing a database at some point.

This creates an app with Client, Server, and Shared projects. The Server project has a controller for the WeatherForecast data.

At this point I can run the default app. It has a FetchData page on the client that pulls data from the WeatherForecastController using the web api.

Now what happens if I try to create my own page to access the WeatherForecastData? Well, if I name it "Forecast" (using "Add->Razor Component"), and add a @Anonymous directive "/forecast", everything works fine.

But if I create a Razor Component with the name "WeatherForecast", and add a @Anonymous directive "/weatherforecast", I get a build error:

I can only assume that there's a conflict between the client page "weatherforecast" and the server controller "WeatherForecastController".

So my questions are:
1.) Is this correct?
2.) Where can I read more about this?

Answer 1

Hi @Greg Arzoomanian ,

You need to introduce the correct namespace in FetchData, like this:

@code {  
    private WebApplication89.Shared.WeatherForecast[] forecasts;  
  
    protected override async Task OnInitializedAsync()  
    {  
        forecasts = await Http.GetFromJsonAsync<WebApplication89.Shared.WeatherForecast[]>("WeatherForecast");  
    }  
  
}  

Result:

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,

ChaoDeng