{"id":21013999,"url":"https://github.com/brianlparker/modeltocomponent","last_synced_at":"2025-05-15T04:34:44.386Z","repository":{"id":136033369,"uuid":"301472003","full_name":"BrianLParker/ModelToComponent","owner":"BrianLParker","description":"Blazor Model to Component Mapper","archived":false,"fork":false,"pushed_at":"2020-12-11T07:20:02.000Z","size":500,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T04:05:47.360Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BrianLParker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-05T16:29:09.000Z","updated_at":"2022-11-11T16:46:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"f17b7244-f612-4039-a1b6-bf3c954c9fd2","html_url":"https://github.com/BrianLParker/ModelToComponent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianLParker%2FModelToComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianLParker%2FModelToComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianLParker%2FModelToComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianLParker%2FModelToComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BrianLParker","download_url":"https://codeload.github.com/BrianLParker/ModelToComponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254274709,"owners_count":22043570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T09:44:43.827Z","updated_at":"2025-05-15T04:34:44.380Z","avatar_url":"https://github.com/BrianLParker.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Model to Component Mapper\nBlazor 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.\n\n## Example:\n\n\n```\n@page \"/\"\n\n\u003cModelView Source=\"FakeDataSource.BlogItems\" /\u003e\n```\n\n### Output:\n\n![alt text](https://user-images.githubusercontent.com/8317299/95257997-d94d1900-0870-11eb-99f5-832aba33f2f0.png)\n\n\n### Input data source:\n\n```DataSource.cs```\n\n```\npublic static class FakeDataSource\n{\n    public static readonly IReadOnlyList\u003cobject\u003e BlogItems = new object[]\n    {\n        new Heading { Content = \"Hello World!\", Level= HeadingLevel.One , InputAttributes = new Dictionary\u003cstring, object\u003e() { { \"class\", \"text-info\" } } },\n        new Division { Content = new object[] \n        {  \n            new Paragraph { Content = \"Welcome to my demonstration\" },\n            new Paragraph { Content = \"All these items are being rendered based on their data type and order from an enumerable object source\" }\n        } },\n        new ImageSource { DisplayHeight = 259, DisplayWidth = 241, Source = imageData, InputAttributes = new Dictionary\u003cstring, object\u003e() { { \"class\", \"shadow-lg p-3 mb-5 bg-white rounded\" } }  },\n        new Paragraph { Content = \"Pretty cool, huh?\" },\n        new Anchor { Content = \"Brian Parker\", Href = \"https://brianparker.azurewebsites.net/\" },\n        new Break { },\n        new Markup { RawHtml = stackFlare }\n    };\n\n    public static readonly IReadOnlyList\u003cobject\u003e NavItems = new object[]\n    {\n        new NavItem { Text = \"Home\", Icon =\"oi oi-home\" , Href =\"\" , NavLinkMatch = NavLinkMatch.All },\n        new NavItem { Text = \"By Mark-up\", Icon =\"oi oi-code\" , Href =\"byLayout\" },\n        new NavItem { Text = \"By Code\", Icon =\"oi oi-excerpt\" , Href =\"byCode\" },\n        new NavItem { Text = \"Non Enumerable\", Icon =\"oi oi-image\" , Href =\"nonEnumerable\" },\n        new NavItem { Text = \"Standard Component\", Icon =\"oi oi-image\" , Href =\"standardComponent\" },\n        new NavItem { Text = \"Registration Error\", Icon =\"oi oi-bug\" , Href =\"registrationError\" },\n    };\n\n    public const string imageData = \"data:image/jpeg; base64, ...\";\n    public const string stackFlare = \"\u003ca href=\\\"https://stackoverflow.com/users/1492496/brian-parker\\\" target=\\\"_blank\\\"\u003e\u003cimg src=\\\"https://stackoverflow.com/users/flair/1492496.png?theme=dark\\\" width=\\\"208\\\" height=\\\"58\\\" alt=\\\"profile for Brian Parker at Stack Overflow, Q \u0026 A for professional and enthusiast programmers\\\" title=\\\"profile for Brian Parker at Stack Overflow, Q \u0026 A for professional and enthusiast programmers\\\"\u003e\u003c/a\u003e\";\n\n}\n```\n\n\nThe data source ```Source``` does not have to be enumerable.\n\n```\n\u003cModelView Source=\"ImageSource\" /\u003e\n\n@code {\n    ImageSource ImageSource = new ImageSource { Source = FakeDataSource.imageData, DisplayHeight = 259, DisplayWidth = 241 };\n}\n\n```\n\n\n## Example Component\n```NavItemView.razor```\n\n```\n\u003cli class=\"nav-item px-3\"\u003e\n    \u003cNavLink class=\"nav-link\" href=\"@NavItem.Href\" Match=\"@NavItem.NavLinkMatch\"\u003e\n        \u003cspan class=\"@NavItem.Icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e @NavItem.Text\n    \u003c/NavLink\u003e\n\u003c/li\u003e\n\n@code {\n    [Parameter]\n    public NavItem NavItem { get; set; }\n}\n```\n### Usage\nThis is overkill for only one model type it is just an example of view registration using mark-up within a .razor component.\n```\n\u003cModelView Source=\"DataSource.NavItems\"\u003e\n    \u003cViewRegistration TModel=\"NavItem\" TComponent=\"NavItemView\" PropertyName=\"NavItem\" /\u003e\n\u003c/ModelView\u003e\n```\n\n### The library provides a base component\n``` ViewComponentBase ``` that can be inherited instead of ``` ComponentBase ``` . This is a convenient way of implementing the required property with the parameter name ``` Model ``` .\n\n```\n@inherits ViewComponentBase\u003cNavItem\u003e\n\u003cli class=\"nav-item px-3\"\u003e\n    \u003cNavLink class=\"nav-link\" href=\"@Model.Href\" Match=\"@Model.NavLinkMatch\"\u003e\n        \u003cspan class=\"@Model.Icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e @Model.Text\n    \u003c/NavLink\u003e\n\u003c/li\u003e\n```\n\n### Usage\n```\n\u003cModelView Source=\"DataSource.NavItems\"\u003e\n    \u003cViewRegistration TModel=\"NavItem\" TComponent=\"NavItemView\" /\u003e\n\u003c/ModelView\u003e\n```\n\nNote: PropertyName is defaulted to \"Model\". It does not have to be declared when using ``` ViewComponentBase ```\n\n\nYou can register all your components in ``` program.cs ```. These become the default components. Any components defined within the ``` \u003cModelView\u003e ``` mark-up override the default components.\nIn ```program.cs``` \n\n```\n    public class Program\n    {\n        public static async Task Main(string[] args)\n        {\n           ...\n\n            ConfigureDefaultViewModelSelector(builder);\n\n            ...\n        }\n\n        private static void ConfigureDefaultViewModelSelector(WebAssemblyHostBuilder builder)\n        {\n            ViewModelComponentSelector viewModelComponentSelector = new ViewModelComponentSelector();\n            viewModelComponentSelector.RegisterDefaults();\n            viewModelComponentSelector.RegisterView\u003cNavItem, NavItemView\u003e();\n            builder.Services.AddScoped\u003cIViewSelector\u003e(sp =\u003e viewModelComponentSelector);\n        }\n    }\n ```\n\nThe previous example could then become:\n\n```\n\u003cModelView Source=\"DataSource.NavItems\" /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianlparker%2Fmodeltocomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianlparker%2Fmodeltocomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianlparker%2Fmodeltocomponent/lists"}