Add another section to blazor frustrations post
This commit is contained in:
parent
df4e3d267b
commit
85346865fb
1 changed files with 11 additions and 5 deletions
|
@ -68,22 +68,18 @@ If you create a component in Blazor and then create an accompanying css file, th
|
|||
So here's what the razor file would look like. Just a basic component. Then let's look at the css.
|
||||
|
||||

|
||||
|
||||
Notice the lack of specific selectors. Just *button*. And the result would, as expected, look like this:
|
||||
|
||||

|
||||
|
||||
One might assume based on that code that every button would be red, right? Not so. Here's where Blazor's magic comes in. Let's look at the generated html.
|
||||
|
||||

|
||||
|
||||
Notice the attributes? The build process has added these and made them unique throughout the html tree depending on the component (or file) the code is in. `Main`, `div` and `article` elements are different from `h1`, `p` and `button` because the first three are in *MainLayout.razor* file while the latter three are in *Counter.razor*. Looking at the generated css:
|
||||
|
||||

|
||||
|
||||
We discover the same attribute as a selector making it as precise (or more so) as an id attribute to ensure only the specific component buttons are red.
|
||||
|
||||
The ability to use attributes as a css selector's have been in the spec for a while but Blazor might be the first time I have seen them used like this. Usually attribute selectors have been used to target specific input fields via name or type like so `input[type="text"]` but the spec seems to allow for just the attribute as a selector as well making it a cool way to create self-contained, isolated components without the need to add classes or ids to every piece of component built.
|
||||
The ability to use attributes as a css selectors have been in the spec and supported by browsers for a while but Blazor might be the first time I have seen them used like this. Usually attribute selectors have been used to target specific input fields via name or type like so `input[type="text"]` but the spec seems to allow for just the attribute as a selector as well making it a cool way to create self-contained, isolated components without the need to add classes or ids to every piece of component built.
|
||||
|
||||
However, not all is sunshine and roses with this feature. There are, unfortunately, exceptions. And the most glaring of those is `EditForm`.
|
||||
|
||||
|
@ -138,6 +134,16 @@ Let's break it down. Since `<EditForm>` won't receive the isolation attribute, w
|
|||
|
||||
Personally, I dislike this approach because it adds an unnecessary extra layer to the generated html but that seems the only way to make isolation work.
|
||||
|
||||
Next one is not a big deal but it is one to keep in mind when developing Blazor applications.
|
||||
|
||||
## Deviating From Expected File Structure Has Consequences
|
||||
The basic structure of a Blazor app is that you've got a single folder `Components` within which you have all the code. However, some developers might want to organize their files in a different method by grouping files together by theme rather than by type. This is known as a feature model or vertical slice. So instead of having separate folder for Models, Controllers, Views etc. you have FeatureA and FeatureB and within each feature folder you have the associated model files, controller files, views, components, services etc.
|
||||
|
||||
Should you attempt to use this method in Blazor, expect to do some extra work. Mainly, you might need to import extra libraries into the feature folder itself. For example, to do interaction with buttons and the like, you need to import `@using Microsoft.AspNetCore.Components.Web`. Despite the fact that there is already an `_Imports.razor` file, you still need to do this if you deviate from the Blazor's default structure. There are two ways to import these libraries into your component.
|
||||
|
||||
1. Import directly into the component
|
||||
2. Create a `_Imports.razor` file at your feature folder
|
||||
|
||||
Finally, let's discuss very briefly some error management.
|
||||
|
||||
## Stacktraces Are Useless
|
||||
|
|
Loading…
Reference in a new issue