{"id":115,"date":"2019-10-02T12:28:46","date_gmt":"2019-10-02T11:28:46","guid":{"rendered":"https:\/\/archicode.be\/?p=115"},"modified":"2019-10-02T12:28:46","modified_gmt":"2019-10-02T11:28:46","slug":"how-to-blazor-components-basic","status":"publish","type":"post","link":"https:\/\/archicode.be\/index.php\/2019\/10\/02\/how-to-blazor-components-basic\/","title":{"rendered":"How to : Blazor components (basic)"},"content":{"rendered":"

One essential aspect of Blazor are components. They are basically your Blazor code container. This is where you put the UI and the code needed for your UI to behave the way you want it to. You can dissociate the code from the UI but it’s not mandatory. For small component, I would advise to keep your code in the same file as the UI so you don’t have to manage a alot of different files.<\/p>\n

    \n
  1. What’s a component (concretely)
    \nA component is just a .razor file that you add to your solution. It consists of HTML code and c# code in the @code (formerly @function) section. Be sure to have the Blazor extension for visual studio installed to make sure visual studio knows it’s a Blazor component<\/p>\n
    @page \"\/counter\"\n\n<h1>Counter<\/h1>\n\n<p>Current count: @currentCount<\/p>\n\n<button class=\"btn btn-primary\" @onclick=\"IncrementCount\">Click me<\/button>\n\n@code {\n    int currentCount = 0;\n\n    void IncrementCount()\n    {\n        currentCount++;\n    }\n}<\/pre>\n
    @page tells Blazor the name of your component.
    \n@currentCount : variable declared in the @code section used for databinding
    \n@onclick : tells Blazor the method (IncrementCount declared in the @code section) to execute when the onclick event is fired.
    \n@code : section where you put your c# code to be executed in your browser.<\/li>\n
  2. How to use the component.
    \nAll you have to do is call it from a parent component<\/p>\n
    <Counter\/><\/pre>\n
    It’s very easy and straight forward But what if you need some parameters?<\/li>\n
  3. Send Parameters to your component
    \nIf you need to adapt a few things in your component, it’s possible to transmit parameters and customize behaviour.
    \nAll you need to do is to create a property in your @code section of your razor component and decorate it with the Parameter attribute. \u00a0That way, blazor knows the value of this can be set elsewhere.<\/p>\n
    [Parameter]\npublic int currentCount { get; set; }<\/pre>\n
    You can also specify a default value for your parameter like this :<\/p>\n
    [Parameter]\n\npublic int currentCount { get; set; } = 40;<\/pre>\n
    and that is how you call you component and set the parameter from the parent :<\/p>\n
    <Counter currentCount=\"25\"\/><\/pre>\n<\/li>\n
  4. Separate your c# code from your HTML in your razor component
    \nIf you want to separate the logic code from the HTML because it’s substantial or because you feel more comfortable, you can. \u00a0There are few conventions to keep in mind when doing so.<\/p>\n
      \n
    1. The class where you want to put your code needs to inherit from ComponentBase (Microsoft.AspNetCore.Components.ComponentBase)\n
      public class CounterBase : ComponentBase<\/pre>\n<\/li>\n
    2. You need to insert in your component (razor file) the reference to your class with an @inherits statement.\n
      @inherits PagesCode.CounterBase<\/pre>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
      Taht’s it for today, thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"
      One essential aspect of Blazor are components. They are basically your Blazor code container. This is where you put the UI and the code needed for your UI to behave the way you want it to. You can dissociate the code from the UI but it’s not mandatory. For small component, I would advise to…<\/p>\n","protected":false},"author":1,"featured_media":125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[5],"tags":[],"class_list":["post-115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":92,"url":"https:\/\/archicode.be\/index.php\/2019\/06\/10\/how-to-blazorify-an-existing-mvc-app\/","url_meta":{"origin":115,"position":0},"title":"How to blazorify an existing mvc app","author":"Hakim","date":"June 10, 2019","format":false,"excerpt":"Blazor is awesome. \u00a0If you don't know what it is, you can check it out here\u00a0but to summarize, it's a framework that allows .net code to run in your browser using the power of Web Assembly. I've found a lot of tutorials using the official blazor templates but only hints\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"migrate_solution_to_dotnet_core_3.gif","src":"\/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 1x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 1.5x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 2x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 3x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 4x"},"classes":[]},{"id":324,"url":"https:\/\/archicode.be\/index.php\/2023\/11\/07\/how-to-use-feature-flags-in-blazor\/","url_meta":{"origin":115,"position":1},"title":"How to use Feature Flags in Blazor","author":"Hakim","date":"November 7, 2023","format":false,"excerpt":"Feature flags are a way of controlling the availability and behavior of features in your application without changing the code. They can help you with testing, experimentation, and gradual rollout of new functionality. Blazor is a framework for building interactive web UIs using C# and .NET. In this blog post,\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":370,"url":"https:\/\/archicode.be\/index.php\/2024\/05\/14\/understanding-blazor-component-parameters\/","url_meta":{"origin":115,"position":2},"title":"Understanding Blazor Component Parameters","author":"Hakim","date":"May 14, 2024","format":false,"excerpt":"Understanding Parameters Parameters in Blazor are used to pass data from a parent component to a child component. They are defined using public properties on a component and decorated with the [Parameter] attribute. Non-Complex Objects Non-complex objects such as integers, strings, and booleans can be passed as parameters. Here\u2019s an\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366,"url":"https:\/\/archicode.be\/index.php\/2024\/05\/11\/understanding-inject-in-blazor-components\/","url_meta":{"origin":115,"position":3},"title":"Understanding @inject in Blazor Components","author":"Hakim","date":"May 11, 2024","format":false,"excerpt":"Blazor, Microsoft\u2019s framework for building interactive client-side web UI with .NET, offers a robust solution for dependency injection (DI) in the form of the\u00a0@inject\u00a0directive. This powerful feature allows developers to inject services directly into their components, promoting a clean and modular architecture. What is Dependency Injection? Dependency Injection (DI) is\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":162,"url":"https:\/\/archicode.be\/index.php\/2020\/06\/30\/blazor-server-side-or-web-assembly\/","url_meta":{"origin":115,"position":4},"title":"Blazor : server-side or Web assembly","author":"Hakim","date":"June 30, 2020","format":false,"excerpt":"Blazor is amazing. But if you are wondering which of Web Assembly of Server-Side would suit your project, here's an attempt to explain and help","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":163,"url":"https:\/\/archicode.be\/index.php\/2020\/07\/07\/blazor-convince-your-architect\/","url_meta":{"origin":115,"position":5},"title":"Blazor : convince your CTO (or whomever takes the technical decisions)","author":"Hakim","date":"July 7, 2020","format":false,"excerpt":"When there is something new on the market, we developers want to work with it. There might be several reasons for that, but not always the shortcut decision makers think we favour, which is wanting to try the new shiny thing. Most of the time, we want to work with\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":0,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts\/115\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/media?parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/categories?post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/tags?post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}