How to split Blazor WASM components code of C# and HTML in different files?

Question

I've some background in Web Development, mostly in ASP MVC and JavaScript with Angular.

Currently, I'm learning Blazor WASM and I'm somehow "confused" because I cannot find any example of how to split the below code into two files.

This is the example code of one component from the default template:

Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Is it any way to split like into the Angular Web Components? .html and .ts? In this case .razor and .razor.cs?

Counter.razor - HTML

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Counter.razor.cs - C#

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

I've developed relatively complex SPAs in Angular and sites in ASP MVC and this solution is I'd say okay when your projects are small, but I don't like to mix JS/C# code in the same HTML page. I have faced some complex situations like these ones in the past and it became hard to maintain.

Any idea how to split it? Thanks.

It is explained here clearly, completely and without mistakes :https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.1#partial-class-support — enet, Jan 27 '20 at 16:18

Jason Spake · Answer 1 · 2021-08-06T14:53:10.317

5

Yes you just need to inherit from ComponentBase in your code-behind .cs file, and then inherit that class at the top of your .razor file.

c# file:

public class MyComponent : ComponentBase

razor file:

@inherits MyComponent

This article has a more thorough explanation, though it is from 2018 so might have some outdated pieces. https://gunnarpeipman.com/blazor-code-behind/

edited Aug 06 '21 at 14:53

answered Jan 27 '20 at 15:32

Jason Spake

4,293
2
14
22

score 5 · Accepted Answer · 2020-01-28T13:02:18.467

5

You can create partial classes to separate the code from the HTML:

[Edit: Thanks to Enet's information] If you name the file [classname].razor.cs, the file becomes a single object in solution explorer. I have learned two things before lunch today; time to slow down.

If you have a Page (or component) in a Blazor project named Index.razor

Edit: .Net Core 3.1 is required for partial class support (per Federico Navarrete).

Create a C# class in the same directory with the same name.

At first it will not compile, so you have to add the word partial:

public partial class Index
{
    ...
}

I prefer to put all my code in a partial class because .razor pages do not have the drop down menu for methods and properties like a .cs file does.

edited Jan 28 '20 at 13:02

answered Jan 27 '20 at 16:09

1

"The correct syntax is just [classname].cs, not [classname].razor.cs like you tried." ... This is not true. Both syntax are fine, and if anything, the correct syntax is [classname].razor.cs... – enet Jan 27 '20 at 16:22
1

You are correct enet. I had never tried that. In face once I did, the file then becomes a single object in solution explorer. – Jan 27 '20 at 16:27
Great answer! Maybe you can just add that you need to have 3.1+ SDK! – Federico Navarrete Jan 28 '20 at 08:37
What SDK are you referring to Federico? If I update that I want to make sure I understand what I am saying. Thanks. – Jan 28 '20 at 12:55

How to split Blazor WASM components code of C# and HTML in different files?

2 Answers2