question

erossini avatar image
0 Votes"
erossini asked ZhiLv-MSFT commented

Visual Studio 2002: how to create code behind from a Razor page?

I watched the Visual Studio 2022 launch videos, very new cool features. The presenters showed that it is possible to create from a Blazor component or Razor page with few clicks the code behind for the page.

I can't find how to do that.

dotnet-aspnet-core-blazor
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

erossini avatar image
0 Votes"
erossini answered

Thank you for your reply. It is not what I'm looking for. In this video at the Visual Studio 2022 launch event, Angelo Petropoulus said: "if the C# code is getting a big long and we want to use a code behide file, we can get it instantly using the new extract block with code behind factoring".

https://youtu.be/GhqsLNT1fGA?t=4423


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ZhiLv-MSFT avatar image
2 Votes"
ZhiLv-MSFT answered

Hi @erossini,

if the C# code is getting a big long and we want to use a code behind file, we can get it instantly using the new extract block with code behind factoring

As we all known, when we create a Razor component, the component's UI is defined using Razor syntax, which consists of Razor markup, C#, and HTML. like this screenshot:

149673-image.png

Since the above component also contains both the Html and the C# code, if the C# code is too long, it is hard to review or manage, so in Visual Studio 2022, there has a new feature, it can extract the content of the @code block to a code behind class file:

For example, in the above FirstComponent component, assume the C# code is too long, we can move the focus between the @ and code (or use the Ctrl + . key), it will show the "Extract block to code behind" option, after selecting it, it will generate the FirstComponent.razor.cs class file which contains the content of the @code block. Refer this screenshot:

149732-6.gif


If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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,
Dillion


6.gif (1.3 MiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

erossini avatar image
0 Votes"
erossini answered ZhiLv-MSFT commented

I tried to create the code behind from my Razor page. How you can see from the screenshot, I tried to press Ctrl + . but nothing happens.

149718-example.gif




example.gif (80.5 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @erossini,

Please check your VS version, whether it is VS 2022, and try to upgrade it to the latest version. I'm using the Microsoft Visual Studio Community 2022 Preview (64-bit) Version 17.0.0 Preview 4.1 Version.

0 Votes 0 ·
erossini avatar image
0 Votes"
erossini answered ZhiLv-MSFT commented

This is my version of Visual Studio

149765-image.png



image.png (79.7 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @erossini,

How about using Alt + Enter key?

I will upgrade my VS version and try to use the same version to test. This might be a VS issue.

0 Votes 0 ·

If it could be useful, I'm working on this project https://github.com/erossini/BlazorDataTable and trying to create the code behind for this file https://github.com/erossini/BlazorDataTable/blob/main/PSC.Blazor.Components.DataTable/DataTable.razor


0 Votes 0 ·

Hi @erossini,

After updating the VS version, I still can't reproduce the problem. Everything works well on my side.

To use the Extract block to code behind new feature, the following methods works well on my VS 2022:

  1. Move the focus between the @ and code, it will show the relates icon. Then select the "Extract block to code behind" option.

  2. Move the focus between the @ and code, use the Ctrl + . key. Then select the "Extract block to code behind" option.

  3. Move the focus to the @code, right click then it will show the "Quick Action and Refactorings" option, after selecting it, it will show the "Extract block to code behind" option.

    149949-image.png

For your VS, there might have some issue, you could try to reset the VS setting or repair it. And you can also try to upgrade it to the latest version: Microsoft Visual Studio Community 2022 (64-bit) Version 17.0.1 version,

Besides, as a workaround, you could try to add the code behind class file manually, for example, for the FetchData.razor page in the Pages folder, you can create a FetchData.razor.cs partial class, then move the content of the @code block to the partial class file:

150037-image.png


Best regards,
Dillion

0 Votes 0 ·
image.png (6.5 KiB)
image.png (229.1 KiB)