CODEWITHSUNDEEP
c#.net-coreblazor
IAmNotARobot
IAmNotARobot

Reputation: 149

How can i create a blazor component?

My Alert class is

namespace RazorComponents.Models
{
    public class Alert
    {
        public string Title { get; set; }
        public string Text { get; set; }
        public bool Dismissible { get; set; }
    }
}

My AlertComponent is

namespace RazorComponents.Test
{
    public partial class AlertComponent : ComponentBase
    {
        public Alert Alert { get; set; }
    }
}

with the following view

@using Models
  
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>@Alert.Title</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Which returns a compile time error C# An object reference is required for the non-static field, method, or property at @Alert.Title

This is normal but how can i pass the Alert class as a model within the view?

At least in MVC we had the option of @model Alert and pass the model through
async Task<IViewComponentResult> InvokeAsync

Upvotes: 1

Views: 218

Answers (3)

enet
enet

Reputation: 45586

Define a code behind class:

AlertComponent.razor.cs

public partial class AlertComponent
    {
        [Parameter]
        public Alert Alert { get; set; }

        [Parameter]
        public EventCallback Close { get; set; }
     
    }

You'll need here: using Microsoft.AspNetCore.Components;

Note: The EventCallback Close parameter is used to call the method that opened the alert to close it.

Define the view part of the AlertComponent

AlertComponent.razor

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>@Alert.Title</strong> <div>@Alert.Text</div>
    <button @onclick="@(() => Close.InvokeAsync())" type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

@code {   
}

Usage:

@page "/"

@if (alert != null)
 {
    <AlertComponent Alert="alert" Close="Close" />
 }

<button @onclick="ShowAlert">Display alert</button>

@code
{
    private Alert alert;

    private void ShowAlert()
    {
        alert = new Alert() { Title = "My alert", Text = "You are being alerted", Dismissible = true };
    }
    private void Close()
    {
        alert = null;
    }
}

When you click on the "Display alert" button, a new instance of Alert is created, the Page component is re-render, this time the alert != null is true, and thus the AlertComponent is rendered. When you click on the "Close button" in the AlertComponent, the Close method defined in the Index component set the value of the alert varaible to null, after which the Index component is re-rendered, this time the AlertComponent is not re-rendered as the value of the alert variable is null.

Upvotes: 0

jeffersantoss
jeffersantoss

Reputation: 29

You need to add the [Parameter] attribute to your Alert propriety:

namespace RazorComponents.Test
{
    public partial class AlertComponent : ComponentBase
    {
        [Parameter]
        public Alert Alert { get; set; }
    }
}

To use your component, just pass your alert as parameter like below:

<AlertComponent Alert="Alert"/>

@code
{
    public Alert Alert {get; set;}
}

Upvotes: 2

ozerfrettelter
ozerfrettelter

Reputation: 91

You need to add a code block to your component like this:

@code
{
    [Parameter]
    private Alert Alert { get; set };
}

Add the [Parameter] attribute only if you want to set the value from the outside (from another component).

Upvotes: 2

Related Questions