For the complete navigation for this series, you can visit the Blazor WebAssembly Series page<\/a>.<\/p>\n Now, it’s time to dive into the project.<\/p>\n Let\u2019s start by creating a new Blazor WebAssembly application as we did in the previous article<\/a>. We are going to name it BlazorProducts.Client:<\/p>\n While creating this project, you can find the \u201cASP.NET Core hosted\u201d checkbox on the lower-right side of the window.\u00a0 By checking this checkbox, Visual Studio creates an additional Razor project for our client project automatically. We didn\u2019t check it because we want to create only the client side project. Later on, we will create our separate Web API project.<\/p>\n That said, let\u2019s continue by creating a new As soon as we create this component, we are going to see it consists of two parts:<\/p>\n In the HTML part, we are going to add the UI code and in the @code part, we are going to write the C# code. A component doesn\u2019t require the @code part to be a valid component, it can run without it for sure. But when we want to use fields, properties, methods, and the C# business logic overall, it is the best practice to add them to the @code block and separate them from the markup logic.\u00a0<\/p>\n Now, let\u2019s add the Then, let\u2019s modify the Now, we can open the We apply the Additionally, to add the component to another file, we use a tag syntax with the name of the component.<\/p>\n That\u2019s all it takes. But before we start our application, let\u2019s remove the IIS profile from the Excellent. Now, let\u2019s start our application:<\/p>\n There we go. We can see our application is working and our component is displayed on the page.<\/p>\n But, this is just a part of the whole Blazor Components story. So, let\u2019s move on.<\/p>\n Often, we need to create reusable components that accept different parameters and show content based on those parameters. So, to show how to do that, let\u2019s modify our With the We can use different kinds of data for the parameters, even events, and the razor code. It depends on the usage of our component and what we want to accomplish with the component parameters. Take note that we are explicitly stating \u201ccomponent parameters\u201d because we have the routing parameters as well.<\/p>\n We are going to talk more about them in the next article.<\/p>\n Now, to complete the process, we have to modify the To send the value to the After this change, we can start our application again, and inspect the result:<\/p>\n We can see that nothing has changed in the UI. But now, we are using component parameters to display the Title.<\/p>\n Blazor components can accept additional attributes that are not declared as the component parameters. For example, our component has an image tag with the In the previous section, we used the Let\u2019s remove the This parameter implements To apply this, we have to add And send the values from the Now, we can start the application and verify that everything is working as it supposed to. But let\u2019s improve this solution a bit. Let\u2019s create a new property in the With this solution, we can add more attributes in a more readable way. As a result, we can see those arbitrary parameters are useful when we define a component with a markup element that supports a variety of customizations.<\/p>\n In some situations, we want to pass a parameter from a parent component to all the child components. To do that, we can use Cascading Parameters.<\/p>\n Let\u2019s see how this works with an example.<\/p>\n First, let\u2019s open the This is the layout component that renders all our project pages inside the In the We have to mention that here we use cascading values by type<\/strong>. For this to work, several conditions must be fulfilled:<\/p>\n Now, if we inspect our result, we can see the Next to the cascading values by type, which we just used, we can use the cascading values by name. For that, we have to add a new Also, we have to modify the The name of the property (Color) that consumes the value is irrelevant here.\u00a0 The Blazor is going to look for the property that has the From the BlazorWebAssembly preview 3, there is a possibility to debug the Blazor client application using the Visual Studio IDE. To enable it, we have to use the Blazor WebAssembly project template preview 3 or later, and the latest preview release of Visual Studio 2019 16.6 (preview 2 or later).<\/p>\n With these in place, as soon as we inspect the All we have to do is to set a breakpoint in our C# code and start the application with debugging support (F5). The rest of the process is the same.<\/p>\n Additionally, we can always debug our Blazor WebAssembly application in a browser.<\/p>\n Important Note:\u00a0<\/strong>If you are using .NET Core 3.1, you can proceed with the following example. But if you are using .NET 5 or above<\/strong>, before you start with the example below, you have to modify the To do that, let\u2019s start our application (F5), and as soon as the application starts in the browser, press the So, let\u2019s do as it states for the Google Chrome browser because we are using it for this series.<\/p>\n We have to copy the marked command and paste it into the Run window and press the OK button:<\/p>\n As soon as we do that, a new browser window will open with our application. All we have to do is to press again the Shift+Alt+D keys and the DevTools tab will open. Let\u2019s navigate to the Source tab and press Ctrl+P, type Counter, and press the Enter key. This will open the Counter razor file for us and we can place a breakpoint at the code line we want to debug:<\/p>\nWorking With Blazor Components<\/h2>\n
![\"Blazor](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/08-Created-BlazorClient-app.png\")
<\/a><\/p>\nComponents<\/code> folder at the root of the project. Then, let\u2019s right-click on that folder and choose Add New Item<\/code>. In the new window, we are going to choose the Razor Component option, and name it Home.razor<\/code>:<\/p>\n![\"Creating](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/09-Home-component-creation.png\")
<\/a><\/p>\n\n
assets<\/code> folder in the wwwroot<\/code> folder and inside it a single picture (you can use any picture you want):<\/p>\n![\"Adding](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/10-Assets-folder-with-a-picture.png\")
<\/a><\/p>\nHome.razor<\/code> file:<\/p>\n<div style=\"text-align:center\">\r\n <h1>\r\n Welcome to the BlazorProducts.Client application.\r\n <\/h1>\r\n <p>\r\n Feel free to \r\n <a href=\"https:\/\/www.redbubble.com\/people\/vpecanac\/works\/44764889-code-maze-merch?asc=u\" target=\"_blank\">visit our shop<\/a>\r\n any time you want.\r\n <\/p>\r\n <p>\r\n <img src=\"\/assets\/products.png\" alt=\"products image for the Home component\" class=\"img-fluid\" \/>\r\n <\/p> \r\n<\/div>\r\n\r\n@code {\r\n\r\n}\r\n<\/pre>\nIndex.razor<\/code> file, remove everything from it except the @page<\/code> directive and apply our newly created component:<\/p>\n@page \"\/\"\r\n@using BlazorProducts.Client.Components \r\n\r\n<Home><\/Home>\r\n<\/pre>\n
@using<\/code> directive in this file because we are going to use the Home<\/code> component only in this file. But, if we want to share our component with multiple files, we can apply the using directive in the _Imports.razor<\/code> file.<\/p>\nlaunchSettings.json<\/code> file:<\/p>\n{\r\n \"profiles\": {\r\n \"BlazorProducts.Client\": {\r\n \"commandName\": \"Project\",\r\n \"dotnetRunMessages\": \"true\",\r\n \"launchBrowser\": true,\r\n \"inspectUri\": \"{wsProtocol}:\/\/{url.hostname}:{url.port}\/_framework\/debug\/ws-proxy?browser={browserInspectUri}\",\r\n \"applicationUrl\": \"https:\/\/localhost:5001;http:\/\/localhost:5000\",\r\n \"environmentVariables\": {\r\n \"ASPNETCORE_ENVIRONMENT\": \"Development\"\r\n }\r\n }\r\n }\r\n}<\/pre>\n![\"Home](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/11-App-started-Home-component.png\")
<\/a><\/p>\nSending Parameters to the Blazor Components<\/h2>\n
Home<\/code> component:<\/p>\n<div style=\"text-align:center\">\r\n <h1>\r\n @Title\r\n <\/h1>\r\n <p>\r\n Feel free to \r\n <a href=\"https:\/\/www.redbubble.com\/people\/vpecanac\/works\/44764889-code-maze-merch?asc=u\" target=\"_blank\">visit our shop<\/a>\r\n any time you want.\r\n <\/p>\r\n <p>\r\n <img src=\"\/assets\/products.png\" alt=\"products image for the Home component\" class=\"img-fluid\" \/>\r\n <\/p> \r\n<\/div>\r\n\r\n@code {\r\n [Parameter]\r\n public string Title { get; set; }\r\n}\r\n<\/pre>\n@Title<\/code> expression, we are using a one-way binding to bind the value from the Title<\/code> property (from the @code section) to the HTML. As we can see, if we want to mark any property as a component parameter, we have to decorate it with the [Parameter]<\/code> attribute.<\/p>\nIndex<\/code> page:<\/p>\n@page \"\/\"\r\n@using BlazorProducts.Client.Components \r\n\r\n<Home Title=\"Welcome to the BlazorProducts.Client application.\"><\/Home>\r\n<\/pre>\n
Title<\/code> property in the Home<\/code> component, we use the Title<\/code> attribute. Blazor provides us a nice IntelliSense for that:<\/p>\n![\"Blazor](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/12-Blazor-intellisense-for-the-Title.png\")
<\/a><\/p>\n![\"Blazor](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/13-Title-populated-with-Parameter.png\")
<\/a><\/p>\nArbitrary Parameters in Blazor Components<\/h2>\n
src<\/code> and alt<\/code> attributes hardcoded. But if we want to reuse this whole component, we have to provide the user with the possibility to add their picture with the alternative text.<\/p>\n[Parameter]<\/code> attribute to send a parameter that is related to the component itself. But now, we have two attributes related to the img<\/code> tag inside the component. So, there is a better way to pass these attributes to the component using Arbitrary Parameters.<\/p>\nsrc<\/code> and alt<\/code> attributes from the image tag and add a parameter in the Home<\/code> component:<\/p>\n<div style=\"text-align:center\">\r\n <h1>\r\n @Title\r\n <\/h1>\r\n <p>\r\n Feel free to \r\n <a href=\"https:\/\/www.redbubble.com\/people\/vpecanac\/works\/44764889-code-maze-merch?asc=u\" target=\"_blank\">visit our shop<\/a>\r\n any time you want.\r\n <\/p>\r\n <p>\r\n <img class=\"img-fluid\" \/>\r\n <\/p> \r\n<\/div>\r\n\r\n@code {\r\n [Parameter]\r\n public string Title { get; set; }\r\n\r\n [Parameter(CaptureUnmatchedValues = true)]\r\n public Dictionary<string, object> AdditionalAttributes { get; set; }\r\n}\r\n<\/pre>\nDictionary<string, object><\/code> type and it has an additional CaptureUnmatchedValues<\/code> property. With this property, if it’s set to true, we state that this parameter shall handle all the values that don\u2019t match any other parameter in this component.<\/p>\n@attributes<\/code> attribute to the image tag:<\/p>\n<p>\r\n <img @attributes=\"AdditionalAttributes\" class=\"img-fluid\" \/>\r\n<\/p>\r\n<\/pre>\n
Index<\/code> page:<\/p>\n@page \"\/\"\r\n@using BlazorProducts.Client.Components \r\n\r\n<Home Title=\"Welcome to the BlazorProducts.Client application.\" \r\n src=\"\/assets\/products.png\" alt=\"products image for the Home component\"><\/Home>\r\n<\/pre>\n
Index<\/code> page and use it to send our attributes to the Home<\/code> component:<\/p>\n@page \"\/\"\r\n@using BlazorProducts.Client.Components \r\n\r\n<Home Title=\"Welcome to the BlazorProducts.Client application.\" @attributes=\"AdditionalAttributes\"><\/Home>\r\n\r\n@code{\r\n public Dictionary<string, object> AdditionalAttributes { get; set; } = new Dictionary<string, object>\r\n {\r\n { \"src\", \"\/assets\/products.png\" },\r\n { \"alt\", \"products image for the Home component\" }\r\n };\r\n}<\/pre>\nCascading Parameters<\/h2>\n
Shared\/MainLayout.razor<\/code> file and add some modifications to it:<\/p>\n@inherits LayoutComponentBase\r\n\r\n<div class=\"page\">\r\n <div class=\"sidebar\">\r\n <NavMenu \/>\r\n <\/div>\r\n\r\n <div class=\"main\">\r\n <div class=\"top-row px-4\">\r\n <a href=\"http:\/\/blazor.net\" target=\"_blank\" class=\"ml-md-auto\">About<\/a>\r\n <\/div>\r\n\r\n <div class=\"content px-4\">\r\n <CascadingValue Value=\"@_color\">\r\n @Body\r\n <\/CascadingValue>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n@code {\r\n private readonly string _color = \"#0505b5\";\r\n}<\/pre>\n@Body<\/code> part. To apply the cascading parameter, we have to wrap the @Body<\/code> content inside the CascadingValue<\/code> component and pass a value with the Value<\/code> attribute. We want to use this parameter inside the Home<\/code> component, so let\u2019s modify it as well:<\/p>\n<div style=\"text-align:center\">\r\n <h1 style=\"color: @Color\">\r\n @Title\r\n <\/h1>\r\n <p>\r\n Feel free to \r\n <a href=\"https:\/\/www.redbubble.com\/people\/vpecanac\/works\/44764889-code-maze-merch?asc=u\" target=\"_blank\">visit our shop<\/a>\r\n any time you want.\r\n <\/p>\r\n <p>\r\n <img @attributes=\"AdditionalAttributes\" class=\"img-fluid\" \/>\r\n <\/p>\r\n \r\n<\/div>\r\n\r\n@code {\r\n [Parameter]\r\n public string Title { get; set; }\r\n\r\n [Parameter(CaptureUnmatchedValues = true)]\r\n public Dictionary<string, object> AdditionalAttributes { get; set; }\r\n\r\n [CascadingParameter]\r\n public string Color { get; set; }\r\n}\r\n<\/pre>\n@code<\/code> part, we add the Color<\/code> property with the [CascadingParameter]<\/code> attribute. This attribute specifies that the Color<\/code> property should receive a value from the CascadingValue<\/code> component. After that, we just modify the style of our h1<\/code> tag. Additionally, when we want to pass more than one value as a cascading parameter, we can create a new object with multiple properties and pass that object with the Value<\/code> attribute to all the child components.<\/p>\n\n
Color<\/code> property with the CascadingParameter<\/code> attribute<\/li>\nCascadingValue<\/code> component (in this example of type string)<\/li>\n<\/ul>\nh1<\/code> color is modified:<\/p>\n![\"Using](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/14-Cascading-param-h1-color.png\")
<\/a><\/p>\nName<\/code> attribute to the CascadingValue<\/code> component:<\/p>\n<CascadingValue Name=\"HeadingColor\" Value=\"@_color\"> \r\n @Body \r\n<\/CascadingValue><\/pre>\n
CascadingParameter<\/code> attribute:<\/p>\n[CascadingParameter(Name = \"HeadingColor\")]\r\npublic string Color { get; set; }<\/pre>\nCascadingParameter<\/code> attribute with the Name<\/code> property the same as the Name<\/code> property in the CascadingValue<\/code> component.<\/p>\nDebugging Blazor WebAssembly Applications<\/h2>\n
launchSettings.json<\/code> file, we are going to find a new inspectUri<\/strong> property. It enables IDE to identify that our application is the Blazor WebAssembly application and to instruct the debugging infrastructure to connect the browser through Blazor\u2019s debugging proxy:<\/p>\n{\r\n \"profiles\": {\r\n \"BlazorProducts.Client\": {\r\n \"commandName\": \"Project\",\r\n \"dotnetRunMessages\": \"true\",\r\n \"launchBrowser\": true,\r\n \"inspectUri\": \"{wsProtocol}:\/\/{url.hostname}:{url.port}\/_framework\/debug\/ws-proxy?browser={browserInspectUri}\",\r\n \"applicationUrl\": \"https:\/\/localhost:5001;http:\/\/localhost:5000\",\r\n \"environmentVariables\": {\r\n \"ASPNETCORE_ENVIRONMENT\": \"Development\"\r\n }\r\n }\r\n }\r\n}<\/pre>\nDebugging in the Browser<\/h3>\n
launchSettings.json<\/code> file by setting the launchBrowser<\/code> property to false<\/code>. This will prevent the “WebSocket disconnected” error. After that, you can continue with the debugging example.<\/p>\nShift+Alt+D<\/code> keys. This should open a new tab with the instruction messages:<\/p>\n![\"Client](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/15-Client-debug-instruction-messages.png\")
<\/a><\/p>\n![\"Run](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/16-Run-window-command.png\")
<\/a><\/p>\n
![\"Blazor](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/17-Debug-window-prepared.png\")
<\/a><\/p>\n![\"Inspecting](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/06\/18-Debugging-in-action.png\")
<\/a><\/p>\n