Blazor component not accepting passed contents through parameters

Viewed 40

I am using this modal component: https://blazorrepl.telerik.com/wwkzbjaz45yvMAC202

This is what the code looks like:

<h4>Contact List</h4>
<table>
    <thead>
        <th>Name</th>
        <th>Email</th>
    </thead>
    <tbody>
        @foreach (var item in contacts!)

        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Email</td>
                <button @onclick= "@(()=>OnConfirm(item.Name))">Delete</button>
            </tr>



        }
    </tbody>
</table>
<ModalDialog OnDelete="DeleteContact" @ref="modalDialog"></ModalDialog>

@code {

    private ModalDialog modalDialog;
    private bool showContacts = true;
    private List<Contact>? contacts = null;

  
    protected override void OnInitialized()
    {
        contacts = new List<Contact>(){
        new Contact(){Name="John ",Email="john@example.com"},
        new Contact(){Name="Bob",Email="bob@example.com"},
        new Contact(){Name="Bill",Email="bill@example.com"}
};

        base.OnInitialized();

    }

  public void OnConfirm(string name){
    
      modalDialog.Name=name;
      modalDialog.ChildContent=$"Do you want to delete {name}";
      modalDialog.Show();
    }
    public void DeleteContact(){
    
    var c=contacts?.Find(x=>x.Name==modalDialog.Name);
    contacts.Remove(c);
    StateHasChanged();
      modalDialog.Close();
    }
 

}

And this is how you initiate the component:

<ModalDialog OnDelete="DeleteContact" @ref="modalDialog"></ModalDialog>

As it is, it works just fine until when I try to pass any html tag between

  <ModalDialog OnDelete="DeleteContact" @ref="modalDialog">
    <div> hello </div>
  <ModalDialog> 

I am getting the following error:

Error   CS1660  Cannot convert lambda expression to type 'string' because it is not a delegate type Inest   C:\....\Microsoft.NET.Sdk.Razor.SourceGenerators\Microsoft.NET.Sdk.Razor.SourceGenerators.RazorSourceGenerator\Components_TestedBy_razor.g.cs   222 Active
1 Answers

You are mixing string ChildContent and RenderFragment ChildContent.

I would suggest to

  1. rename your current parameter from ChildContent to Message
  2. Add RenderFragment ChildContent to support the <div> hello </div> case.
[Parameter]  public string Message { get; set; }
[Parameter]  public RenderFragment ChildContent { get; set; }

and then decide where to show @Message and @ChildContent in your dialog

Related