Blazor Components

Question 1

How to write component names?

Answer 1

Should be written in PascalCase.

Question 2

What syntax does the Blazor components use?

Answer 2

It uses the Razor syntax.

Question 3

How to create the most simple component as possible?

Answer 3

Just extract the html and place in a .razor file. Then use it in the place you extracted the HTML.

Question 4

What is the “App” component and on which server deployment schema is it used?

Answer 4

The app component is the root of any blazor app, either WASM or serverside blazor.

Question 5

How does the Blazor component structure look like?

Answer 5

Components within components within components and so on..

Question 6

Would an access to the filesystem be equal on blazor wasm and server side blazor?

Answer 6

No… they differ. On server side it would open the server folder.

Question 7

Are the structure and feature equal on both blazor deploy model?

Answer 7

Yes.

Question 8

What is the difference between a razor component and a razor page?

Answer 8

Structurally none. The page has the @page instruction indicating the route.

Question 9

How to create a library containing razor components?

Answer 9

By using a razor class library.

Question 10

What does the “razor shared lib” template contain?

Answer 10

wwwroot folder, an _imports and an example component.

Question 11

How to use a library in the project?

Answer 11

Create a reference to the component lib project and adding a @using statement in the _imports.razor

Question 12

Does visual studio/vscode generate a class for each razor file? What is its extension and what is the base class it inherits?

Answer 12

Yes. Every razor file generates a razor.g.cs that has a class that inherits from ComponentBase.

Question 13

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?

Answer 13

ComponentBase. It is necessary to define that the razor file @inherits from the class that inherits from component base.

Question 14

Is there another way to moving the source code to another file other than inheriting from component base?

Answer 14

Yes. with partial classes.

Question 15

Where are the default event handlers (such as @onClick) stored?

Answer 15

in the ms.aspnetcore.components.web

Question 16

What is the “diff mechanism” that is applied in Blazor?

Answer 16

It means that changes to the html will be applied without a dom refresh.

Question 17

What to do when my component needs to receive values from another component?

Answer 17

It is necessary to declare a public property (w/ get and setters) and data annotate it with [Parameter]

Question 18

What is the effect of having a public prop called ChildContent with the RenderFragment type?

Answer 18

Anything inside the component calling will be rendered.

Question 19

What are the two ways of passing a parameter to a component?

Answer 19

Via URL or via [Parameter]

Question 20

What happens when the HTML that hold the component is removed from the HTML? How to prevent it from getting destroyed?

Answer 20

It gets destroyed. You can prevent it from being destroyed by hiding the HTML element instead.

Question 21

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?

Answer 21

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)

Question 22

What is ONE-way bind? How to do it using the razor syntax?

Answer 22

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.

Question 23

What is TWO-way binds: How to do it using the razor syntax? When the bind is fired?

Answer 23

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.

Question 24

Should we use bindings when we want to do extra computations in the fields OnChange event?

Answer 24

No. You have to manually implement this event.

Question 25

How to notify the parent component when the child component is changed?

Answer 25

Via EventCallback OnMyEventHappens in the component that is going to be watched. Then the parent event needs to subscribe to this callback.

Question 26

How to create a custom bind on the razor syntax, such as @Bind-Name?

Answer 26

You need to create an EventCallback with the name NameChanged.

Question 27

What is the concept of cascading values? How to declare it? Will blazor monitor the value of these values and trigger updates, can it be disabled?

Answer 27

It is when you define a variable to be cascaded to the child components. Declared using CascadingValue value=”myvar” and on the child component as [CascadingParameter]. Yes, blazor will monitor them - disabled by IsFixed=True.

Question 28

What is attribute splatting?

Answer 28

Defines a dictionary of string, object and then allow defining element properties inside, such as “size”, “50”

Question 29

How to reference an object inside a component?

Answer 29

By using @ref.