We can create Blazor components within our Blazor application by simply right mouse clicking on a folder or project in Visual Studio and select Add | Razor Component. <\/p>\n
A component derives from Microsoft.AspNetCore.Components.ComponentBase, whether implicitly, such as within a .razor file or explicitly, such as in a C# code file. <\/p>\n
Razor component<\/strong><\/p>\n If we create a .razor file we are already implementing a ComponentBase, but usually without an explicit inherit such as the following <\/p>\n With or without this @inherit, we will get a generated file (written to obj\\Debug\\netstandard2.1\\Razor) that is a class which implements the ComponentBase.<\/p>\n We can add code to our .razor file in a @code block, thus combining markup and code within the same file, as per this example<\/p>\n Separate code and razor files<\/strong><\/p>\n As alternative to a single .razor file with both markup and code, we can create a .cs file for our code. For example if our .razor file is MyComponent.razor we could create a MyComponent.cs and put our code into a C# class. The class should derive from ComponentBase and also be partial<\/p>\n Hence now we have a MyComponent.razor file that looks like this<\/p>\n and a C# file, MyComponent.cs that looks like this<\/p>\n Ofcourse the use of the partial<\/em> keyword is the key to this working. If we name the file MyComponent.cs all will be fine, but if we name the file MyComponent.razor.cs<\/strong> the file will appear like a code-behind file in other C# scenarios.<\/p>\n Code only component<\/strong><\/p>\n We could also write a code only component, so let’s assume we have only a MyComponent.cs file<\/p>\n Obviously we have to put a little bit of effort into constructing the elements in the BuildRenderTree method, but this might suit some scenarios.<\/p>\n Pages and Layouts<\/strong><\/p>\n Pages and Layouts are just components, just like those discussed above. <\/p>\n The only difference of between a Page and component is that our class is annotated with a PageAttribute for Page. Obviously in a .razor file this happens automatically when we add a page declaration as below<\/p>\n As for the layout, we inherit from LayoutComponentBase, in a .razor file this looks like this<\/p>\n We can create Blazor components within our Blazor application by simply right mouse clicking on a folder or project in Visual Studio and select Add | Razor Component. A component derives from Microsoft.AspNetCore.Components.ComponentBase, whether implicitly, such as within a .razor file or explicitly, such as in a C# code file. Razor component If we create […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[305],"tags":[],"class_list":["post-8456","post","type-post","status-publish","format-standard","hentry","category-blazor"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=8456"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8456\/revisions"}],"predecessor-version":[{"id":8464,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8456\/revisions\/8464"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n@inherits ComponentBase\r\n<\/pre>\n
\r\n@namespace BlazorApp\r\n\r\n<h3>@Text<\/h3>\r\n\r\n@code {\r\n [Parameter]\r\n public string Text { get; set; }\r\n}\r\n<\/pre>\n\r\n@namespace BlazorApp\r\n\r\n<h3>@Text<\/h3>\r\n<\/pre>\n
\r\nusing Microsoft.AspNetCore.Components;\r\n\r\nnamespace BlazorApp\r\n{\r\n public partial class MyComponent : ComponentBase\r\n {\r\n [Parameter]\r\n public string Text { get; set; }\r\n }\r\n}\r\n<\/pre>\n\r\nusing Microsoft.AspNetCore.Components;\r\nusing Microsoft.AspNetCore.Components.Rendering;\r\n\r\nnamespace BlazorApp\r\n{\r\n public class MyComponent : ComponentBase\r\n {\r\n protected override void BuildRenderTree(RenderTreeBuilder builder)\r\n {\r\n builder.OpenElement(1, "h3");\r\n builder.AddContent(2, Text);\r\n builder.CloseElement();\r\n }\r\n\r\n [Parameter]\r\n public string Text { get; set; }\r\n }\r\n}\r\n<\/pre>\n\r\n@page "\/"\r\n<\/pre>\n
\r\n@inherits LayoutComponentBase\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"