{"id":92192,"date":"2023-07-14T11:57:48","date_gmt":"2023-07-14T09:57:48","guid":{"rendered":"https:\/\/code-maze.com\/?p=92192"},"modified":"2023-07-14T12:20:14","modified_gmt":"2023-07-14T10:20:14","slug":"blazor-webassembly-required-parameters","status":"publish","type":"post","link":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/","title":{"rendered":"Required Parameters in Blazor WebAssembly"},"content":{"rendered":"<p>When we want to pass data in Blazor from a parent component to a child component, we use parameters. Parameters are defined on the component class with the Parameter attribute. If we define the parameter in the child component but don&#8217;t pass a parameter from the parent component we don&#8217;t get any errors in design time or during build. This is where required parameters in Blazor come into play.<\/p>\n<div style=\"padding: 20px; border-left: 5px #dc2323 solid; display: block; margin-bottom: 20px; box-shadow: 1px 1px 5px 0px lightgrey;\">To download the source code for this article, you can visit our <a href=\"https:\/\/github.com\/CodeMazeBlog\/CodeMazeGuides\/tree\/main\/blazor-features\/RequiredParametersInBlazor\" target=\"_blank\" rel=\"nofollow noopener\">GitHub repository<\/a>.<\/div>\n<p>Let&#8217;s take a closer look.<\/p>\n<h2>What Are Required Parameters in Blazor?<\/h2>\n<p>After the introduction of required parameters in .NET 6, we can <strong>mark any parameter in Blazor as required when we add the<\/strong> <a href=\"https:\/\/learn.microsoft.com\/en-us\/dotnet\/api\/microsoft.aspnetcore.components.editorrequiredattribute?view=aspnetcore-7.0\" target=\"_blank\" rel=\"nofollow noopener\">EditorRequired<\/a><strong> attribute<\/strong>, either as multi-line attributes:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\">[Parameter]\r\n[EditorRequired]\r\npublic int? Age { get; set; }<\/pre>\n<p>Or as a single-line attribute list:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\">[Parameter, EditorRequired] \r\npublic int? Age { get; set; }<\/pre>\n<h2>How Do Parameters in Blazor Work?<\/h2>\n<p>To demonstrate how parameters in Blazor work, let\u2019s write an application that calculates the age of the user from the year of birth. To start, we\u2019ll create a new Blazor WebAssembly application using the Visual Studio Project Wizard or use the terminal <code>dotnet new blazorwasm<\/code> command.<\/p>\n<div style=\"padding: 20px; border-left: 5px gray solid; display: block; margin-bottom: 20px; box-shadow: 1px 1px 5px 0px lightgrey;\">You can read more about Blazor WebAssembly in our <a href=\"https:\/\/code-maze.com\/blazor-webassembly-series\/\" target=\"_blank\" rel=\"noopener\">Blazor WebAssembly Series<\/a>.<\/div>\n<p>Let&#8217;s start by creating an <code>AgeCard<\/code>\u00a0component:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\">&lt;div class=\"alert alert-secondary mt-4\"&gt;\r\n    &lt;strong&gt;This is my Age: @GetAge()&lt;\/strong&gt;&lt;br \/&gt;\r\n    &lt;span&gt;I was born in @YearOfBirthInput&lt;\/span&gt;\r\n&lt;\/div&gt;\r\n\r\n@code {\r\n\r\n    [Parameter]\r\n    public int YearOfBirthInput { get; set; }\r\n\r\n    public int GetAge()\r\n    {\r\n        var currentYear = DateTime.Now;\r\n        var year = currentYear.Year;\r\n        var age = year - YearOfBirthInput;\r\n\r\n        return age;\r\n    }\r\n}<\/pre>\n<p>Here, we create a simple <code>span<\/code> that displays the optional <code>YearOfBirthInput<\/code> parameter.<\/p>\n<p>Also, in the code section, we define the <code>GetAge()<\/code> method for the age calculation, which is called in our markup.<\/p>\n<p>Next, let&#8217;s add our new component to the <code>Index<\/code> page:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">@page \"\/\"\r\n\r\n&lt;PageTitle&gt;Age Calculator&lt;\/PageTitle&gt;\r\n\r\n&lt;h1&gt;Age Calculator&lt;\/h1&gt;\r\n\r\n&lt;AgeCard YearOfBirthInput=1993 \/&gt;<\/pre>\n<p>Here, we set a Page title, heading, and provide the numeric value for the <code>YearOfBirthInput<\/code> parameter, passing it to the <code>AgeCard<\/code>\u00a0component.<\/p>\n<p>Note that we can also pass the parameter value as a string:<\/p>\n<p><code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;AgeCard YearOfBirthInput=\"1993\" \/&gt;<\/code><\/p>\n<p>As the parameter is defined as an <code>int<\/code>, it will be implicitly converted to that type and the application will run successfully.<\/p>\n<p>Let&#8217;s run the application, where we see the output of our component:<\/p>\n<p><a href=\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-10-at-17.27.54.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-92193\" src=\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-10-at-17.27.54.png\" alt=\"optional parameter passed to child component blazor\" width=\"706\" height=\"396\" srcset=\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-10-at-17.27.54.png 706w, https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-10-at-17.27.54-300x168.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/a><\/p>\n<p>Let&#8217;s see what happens if we pass a <strong>null<\/strong> as a value for the parameter:<\/p>\n<p><code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;AgeCard YearOfBirtInput=null \/&gt;<\/code><\/p>\n<p>If we attempt to build the application, the compiler throws an error: <code>Error CS1503: Argument 1: cannot convert from '&lt;null&gt;' to 'int' (CS1503)<\/code> and we can&#8217;t run the application.<\/p>\n<p>When we mark our parameter as nullable to cover this case, we must also cast type on any returned variable from the method that uses a nullable parameter.<\/p>\n<p>Let&#8217;s change our <code>AgeCard<\/code> component to make our parameter nullable:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-highlight=\"3,11\">@code {\r\n    [Parameter]\r\n    public int? YearOfBirthInput { get; set; }\r\n\r\n    public int GetAge()\r\n    {\r\n        var currentYear = DateTime.Now;\r\n        var year = currentYear.Year;\r\n        var age = year - YearOfBirthInput;\r\n\r\n        return (int)age;\r\n    }\r\n}<\/pre>\n<p>Here we add <code>?<\/code> to the parameter type to make it <a href=\"https:\/\/code-maze.com\/csharp-nullable-types\/\" target=\"_blank\" rel=\"noopener\">nullable<\/a>, and cast our <code>age<\/code> variable to an <code>int<\/code>.<\/p>\n<p>Now the application runs but we still need to handle the event in our <code>GetAge()<\/code> method when the passed parameter is null. In this article, we will not get into further detail on how to handle cases when the parameter is null.<\/p>\n<h2>Implement Required Parameters in Blazor WebAssembly<\/h2>\n<p>Let&#8217;s continue working with our application and see how to make our optional parameters required.<\/p>\n<p>Returning to our initial code for the <code>AgeCard<\/code> component, if we don&#8217;t pass the parameter to the <code>AgeCard<\/code> component in the <code>Index<\/code> page, our application will run without any warnings or errors and we will get the default value:<\/p>\n<p><a href=\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-10-at-17.29.28.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-92194\" src=\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-10-at-17.29.28.png\" alt=\"Output of the Age calculator application when the optional parameter is omitted\" width=\"710\" height=\"396\" srcset=\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-10-at-17.29.28.png 710w, https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-10-at-17.29.28-300x167.png 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/a><\/p>\n<p>Let&#8217;s mark our optional parameter in the <code>AgeCard<\/code>\u00a0component as required:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-highlight=\"1\">[Parameter, EditorRequired]\r\npublic int YearOfBirthInput { get; set; }\r\n\r\npublic int GetAge()\r\n{\r\n    var currentYear = DateTime.Now;\r\n    var year = currentYear.Year;\r\n    var age = year - YearOfBirthInput;\r\n\r\n    return age;\r\n}<\/pre>\n<p>Here, we add <code>[EditorRequired]<\/code> attribute to the <code>YearOfBirthInput<\/code> parameter as a single-line attribute list.<\/p>\n<p>Now when we run the application without passing the parameter to the child component, we get the warning: <code>Component 'AgeCard' expects a value for the parameter 'YearOfBirthInput', but a value may not have been provided. (RZ2012)<\/code>.<\/p>\n<p>However, the application still runs and builds successfully. If we want to prevent the build and execution of the application with warnings, we can set <code>Treat warnings as errors<\/code> in the Build configuration for our project in Visual Studio to <code>All<\/code>:<\/p>\n<p><a href=\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Build-Config-VS2022.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-92195\" src=\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Build-Config-VS2022.png\" alt=\"VisualStudio Build Configuration\" width=\"988\" height=\"569\" srcset=\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Build-Config-VS2022.png 988w, https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Build-Config-VS2022-300x173.png 300w, https:\/\/code-maze.com\/wp-content\/uploads\/2023\/07\/Build-Config-VS2022-768x442.png 768w\" sizes=\"auto, (max-width: 988px) 100vw, 988px\" \/><\/a><\/p>\n<p>Now, if we try to build or run the application, we get the error that was previously a warning. This error will force us to pass the missing parameter to the component at design time.<\/p>\n<h2>Conclusion<\/h2>\n<p>When we use data from parent components in our child components, we must ensure that we pass the data correctly. We can mark the parameters as required and ensure we get the warning if we don&#8217;t pass the parameters to the child component.<\/p>\n<p>This feature is useful when the component needs parameters to output correct data and when we reuse the component in multiple locations throughout the application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we want to pass data in Blazor from a parent component to a child component, we use parameters. Parameters are defined on the component class with the Parameter attribute. If we define the parameter in the child component but don&#8217;t pass a parameter from the parent component we don&#8217;t get any errors in design [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":62188,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[684],"tags":[685,686,290,1868],"class_list":["post-92192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blazor-webassembly","tag-blazor","tag-blazor-webassembly","tag-parameters","tag-required-parameters","et-has-post-format-content","et_post_format-et-post-format-standard"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Required Parameters in Blazor WebAssembly - Code Maze<\/title>\n<meta name=\"description\" content=\"What are required parameters in Blazor and how to use them to mark the parameter as required when we pass it to the child component.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Required Parameters in Blazor WebAssembly - Code Maze\" \/>\n<meta property=\"og:description\" content=\"What are required parameters in Blazor and how to use them to mark the parameter as required when we pass it to the child component.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Maze\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-14T09:57:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-14T10:20:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"620\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Code Maze\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/CodeMazeBlog\" \/>\n<meta name=\"twitter:site\" content=\"@CodeMazeBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Code Maze\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/\"},\"author\":{\"name\":\"Code Maze\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04\"},\"headline\":\"Required Parameters in Blazor WebAssembly\",\"datePublished\":\"2023-07-14T09:57:48+00:00\",\"dateModified\":\"2023-07-14T10:20:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/\"},\"wordCount\":688,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\",\"keywords\":[\"Blazor\",\"Blazor WebAssembly\",\"Parameters\",\"required parameters\"],\"articleSection\":[\"Blazor WebAssembly\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/\",\"url\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/\",\"name\":\"Required Parameters in Blazor WebAssembly - Code Maze\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\",\"datePublished\":\"2023-07-14T09:57:48+00:00\",\"dateModified\":\"2023-07-14T10:20:14+00:00\",\"description\":\"What are required parameters in Blazor and how to use them to mark the parameter as required when we pass it to the child component.\",\"breadcrumb\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#primaryimage\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\",\"width\":1100,\"height\":620,\"caption\":\"Blazor WebAssembly\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/code-maze.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Required Parameters in Blazor WebAssembly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/code-maze.com\/#website\",\"url\":\"https:\/\/code-maze.com\/\",\"name\":\"Code Maze\",\"description\":\"Learn. Code. Succeed.\",\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/code-maze.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/code-maze.com\/#organization\",\"name\":\"Code Maze\",\"url\":\"https:\/\/code-maze.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"width\":3511,\"height\":3510,\"caption\":\"Code Maze\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/CodeMazeBlog\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04\",\"name\":\"Code Maze\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png\",\"caption\":\"Code Maze\"},\"description\":\"This is the standard author on the site. Most articles are published by individual authors, with their profiles, but when several authors have contributed, we publish collectively as a part of this profile.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/codemaze\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog\"],\"url\":\"https:\/\/code-maze.com\/author\/codemazecontributor\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Required Parameters in Blazor WebAssembly - Code Maze","description":"What are required parameters in Blazor and how to use them to mark the parameter as required when we pass it to the child component.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/","og_locale":"en_US","og_type":"article","og_title":"Required Parameters in Blazor WebAssembly - Code Maze","og_description":"What are required parameters in Blazor and how to use them to mark the parameter as required when we pass it to the child component.","og_url":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/","og_site_name":"Code Maze","article_published_time":"2023-07-14T09:57:48+00:00","article_modified_time":"2023-07-14T10:20:14+00:00","og_image":[{"width":1100,"height":620,"url":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","type":"image\/png"}],"author":"Code Maze","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/CodeMazeBlog","twitter_site":"@CodeMazeBlog","twitter_misc":{"Written by":"Code Maze","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#article","isPartOf":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/"},"author":{"name":"Code Maze","@id":"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04"},"headline":"Required Parameters in Blazor WebAssembly","datePublished":"2023-07-14T09:57:48+00:00","dateModified":"2023-07-14T10:20:14+00:00","mainEntityOfPage":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/"},"wordCount":688,"commentCount":0,"publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"image":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","keywords":["Blazor","Blazor WebAssembly","Parameters","required parameters"],"articleSection":["Blazor WebAssembly"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/","url":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/","name":"Required Parameters in Blazor WebAssembly - Code Maze","isPartOf":{"@id":"https:\/\/code-maze.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#primaryimage"},"image":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","datePublished":"2023-07-14T09:57:48+00:00","dateModified":"2023-07-14T10:20:14+00:00","description":"What are required parameters in Blazor and how to use them to mark the parameter as required when we pass it to the child component.","breadcrumb":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#primaryimage","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","width":1100,"height":620,"caption":"Blazor WebAssembly"},{"@type":"BreadcrumbList","@id":"https:\/\/code-maze.com\/blazor-webassembly-required-parameters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/code-maze.com\/"},{"@type":"ListItem","position":2,"name":"Required Parameters in Blazor WebAssembly"}]},{"@type":"WebSite","@id":"https:\/\/code-maze.com\/#website","url":"https:\/\/code-maze.com\/","name":"Code Maze","description":"Learn. Code. Succeed.","publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/code-maze.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/code-maze.com\/#organization","name":"Code Maze","url":"https:\/\/code-maze.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","width":3511,"height":3510,"caption":"Code Maze"},"image":{"@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/CodeMazeBlog"]},{"@type":"Person","@id":"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04","name":"Code Maze","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/person\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png","caption":"Code Maze"},"description":"This is the standard author on the site. Most articles are published by individual authors, with their profiles, but when several authors have contributed, we publish collectively as a part of this profile.","sameAs":["https:\/\/www.linkedin.com\/company\/codemaze\/","https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog"],"url":"https:\/\/code-maze.com\/author\/codemazecontributor\/"}]}},"_links":{"self":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/92192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/comments?post=92192"}],"version-history":[{"count":1,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/92192\/revisions"}],"predecessor-version":[{"id":92196,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/92192\/revisions\/92196"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media\/62188"}],"wp:attachment":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media?parent=92192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/categories?post=92192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/tags?post=92192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}