How do I merge my code behind file in the solution explorer?

Question

I am trying to create a code-behind file for my blazor application (Using .NET Core 3.1, Blazor-server-side), while it also shows up in the solution explorer as the razor file you can click open, and then see the razor.cs file in the tree structure.

I managed to get the funcionality to work, but it still doesn't show up correctly in the solution explorer.

As far as I know I am doing everything correctly, I even tried to use an item template, and that didn't work either. Whatever I try, they always show up as seperate files.

The file names are the same, except for the extension, the class inherits from ComponentBase, I have tried calling the class in the file FetchData or FetchDataBase, neither works.

My class file is called: 'FetchData.razor.cs' My razor file is called 'FetchData.razor'

Am I missing something? I am on VS2019 V16.5.2, do I need to be on the preview version for this?

Code snippets: class:

public partial class FetchDataBase : ComponentBase
{
    [Inject]
    private CoordinatesService CoordinatesService { get; set; }

    protected IEnumerable<ICoordinate> coordinates;

    protected override async Task OnInitializedAsync()
    {
        coordinates = await CoordinatesService.GetCoordinates();
    }
}

razor page:

@page "/fetchdata"
@inherits FetchDataBase

<h1>Coordinates</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (coordinates == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Test</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var coordinate in coordinates)
            {
                <tr>
                    <td>@coordinate.Test</td>
                </tr>
            }
        </tbody>
    </table>
}

Image of solution explorer:

Thanks!

Answer 1

At first glance, your file names do look correct, so make sure that File Nesting is turned on in the Solution Explorer: