Cannot inspect component properties while debugging Blazor WebAssembly code-behind files in Visual Studio 2019

Viewed 591

I recently converted my Blazor Server app over to Blazor WebAssembly and noticed debugging in Visual Studio 2019 no longer works properly.

I can still step through my components and inspect local variables, but I can no longer inspect my component's properties in any way. Visual Studio tells me 'Unable to Evaluate'.

My code is structured using a code-behind approach. I have discovered that if I merge the code files directly into a @code block in the component then the problem goes away. But I'd prefer not to do this as it seems like a step backwards.

Example 1. Code directly embedded in the component... Inspecting properties works OK

Counter.razor

@page "/Counter"
<DebugChild Max="20"></DebugChild>

DebugChild.razor

<h2>DebugChild</h2>
@code
{
    [Parameter]
    public int Max { get; set; }

    protected override void OnInitialized()
    {
        var x = Max; //I can inspect Max here
    }
}

Example 2. Code split out into a code-behind file... Inspecting properties DOES NOT work

Counter.razor

@page "/Counter"
<DebugChild Max="20"></DebugChild>

DebugChild.razor

@inherits BlazorWASMHosted.Client.Components.DebugChild
<h2>DebugChild</h2>

DebugChild.razor.cs

Using Microsoft.AspNetCore.Components;
namespace BlazorWASMHosted.Client.Components
{
   public class DebugChild : ComponentBase
    {
        [Parameter]
        public int Max { get; set; }

        protected override void OnInitialized()
        {
            var x = Max;  //I CANNOT inspect Max here
        }
    }
}

I tried doing the code-behind using partial classes instead of interitance and had no luck there either. Does anyone have any suggestions?

0 Answers
Related