https://github.com/brianlparker/modeltocomponent
Blazor Model to Component Mapper
https://github.com/brianlparker/modeltocomponent
Last synced: about 1 year ago
JSON representation
Blazor Model to Component Mapper
- Host: GitHub
- URL: https://github.com/brianlparker/modeltocomponent
- Owner: BrianLParker
- Created: 2020-10-05T16:29:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-11T07:20:02.000Z (over 5 years ago)
- Last Synced: 2025-04-03T04:05:47.360Z (about 1 year ago)
- Language: C#
- Size: 488 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 "/"
```
### Output:
### Input data source:
```DataSource.cs```
```
public static class FakeDataSource
{
public static readonly IReadOnlyList BlogItems = new object[]
{
new Heading { Content = "Hello World!", Level= HeadingLevel.One , InputAttributes = new Dictionary() { { "class", "text-info" } } },
new Division { Content = new object[]
{
new Paragraph { Content = "Welcome to my demonstration" },
new Paragraph { Content = "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() { { "class", "shadow-lg p-3 mb-5 bg-white rounded" } } },
new Paragraph { Content = "Pretty cool, huh?" },
new Anchor { Content = "Brian Parker", Href = "https://brianparker.azurewebsites.net/" },
new Break { },
new Markup { RawHtml = stackFlare }
};
public static readonly IReadOnlyList 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" },
};
public const string imageData = "data:image/jpeg; base64, ...";
public const string stackFlare = "![\"profile](\%22https://stackoverflow.com/users/flair/1492496.png?theme=dark\%22 "\\"profile")
";
}
```
The data source ```Source``` does not have to be enumerable.
```
@code {
ImageSource ImageSource = new ImageSource { Source = FakeDataSource.imageData, DisplayHeight = 259, DisplayWidth = 241 };
}
```
## Example Component
```NavItemView.razor```
```
@NavItem.Text
@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.
```
```
### 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
@Model.Text
```
### Usage
```
```
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 ``` ``` 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();
builder.Services.AddScoped(sp => viewModelComponentSelector);
}
}
```
The previous example could then become:
```
```