Exercise 2: Reusable Component Rendering

Great! You've successfully implemented routing with parameters. Now, let's move on to another fundamental concept in Blazor development: creating and rendering reusable components. This exercise will teach you how to build a simple UI component and dynamically control its visibility within a parent page.

✅ Goal:

Create a reusable component (like a card) and render it conditionally in a parent page.

🔧 Steps:

Step 1: Create a new Razor component named MyCard.razor

Create a new Razor component file named MyCard.razor. It's good practice to place reusable components in a dedicated folder like Shared or Components within your Blazor project.

Paste the following code into your new MyCard.razor file:

<!-- MyCard.razor -->
<div class="card">
    <h4>@Title</h4>
    <p>@Content</p>
</div>

@code {
    [Parameter] public string Title { get; set; }
    [Parameter] public string Content { get; set; }
}
        

Explanation:

• This component defines a simple structure for a card with a title and content.
• The [Parameter] attributes on Title and Content properties mean that values for these properties can be passed into this component from a parent component.
• The class="card" is a custom CSS class we'll define to style the card.

Step 2: Open an existing page and use the component conditionally

Now, open an existing page (like Index.razor) or create a new one (e.g., DemoCard.razor) in your Pages folder. This will be our parent component. We'll add a button to toggle the visibility of our MyCard component.

<!-- DemoCard.razor (or Index.razor) -->
@page "/demo-card" <!-- Add this line if creating a new page -->

<h2 class="heading2">Reusable Component Demo</h2>

<button @onclick="ToggleCard" class="blazor-button">Toggle Card</button>

@if (showCard)
{
    <MyCard Title="Blazor Card" Content="This is a reusable component example." />
}

@code {
    bool showCard = true; // Initial state: card is visible

    void ToggleCard()
    {
        showCard = !showCard; // Flip the boolean value
    }
}
        

Important: If your MyCard.razor is not in the same namespace as your `DemoCard.razor` (e.g., if `MyCard` is in `YourApp.Shared` and `DemoCard` is in `YourApp.Pages`), you might need to add a @using directive at the top of DemoCard.razor:

@using YourApp.Shared <!-- Replace YourApp.Shared with your actual namespace -->
        

(Typically, Blazor projects have a _Imports.razor file where common namespaces are added globally, so you might not need to add it per file).

🧪 Try this:

• Run your Blazor application.
• Navigate to /demo-card (or your main page if you added the code to Index.razor).
• Click the "Toggle Card" button multiple times.

🎯 Expected Output:

You should see a card displayed on the page initially. Each time you click the "Toggle Card" button, the card should either appear or disappear, depending on its current state.

Blazor Card

This is a reusable component example.

This exercise demonstrates how to encapsulate UI logic and markup into reusable components and how to dynamically control their rendering based on application state. This is a core principle of component-based UI development.

Raushan Ranjan

Microsoft Certified Trainer

.NET | Azure | Power Platform | WPF | Qt/QML Developer

Power BI Developer | Data Analyst

📞 +91 82858 62455
🌐 raushanranjan.azurewebsites.net
🔗 linkedin.com/in/raushanranjan