ModelToComponentMapper 1.0.2.4

There is a newer version of this package available.
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
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="ModelToComponentMapper" Version="1.0.2.4" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="ModelToComponentMapper" Version="1.0.2.4" />
                    
Directory.Packages.props
<PackageReference Include="ModelToComponentMapper" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add ModelToComponentMapper --version 1.0.2.4
                    
#r "nuget: ModelToComponentMapper, 1.0.2.4"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package ModelToComponentMapper@1.0.2.4
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=ModelToComponentMapper&version=1.0.2.4
                    
Install as a Cake Addin
#tool nuget:?package=ModelToComponentMapper&version=1.0.2.4
                    
Install as a Cake Tool

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:

alt text

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 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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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