ModelToComponentMapper 1.0.2.4
See the version list below for details.
dotnet add package ModelToComponentMapper --version 1.0.2.4
NuGet\Install-Package ModelToComponentMapper -Version 1.0.2.4
<PackageReference Include="ModelToComponentMapper" Version="1.0.2.4" />
<PackageVersion Include="ModelToComponentMapper" Version="1.0.2.4" />
<PackageReference Include="ModelToComponentMapper" />
paket add ModelToComponentMapper --version 1.0.2.4
#r "nuget: ModelToComponentMapper, 1.0.2.4"
#:package ModelToComponentMapper@1.0.2.4
#addin nuget:?package=ModelToComponentMapper&version=1.0.2.4
#tool nuget:?package=ModelToComponentMapper&version=1.0.2.4
Model to Component Mapper
Blazor model to component mapper. Maps a class to a blazor component. The component must have a parameter that accepts the model. This can allow an application to be completely data driven.
Example:
@page "/"
<ModelView Source="FakeDataSource.BlogItems" />
Output:
Input data source:
DataSource.cs
public static class FakeDataSource
{
public static readonly IReadOnlyList<object> BlogItems = new object[]
{
new Heading { Text = "Hello World!", Level= HeadingLevel.One , InputAttributes = new Dictionary<string, object>() { { "class", "text-info" } } },
new Paragraph { Text = "Welcome to my demonstration" },
new Paragraph { Text = "All these items are being rendered based on their data type and order from an enumerable object source" },
new ImageSource { DisplayHeight = 259, DisplayWidth = 241, Source = imageData, InputAttributes = new Dictionary<string, object>() { { "class", "shadow-lg p-3 mb-5 bg-white rounded" } } },
new Paragraph { Text = "Pretty cool, huh?" },
new Anchor { Text = "Brian Parker", Href = "https://brianparker.azurewebsites.net/" },
new Break { },
new Markup { RawHtml = stackFlare },
};
public static readonly IReadOnlyList<object> NavItems = new object[]
{
new NavItem { Text = "Home", Icon ="oi oi-home" , Href ="" , NavLinkMatch = NavLinkMatch.All },
new NavItem { Text = "By Mark-up", Icon ="oi oi-code" , Href ="byLayout" },
new NavItem { Text = "By Code", Icon ="oi oi-excerpt" , Href ="byCode" },
new NavItem { Text = "Non Enumerable", Icon ="oi oi-image" , Href ="nonEnumerable" },
new NavItem { Text = "Standard Component", Icon ="oi oi-image" , Href ="standardComponent" },
new NavItem { Text = "Registration Error", Icon ="oi oi-bug" , Href ="registrationError" },
};
private const string imageData = "data:image/jpeg; base64, (truncated)";
private const string stackFlare = "<a href=\"https://stackoverflow.com/users/1492496/brian-parker\" target=\"_blank\"><img src=\"https://stackoverflow.com/users/flair/1492496.png?theme=dark\" width=\"208\" height=\"58\" alt=\"profile for Brian Parker at Stack Overflow, Q & A for professional and enthusiast programmers\" title=\"profile for Brian Parker at Stack Overflow, Q & A for professional and enthusiast programmers\"></a>";
}
The data source Source
does not have to be enumerable.
<ModelView Source="ImageSource" />
@code {
ImageSource ImageSource = new ImageSource { Source = FakeDataSource.imageData, DisplayHeight = 259, DisplayWidth = 241 };
}
Example Component
NavItemView.razor
<li class="nav-item px-3">
<NavLink class="nav-link" href="@NavItem.Href" Match="@NavItem.NavLinkMatch">
<span class="@NavItem.Icon" aria-hidden="true"></span> @NavItem.Text
</NavLink>
</li>
@code {
[Parameter]
public NavItem NavItem { get; set; }
}
Usage
This is overkill for only one model type it is just an example of view registration using mark-up within a .razor component.
<ModelView Source="DataSource.NavItems">
<ViewRegistration TModel="NavItem" TComponent="NavItemView" PropertyName="NavItem" />
</ModelView>
The library provides a base component
ViewComponentBase
that can be inherited instead of ComponentBase
. This is a convenient way of implementing the required property with the parameter name Model
.
@inherits ViewComponentBase<NavItem>
<li class="nav-item px-3">
<NavLink class="nav-link" href="@Model.Href" Match="@Model.NavLinkMatch">
<span class="@Model.Icon" aria-hidden="true"></span> @Model.Text
</NavLink>
</li>
Usage
<ModelView Source="DataSource.NavItems">
<ViewRegistration TModel="NavItem" TComponent="NavItemView" />
</ModelView>
Note: PropertyName is defaulted to "Model". It does not have to be declared when using ViewComponentBase
You can register all your components in program.cs
. These become the default components. Any components defined within the <ModelView>
mark-up override the default components.
In program.cs
public class Program
{
public static async Task Main(string[] args)
{
...
ConfigureDefaultViewModelSelector(builder);
...
}
private static void ConfigureDefaultViewModelSelector(WebAssemblyHostBuilder builder)
{
ViewModelComponentSelector viewModelComponentSelector = new ViewModelComponentSelector();
viewModelComponentSelector.RegisterDefaults();
viewModelComponentSelector.RegisterView<NavItem, NavItemView>();
builder.Services.AddScoped<IViewSelector>(sp => viewModelComponentSelector);
}
}
The previous example could then become:
<ModelView Source="DataSource.NavItems" />
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 is compatible. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 was computed. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net5.0
- Microsoft.AspNetCore.Components.Web (>= 5.0.0)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on ModelToComponentMapper:
Package | Downloads |
---|---|
OrakTech.BlazorToast
Enables Bootstaps Toast's in blazor. |
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last Updated |
---|---|---|
1.0.2.13 | 643 | 12/11/2020 |
1.0.2.12 | 477 | 12/10/2020 |
1.0.2.4 | 458 | 11/14/2020 |
1.0.2 | 471 | 11/10/2020 |
1.0.1.1 | 351 | 11/3/2020 |
1.0.1 | 287 | 10/10/2020 |
1.0.0 | 330 | 10/9/2020 |
0.9.1-beta | 294 | 10/7/2020 |
0.9.0.2-alpha | 356 | 10/7/2020 |
0.9.0.1-alpha | 291 | 10/6/2020 |