Skip to content

Commit 42c0a72

Browse files
authored
Update Components_Topic:_Revert_Inherits_Add_Attribute (dotnet#16701)
1 parent 5087657 commit 42c0a72

File tree

1 file changed

+43
-2
lines changed

1 file changed

+43
-2
lines changed

aspnetcore/blazor/components.md

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Learn how to create and use Razor components, including how to bind
55
monikerRange: '>= aspnetcore-3.1'
66
ms.author: riande
77
ms.custom: mvc
8-
ms.date: 12/28/2019
8+
ms.date: 01/24/2020
99
no-loc: [Blazor, SignalR]
1010
uid: blazor/components
1111
---
@@ -82,7 +82,7 @@ To render a component from a page or view, use the `Component` Tag Helper:
8282
param-IncrementAmount="10" />
8383
```
8484

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.
8686

8787
`RenderMode` configures whether the component:
8888

@@ -101,6 +101,10 @@ Rendering server components from a static HTML page isn't supported.
101101

102102
For more information on how components are rendered, component state, and the `Component` Tag Helper, see <xref:blazor/hosting-models>.
103103

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+
104108
## Use components
105109

106110
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;
11411145
using Microsoft.AspNetCore.Components.Web;
11421146
```
11431147

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+
using Microsoft.AspNetCore.Components;
1165+
1166+
namespace BlazorSample
1167+
{
1168+
public class BlazorRocksBase : ComponentBase
1169+
{
1170+
public string BlazorRocksText { 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+
11441185
## Import components
11451186

11461187
The namespace of a component authored with Razor is based on (in priority order):

0 commit comments

Comments
 (0)