Pomocnik tagów składników w ASP.NET Core
Pomocnik tagów składników renderuje Razor składnik na Razor stronie stron lub widoku MVC.
Wymagania wstępne
Postępuj zgodnie ze wskazówkami w sekcji Use non-routable components in pages or views (Używanie składników niezwiązanych z routingem na stronach lub widokach) artykułu Integrate ASP.NET Core components into ASP.NET Core apps (Integrowanie składników platformy ASP.NET Core Razor w aplikacjach platformy ASP.NET Core).
Postępuj zgodnie ze wskazówkami w sekcji Konfiguracja dla jednego z następujących rozwiązań:
- Blazor Server: Integrowanie składników routingu i nie routable Razor w Razor aplikacjach Pages i MVC.
- Blazor WebAssembly: Integrowanie Razor składników z hostowanego Blazor WebAssembly rozwiązania w Razor aplikacjach Pages i MVC.
Postępuj zgodnie ze wskazówkami w sekcji Konfiguracja w artykule Prerender i integruj składniki ASP.NET CoreRazor.
Pomocnik tagów składnika
Aby renderować składnik ze strony lub widoku, użyj pomocnika tagu składnika (<component>
tag).
Uwaga
Integrowanie Razor składników z Razor aplikacjami Stron i MVC w hostowanej Blazor WebAssembly aplikacji jest obsługiwane w programie ASP.NET Core na platformie .NET 5.0 lub nowszej.
RenderMode konfiguruje, czy składnik:
- Jest wstępnie załadowany do strony.
- Jest renderowany jako statyczny kod HTML na stronie lub jeśli zawiera informacje niezbędne do uruchomienia Blazor aplikacji z agenta użytkownika.
Blazor WebAssembly Tryby renderowania aplikacji są wyświetlane w poniższej tabeli.
Tryb renderowania | opis |
---|---|
WebAssembly |
Renderuje znacznik aplikacji Blazor WebAssembly do użycia w celu uwzględnienia składnika interaktywnego podczas ładowania w przeglądarce. Składnik nie jest wstępnie zainstalowany. Ta opcja ułatwia renderowanie różnych Blazor WebAssembly składników na różnych stronach. |
WebAssemblyPrerendered |
Prerenders składnik do statycznego kodu HTML i zawiera znacznik dla Blazor WebAssembly aplikacji do późniejszego użycia, aby składnik był interaktywny podczas ładowania w przeglądarce. |
Tryby renderowania przedstawiono w poniższej tabeli.
Tryb renderowania | opis |
---|---|
ServerPrerendered | Renderuje składnik do statycznego kodu HTML i zawiera znacznik aplikacji po stronie Blazor serwera. Po uruchomieniu agenta użytkownika ten znacznik jest używany do uruchamiania Blazor aplikacji. |
Server | Renderuje znacznik dla aplikacji po stronie Blazor serwera. Dane wyjściowe ze składnika nie są uwzględniane. Po uruchomieniu agenta użytkownika ten znacznik jest używany do uruchamiania Blazor aplikacji. |
Static | Renderuje składnik do statycznego kodu HTML. |
Tryby renderowania aplikacji są wyświetlane w poniższej tabeli.
Tryb renderowania | opis |
---|---|
ServerPrerendered | Renderuje składnik do statycznego kodu HTML i zawiera znacznik aplikacji po stronie Blazor serwera. Po uruchomieniu agenta użytkownika ten znacznik jest używany do uruchamiania Blazor aplikacji. |
Server | Renderuje znacznik dla aplikacji po stronie Blazor serwera. Dane wyjściowe ze składnika nie są uwzględniane. Po uruchomieniu agenta użytkownika ten znacznik jest używany do uruchamiania Blazor aplikacji. |
Static | Renderuje składnik do statycznego kodu HTML. |
Dodatkowe cechy obejmują:
- Wiele pomocników tagów składników renderujących wiele Razor składników jest dozwolonych.
- Składniki nie mogą być renderowane dynamicznie po uruchomieniu aplikacji.
- Chociaż strony i widoki mogą używać składników, odwrotnie nie jest prawdziwe. Składniki nie mogą używać funkcji specyficznych dla widoku i strony, takich jak widoki częściowe i sekcje. Aby użyć logiki z widoku częściowego w składniku, należy uwzględnić logikę widoku częściowego w składniku.
- Renderowanie składników serwera ze statycznej strony HTML nie jest obsługiwane.
Następujący pomocnik tagów składników renderuje EmbeddedCounter
składnik na stronie lub widoku w aplikacji po stronie Blazor serwera za pomocą polecenia ServerPrerendered
:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components
...
<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />
W poprzednim przykładzie przyjęto założenie, że EmbeddedCounter
składnik znajduje się w folderze aplikacji Components
. Symbol zastępczy {APP ASSEMBLY}
to nazwa zestawu aplikacji (na przykład @using BlazorSample.Components
).
Pomocnik tagów składników może również przekazywać parametry do składników. Rozważmy następujący ColorfulCheckbox
składnik, który ustawia kolor i rozmiar etykiety pola wyboru.
Components/ColorfulCheckbox.razor
:
<label style="font-size:@(Size)px;color:@Color">
<input @bind="Value"
id="survey"
name="blazor"
type="checkbox" />
Enjoying Blazor?
</label>
@code {
[Parameter]
public bool Value { get; set; }
[Parameter]
public int Size { get; set; } = 8;
[Parameter]
public string? Color { get; set; }
protected override void OnInitialized()
{
Size += 10;
}
}
Parametry Size
składnika (int
) i Color
(string
) można ustawić za pomocą pomocnika tagów składników:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components
...
<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered"
param-Size="14" param-Color="@("blue")" />
W poprzednim przykładzie przyjęto założenie, że ColorfulCheckbox
składnik znajduje się w folderze Components
. Symbol zastępczy {APP ASSEMBLY}
to nazwa zestawu aplikacji (na przykład @using BlazorSample.Components
).
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Shared
...
<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />
W poprzednim przykładzie przyjęto założenie, że EmbeddedCounter
składnik znajduje się w folderze aplikacji Shared
. Symbol zastępczy {APP ASSEMBLY}
to nazwa zestawu aplikacji (na przykład @using BlazorSample.Shared
lub @using BlazorSample.Client.Shared
w rozwiązaniu hostowanym Blazor ).
Pomocnik tagów składników może również przekazywać parametry do składników. Rozważmy następujący ColorfulCheckbox
składnik, który ustawia kolor i rozmiar etykiety pola wyboru.
Shared/ColorfulCheckbox.razor
:
<label style="font-size:@(Size)px;color:@Color">
<input @bind="Value"
id="survey"
name="blazor"
type="checkbox" />
Enjoying Blazor?
</label>
@code {
[Parameter]
public bool Value { get; set; }
[Parameter]
public int Size { get; set; } = 8;
[Parameter]
public string? Color { get; set; }
protected override void OnInitialized()
{
Size += 10;
}
}
Parametry Size
składnika (int
) i Color
(string
) można ustawić za pomocą pomocnika tagów składników:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Shared
...
<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered"
param-Size="14" param-Color="@("blue")" />
W poprzednim przykładzie przyjęto założenie, że ColorfulCheckbox
składnik znajduje się w folderze Shared
. Symbol zastępczy {APP ASSEMBLY}
to nazwa zestawu aplikacji (na przykład @using BlazorSample.Shared
).
Poniższy kod HTML jest renderowany na stronie lub w widoku:
<label style="font-size:24px;color:blue">
<input id="survey" name="blazor" type="checkbox">
Enjoying Blazor?
</label>
Przekazywanie cytowanego ciągu wymaga wyrażenia jawnegoRazor, jak pokazano param-Color
w poprzednim przykładzie. Razor Zachowanie string
analizowania wartości typu nie ma zastosowania do param-*
atrybutu, ponieważ atrybut jest typemobject
.
Obsługiwane są wszystkie typy parametrów, z wyjątkiem:
- Parametry ogólne.
- Parametry nies serializowalne.
- Dziedziczenie w parametrach kolekcji.
- Parametry, których typ jest zdefiniowany poza aplikacją Blazor WebAssembly lub w zestawie ładowanym z opóźnieniem.
- W przypadku odbierania delegata dla zawartości podrzędnej
RenderFragment
(na przykładparam-ChildContent="..."
). W tym scenariuszu zalecamy utworzenie Razor składnika (.razor
), który odwołuje się do składnika, który ma być renderowany przy użyciu zawartości podrzędnej, którą chcesz przekazać, a następnie wywołania Razor składnika ze strony lub widoku za pomocą pomocnika tagów składników.
Typ parametru musi mieć JSwartość ON serializable, co zwykle oznacza, że typ musi mieć domyślny konstruktor i właściwości ustawialne. Na przykład można określić wartość dla Size
i Color
w poprzednim przykładzie, ponieważ typy i Color
są typami Size
pierwotnymi (int
i string
), które są obsługiwane przez JSserializator ON.
W poniższym przykładzie obiekt klasy jest przekazywany do składnika:
MyClass.cs
:
public class MyClass
{
public MyClass()
{
}
public int MyInt { get; set; } = 999;
public string MyString { get; set; } = "Initial value";
}
Klasa musi mieć publiczny konstruktor bez parametrów.
Components/ParameterComponent.razor
:
<h2>ParameterComponent</h2>
<p>Int: @MyObject?.MyInt</p>
<p>String: @MyObject?.MyString</p>
@code
{
[Parameter]
public MyClass? MyObject { get; set; }
}
Pages/MyPage.cshtml
:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}
@using {APP ASSEMBLY}.Components
...
@{
var myObject = new MyClass();
myObject.MyInt = 7;
myObject.MyString = "Set by MyPage";
}
<component type="typeof(ParameterComponent)" render-mode="ServerPrerendered"
param-MyObject="@myObject" />
W poprzednim przykładzie przyjęto założenie, że ParameterComponent
składnik znajduje się w folderze aplikacji Components
. Symbol zastępczy {APP ASSEMBLY}
to nazwa zestawu aplikacji (na przykład @using BlazorSample
i @using BlazorSample.Components
). MyClass
znajduje się w przestrzeni nazw aplikacji.
Shared/ParameterComponent.razor
:
<h2>ParameterComponent</h2>
<p>Int: @MyObject?.MyInt</p>
<p>String: @MyObject?.MyString</p>
@code
{
[Parameter]
public MyClass? MyObject { get; set; }
}
Pages/MyPage.cshtml
:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}
@using {APP ASSEMBLY}.Shared
...
@{
var myObject = new MyClass();
myObject.MyInt = 7;
myObject.MyString = "Set by MyPage";
}
<component type="typeof(ParameterComponent)" render-mode="ServerPrerendered"
param-MyObject="@myObject" />
W poprzednim przykładzie przyjęto założenie, że ParameterComponent
składnik znajduje się w folderze aplikacji Shared
. Symbol zastępczy {APP ASSEMBLY}
to nazwa zestawu aplikacji (na przykład @using BlazorSample
i @using BlazorSample.Shared
). MyClass
znajduje się w przestrzeni nazw aplikacji.
Dodatkowe zasoby
Opinia
https://aka.ms/ContentUserFeedback.
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź:Prześlij i wyświetl opinię dla