You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aspnetcore/blazor/components.md
+43-2Lines changed: 43 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ description: Learn how to create and use Razor components, including how to bind
5
5
monikerRange: '>= aspnetcore-3.1'
6
6
ms.author: riande
7
7
ms.custom: mvc
8
-
ms.date: 12/28/2019
8
+
ms.date: 01/24/2020
9
9
no-loc: [Blazor, SignalR]
10
10
uid: blazor/components
11
11
---
@@ -82,7 +82,7 @@ To render a component from a page or view, use the `Component` Tag Helper:
82
82
param-IncrementAmount="10" />
83
83
```
84
84
85
-
Passing parameters (for example, `IncrementAmount`in the preceding example) is supported.
85
+
The parameter type must be JSON serializable, which typically means that the type must have a default constructor and settable properties. For example, you can specify a value for `IncrementAmount`because the type of `IncrementAmount`is an `int`, which is a primitive type supported by the JSON serializer.
86
86
87
87
`RenderMode` configures whether the component:
88
88
@@ -101,6 +101,10 @@ Rendering server components from a static HTML page isn't supported.
101
101
102
102
For more information on how components are rendered, component state, and the `Component` Tag Helper, see <xref:blazor/hosting-models>.
103
103
104
+
## Tag Helpers aren't used in components
105
+
106
+
[Tag Helpers](xref:mvc/views/tag-helpers/intro) aren't supported in Razor components (*.razor* files). To provide Tag Helper-like functionality in Blazor, create a component with the same functionality as the Tag Helper and use the component instead.
107
+
104
108
## Use components
105
109
106
110
Components can include other components by declaring them using HTML element syntax. The markup for using a component looks like an HTML tag where the name of the tag is the component type.
@@ -1141,6 +1145,43 @@ using Microsoft.AspNetCore.Components.Routing;
1141
1145
usingMicrosoft.AspNetCore.Components.Web;
1142
1146
```
1143
1147
1148
+
## Specify a base class
1149
+
1150
+
The [`@inherits`](xref:mvc/views/razor#inherits) directive can be used to specify a base class for a component. The following example shows how a component can inherit a base class, `BlazorRocksBase`, to provide the component's properties and methods. The base class should derive from `ComponentBase`.
1151
+
1152
+
*Pages/BlazorRocks.razor*:
1153
+
1154
+
```razor
1155
+
@page "/BlazorRocks"
1156
+
@inherits BlazorRocksBase
1157
+
1158
+
<h1>@BlazorRocksText</h1>
1159
+
```
1160
+
1161
+
*BlazorRocksBase.cs*:
1162
+
1163
+
```csharp
1164
+
usingMicrosoft.AspNetCore.Components;
1165
+
1166
+
namespaceBlazorSample
1167
+
{
1168
+
publicclassBlazorRocksBase : ComponentBase
1169
+
{
1170
+
publicstringBlazorRocksText { get; set; } =
1171
+
"Blazor rocks the browser!";
1172
+
}
1173
+
}
1174
+
```
1175
+
1176
+
## Specify an attribute
1177
+
1178
+
Attributes can be specified in Razor components with the [`@attribute`](xref:mvc/views/razor#attribute) directive. The following example applies the `[Authorize]` attribute to the component class:
1179
+
1180
+
```razor
1181
+
@page "/"
1182
+
@attribute [Authorize]
1183
+
```
1184
+
1144
1185
## Import components
1145
1186
1146
1187
The namespace of a component authored with Razor is based on (in priority order):
0 commit comments