CODEWITHSUNDEEP
razorblazorblazor-server-side
Yannik
Yannik

Reputation: 1037

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

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: Result in Browser

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

Upvotes: 5

Views: 2669

Answers (2)

Mark Davich
Mark Davich

Reputation: 626

One member of our team was having this same issue,
it turns out it was a Visual Studio update that caused
this issue to start happening.

Cause

Updating Microsoft Visual Studio Enterprise 2022 (64-bit) from version 17.5.3 to 17.6.2

To Fix the Issue

Use Visual Studio Installer to "Rollback" to a previous version, in this case I needed to roll back to 17.5.3

Upvotes: 0

Yannik
Yannik

Reputation: 1037

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.

Upvotes: 8

Related Questions