Blazor 0.3.0 was released recently, and I thought of upgrading one of my previously created Blazor CRUD app to the recent version 0.3.0. The Blazor app uses a JavaScript function to control the visibility of the HTML controls present in the Todo list element. The HTML elements inside the list are given a dynamic ID to have uniqueness. Like,
<input id="txt_@todo.ID" style="display:none;">
Here, the ID attribute contains C# and HTML markup. Unfortunately, this gives an error BL9986: Component attributes do not support complex content (mixed C# and markup) while compiling in 0.3.0 version. This is a very common use case in any application to manipulate or apply markup based on the server-side data like applying different CSS classes based on a C# variable. In the first place, I was wondering why Blazor is not allowing this and unfortunately, there is not much help available online to fix it.
So I went ahead and created an issue on Blazor repo and within a few minutes got the following response from Steve Sanderson.
Sorry for the inconvenience. This is already fixed in our dev branch so should be resolved in 0.4.0.
He also gave a workaround to fix this for now. The workaround is to make the whole attribute a single C# expression, e.g.:
<input id="@($"txt_{todo.ID}")" style="display:none;">
So, if you are also using mixed markup in your Blazor component, then convert it into the single C# expression to fix the error BL9986: Component attributes do not support complex content (mixed C# and markup). This error is temporary and will be fixed in 0.4.0.
I will also post the migration steps for migrating Blazor CRUD app to 0.3.0 in a separate post.
Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.
