Blazor Components as Shortcodes
Tags: csharp, dotnet, tutorial, blazor
Published: 2019-10-14 07:53:38

---
title: Blazor Components as Shortcodes
published: true
date: 2019-10-14 07:00:15 UTC
tags: csharp,dotnet,tutorial,blazor
canonical_url: https://wellsb.com/csharp/aspnet/pass-data-to-blazor-component/
series: Passing Blazor Data
---
[Source](https://wellsb.com/csharp/aspnet/pass-data-to-blazor-component/)

This tutorial will teach you how to pass data to a Blazor component as a parameter. This is useful if you have a customizable component that you wish use in multiple places across your page.

## Parent-Child Data Flow

Suppose you have a custom UI component that you intend to use throughout a page. The page would be considered the parent component, and the UI component would be considered the child. In this tutorial, you will create a reusable child component, and then you will learn how to pass parameters to it from the parent.

### Create the Child Component

For this example, we will create a simple Blazor component that generates a label and input. Start by creating a Blazor WebAssembly project called **ComponentParameters**. Then right-click the project and add a new folder called **Components**. Next, right-click the Components folder you just created, and add a new item, **Add \> New Item…** Select **Razor Component** and name it **CustomInput**.

Replace the content of **CustomInput.Razor** with the following code. Here, you can use some Bootstrap classes to modernize the appearance of your UI controls.

```html
<div class="form-group row">
    <label for="@ID" class="col-sm-8 col-form-label">@ChildContent</label>
    <input id="@ID" class="col-sm-4 form-control" />
</div>
 
@code {
 
}
```

Notice, there are two parameters in this component that need to be defined, `ID` and `ChildContent`. The `ChildContent` is the part of the HTML code between the tags. In JavaScript, it is known as `innerHTML`.

```html
<div>This is child content</div>
```

If your component accepts child content, you will need to define a parameter and identify a place to render it. In the above example, you will also need to define a parameter for `ID`.

```html
<div class="form-group row">
    <label for="@ID" class="col-sm-8 col-form-label">@ChildContent</label>
    <input id="@ID" class="col-sm-4 form-control" />
</div>
 
@code {
    [Parameter]
    public string ID { get; set; }
 
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}
```

As you can see, the `ChildContent` will be rendered as the text of the label for the input element. You could render the `ChildContent` anywhere in your custom component, something that makes Blazor very powerful! The `ID` parameter is used as the unique id for the `input` element. The `label` also references it so it knows which `input` it belongs to.

### Use Child Component with Parameters

If you want to place your component on the project’s home page **Index.razor** , you will need to let the page know where to find the CustomInput component by issuing a `@using` statement. It should be in the form **namespace.directory**. In this case, the following line will work.

```csharp
@using ComponentParameters.Components
```

To use the child component you just created, you will reference it by name inside angle brackets `<>`, just as you would any other html element tag. You will then provide values for any of the parameters you defined in the child component. You might use the component to add an input for collecting a person’s name as follows:

```html
<CustomInput ID="firstname">Enter your name</CustomInput>
```

You placed the component by using the `<CustomInput>` tag. Then, you assigned a value to the `ID` parameter, just as you would an attribute of a regular html tag. Finally, the child content you provided will be used as the text of the label, exactly as defined in **CustomInput.razor**.

You could place as many instances of the child component on the parent page as you wish, and you could provide different values for each of the parameters each time. You can think of it as a shortcode. This is the beauty of Blazor and Razor Components!

```html
@page "/"
@using ComponentParameters.Components
 
<div style="max-width:600px">
    <CustomInput ID="firstname">First Name</CustomInput>
    <CustomInput ID="lastname">Last Name</CustomInput>
    <CustomInput ID="number">Phone Number</CustomInput>
</div>
```

[![](https://wellsb.com/csharp/wp-content/uploads/sites/2/2019/10/blazor-child-components-screenshot-min-300x74.png)](https://wellsb.com/csharp/wp-content/uploads/sites/2/2019/10/blazor-child-components-screenshot-min.png)

## The Bottom Line

In this tutorial, you learned how to pass parameters from a parent component to a child component. Imagine using this trick while looping through the elements of a collection in order to populate a page? While this approach works for passing data to components on the same page, you may also be interested in how to pass parameters between components on different pages. Stay tuned, because that tutorial is coming next week!

[Source](https://wellsb.com/csharp/aspnet/pass-data-to-blazor-component/)