Search code examples
visual-studioblazorrazor-components

Developing Blazor Razor component in VS with dual screens


Is there a way to open Razor component in Visual Studio with environment with dual screens . I'll love to have markup on one screen and @code {} section on other. While MVC developing usually markup is on one screen while JS is on other. Switching to Blazor C# replaces JS,But my mind is still mapped to read markup from one while is code on other. Can we create component with code separated from markp but still connected. enter image description here


Solution

  • You can use the code behind with a partial class :

    MyComponent.razor

    <h1>Thi is a component @Title</h1>
    

    MyComponent.razor.cs

    public partial class MyComponent
    {
          [Parameter]
          public string Title { get; set; }
    }
    
    

    enter image description here

    This is a 3.1 future, before 3.1 you cannot use partial class be inherits from class deriving from Microsoft.AspNetCore.Components.ComponenBase

    before 3.1

    MyComponent.razor

    @inherits MyComponentModel
    <h1>Thi is a component @Title</h1>
    

    MyComponent.razor.cs

    using Microsoft.AspNetCore.Components;
    
    public class MyComponentModel : ComponentBase
    {
          [Parameter]
          public string Title { get; set; }
    }