How to add a Partial Class to a component in Blazor in Visual Studio 2019?

Question

I'm not finding where should I click to create a partial class in visual studio 2019.

After I create a new "Razor Component" file, I can't add the partial class to it.

Where do I add it?

you do it manually, just create class with the same name and .cs extension — Alexan, Mar 05 '20 at 17:53
Add `.razor.cs` class manually to the same folder, and make sure they both are in the same namespace (the `@namespace` directive in Razor component might be necessary). — Roger Wolf, Mar 05 '20 at 20:53

Alexan · Answer 1 · 2020-03-07T16:19:02.287

17

There are two ways to add code behind to Razor component:

Add Base class and in component add @inherits this class, how is described in this answer. In this case base class shouldn't be partial.
Since October 2019 we can use partial classes. You can just add class name with the same name, adding .cs extension, mark it as partial class:

And you don't need to use @inherits in this case.

edited Mar 07 '20 at 16:19

answered Mar 06 '20 at 00:56

Alexan

1

Is there any consideration, which method is better in which case? – paburgos Jun 12 '20 at 18:39
1

@paburgos, I prefer second, I think it's more elegant – Alexan Jun 12 '20 at 18:41
1

The second method is also more similar to what Microsoft has always done with GUI frameworks. Think about Windows Forms or WFP: The code-behind class is always a partial class, the same class as the UI one, it's never the base class. – Massimiliano Kraus Jul 17 '20 at 14:24
@Alexan are there any technical limitations to one or the other option? – HamsterWithPitchfork Jul 22 '20 at 16:08
@metabuddy, I think that second method available starting with .NET Core 3.1 – Alexan Jul 22 '20 at 16:42
When i use partial class getting error Error CS0260 Missing partial modifier on declaration of type 'CounterPartialClass'; another partial declaration of this type exists – Khanakia May 16 '21 at 11:46
The second option is great. However, make sure that the namespace of the `razor.cs` file is correct. Otherwise this won't work! – Andreas Forslöw May 19 '21 at 07:10
Note that the ": ComponentBase" is optional for the Partial Class Support option. – Jersey Dude Mar 02 '22 at 14:45

score 3 · Accepted Answer · answered Mar 05 '20 at 21:06

3

Something like this? : - razor page with "code-behind" class

answered Mar 05 '20 at 21:06

yob

1

if you use partial class in code behind class name should be the same as in component: Weather. And you don't need inherit in this case. – Alexan Mar 06 '20 at 00:50

sergiokml · Answer 3 · 2023-06-21T16:18:44.717

2

Another way: (vs 2022)

Right click the @Code section, pick Quick Actions and Refactorings, select Extract block to code behind.

edited Jun 21 '23 at 16:18

answered Jun 11 '23 at 15:31

sergiokml

3 Answers3