Blazor Components Flashcards
(29 cards)
How to write component names?
Should be written in PascalCase.
What syntax does the Blazor components use?
It uses the Razor syntax.
How to create the most simple component as possible?
Just extract the html and place in a .razor file. Then use it in the place you extracted the HTML.
What is the “App” component and on which server deployment schema is it used?
The app component is the root of any blazor app, either WASM or serverside blazor.
How does the Blazor component structure look like?
Components within components within components and so on..
Would an access to the filesystem be equal on blazor wasm and server side blazor?
No… they differ. On server side it would open the server folder.
Are the structure and feature equal on both blazor deploy model?
Yes.
What is the difference between a razor component and a razor page?
Structurally none. The page has the @page instruction indicating the route.
How to create a library containing razor components?
By using a razor class library.
What does the “razor shared lib” template contain?
wwwroot folder, an _imports and an example component.
How to use a library in the project?
Create a reference to the component lib project and adding a @using statement in the _imports.razor
Does visual studio/vscode generate a class for each razor file? What is its extension and what is the base class it inherits?
Yes. Every razor file generates a razor.g.cs that has a class that inherits from ComponentBase.
When moving the code from the razor file to a dedicated c# file, which class do we need to inherit? What needs to be done in the razor file?
ComponentBase. It is necessary to define that the razor file @inherits from the class that inherits from component base.
Is there another way to moving the source code to another file other than inheriting from component base?
Yes. with partial classes.
Where are the default event handlers (such as @onClick) stored?
in the ms.aspnetcore.components.web
What is the “diff mechanism” that is applied in Blazor?
It means that changes to the html will be applied without a dom refresh.
What to do when my component needs to receive values from another component?
It is necessary to declare a public property (w/ get and setters) and data annotate it with [Parameter]
What is the effect of having a public prop called ChildContent with the RenderFragment type?
Anything inside the component calling will be rendered.
What are the two ways of passing a parameter to a component?
Via URL or via [Parameter]
What happens when the HTML that hold the component is removed from the HTML? How to prevent it from getting destroyed?
It gets destroyed. You can prevent it from being destroyed by hiding the HTML element instead.
How to make sure the diff mechanism will be able to know automatically if something has changed in the razor component and where to update? When to use it?
By using the @key property. Then assign an unique identifier to it, so that blazor won’t loose track and have to re-render everything. Use it when you plan to update the content of a component that is rendered based on a list (basically for all for each).
Note:
The key can also be assigned to a razor component itself. (looks so much better this way)
What is ONE-way bind? How to do it using the razor syntax?
One-way binding is a way to update the UI based on the property changes (changes in the prop will be reflected on the UI). Can be done by simply @myProp in the html element.
What is TWO-way binds: How to do it using the razor syntax? When the bind is fired?
Changes in the source code property or in the UI will reflect in each other. Can be achieved by @bind=”myProp” in the HTML element. It is fired when user exits the field/element.
Should we use bindings when we want to do extra computations in the fields OnChange event?
No. You have to manually implement this event.
