Blazor .NET doesn't render a component. It just displays as HTML Markup

Question

Recently, I came across an issue and was able to fix it by cleaning the solution. But now I have the same issue and cleaning the solution does not fix my bug. In my project, I use modals to display forms. So, I created a modal component with an EditForm to generate a new entity in my database.

<div class="modal">
    <div class="modal-body">
        <div class="row">
            <div class="col s12">
                <h5>New Item</h5>
            </div>
        </div>
        <div class="row">
            <EditForm Model="MyEntity" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit">
                <DataAnnotationsValidator />
                <ValidationSummary></ValidationSummary>
                 <div class="input-field fixed col s12">
                     <InputText id="name" @bind-Value="MyEntity.Name" />
                     <label class="active" for="name">Name</label>
                 </div>
                <div class="col s12">
                    <button class="right btn" type="submit">Create</button>
                </div>
            </EditForm>
        </div>
    </div>
    <div class="modal-footer">
        <button class="modal-close btn-flat">Close</button>
    </div>
</div>

@code {
   [Parameter]
   public MyEntityClass MyEntity {get; set;}

   [Parameter]
   public EventCallback<Microsoft.AspNetCore.Components.Forms.EditContext> OnValidSubmit { get; set; }

   [Parameter]
   public EventCallback<Microsoft.AspNetCore.Components.Forms.EditContext> OnInvalidSubmit { get; set; }

}

At the index page I would like to use the component like this:

@page "/mypage"


<MyProject.Pages.Shared.MyModalComponent MyEntity="_newMyEntity" OnValidSubmit="HandleValidSubmit" InvalidSubmit="HandleOnInvalidSubmit" />

@*
Some more HTML Code ...
*@

@code{
   private MyEntityClass _newMyEntity = new MyEntityClass();

   void HandleValidSubmit() 
   {
      // Write to Database ...
   }

   void HandleOnInvalidSubmit()
   {
      // Display Errormessage to User ...
   }
}

Blazor doesn't render the component, it just renders as HTML markup with the variable names:

Now to the strange part: On a different page I built a table component to display complex data and there all works fine! Did I miss something?

I'm using .NET Core 3.1 Blazor Server Side with Visual Studio 2019 Enterprise Version 16.4.4

Which browser you are using? I've seen that IE doesn't display forms, yet seems to be rendering read-only tables just fine. — Roger Wolf
@RogerWolf I'm using Edge and Firefox and both browsers don't display my modal. — Yannik

Yannik Yannik · Accepted Answer · 2020-03-16T07:35:01

I found the reason for this weird behaviour: Visual Studio sometimes doesn't set the build action type to "Content" on creating a new blazor component. After changing and rebuilding all works fine.

Blazor .NET doesn't render a component. It just displays as HTML Markup

1 Answers