locked
Blazor Components Summary RRS feed

  • Question

  • User2041008840 posted

    Hello, 
    I have created a bunch of blazor wasm components for reusability and reduce line of code. 
    I want to give the summary info for it. Like when I hover the tag
    <GridView></GridView> It should show the summary info or tooltip that 

    "The table element which is mostly used to show data in table form" like that or something. 

    Is it possible? 


    Saturday, May 22, 2021 5:10 AM

All replies

  • User1535942433 posted

    Hi Prathamesh Shende,

    As far as I think, HTML and Razor markup are placed in a Razor file (.razor). C# code is placed in a code-behind file defined as a partial class (.cs) to show the summary.

    Just like this:

    TestTable.razor:

    @typeparam TItem
    <table class="table">
        <thead>
            <tr>@TableHeader</tr>
        </thead>
        <tbody>
            @foreach (var item in Items)
            {
                <tr>@RowTemplate(item)</tr>
            }
        </tbody>
    </table>

    TestTable.razor.cs:

    using Microsoft.AspNetCore.Components;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    
     
    
    namespace WebApplication23.Shared
    {
        /// <summary>
    /// This is TestTable,it is a TableTemplate component
    /// </summary>
    public partial class TestTable<TItem>{

    /// <param name="TableHeader">It is a TableHeader</param>
    [Parameter]
    public RenderFragment TableHeader { get; set; }
    /// <param name="RowTemplate">It is a RowTemplate</param>
    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }
    /// <param name="Items">It is datasource</param>
    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
    } }

    Index.razor:

    <TestTable Items="pets" Context="pet">
        <TableHeader>
            <th>ID</th>
            <th>Name</th>
        </TableHeader>
        <RowTemplate>
            <td>@pet.PetId</td>
            <td>@pet.Name</td>
        </RowTemplate>
    </TestTable>
    
     
    
    @code {
        private List<Pet> pets = new()
        {
            new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
            new Pet { PetId = 4, Name = "Salem Saberhagen" },
            new Pet { PetId = 7, Name = "K-9" }
        };
        private class Pet
        {
            public int PetId { get; set; }
            public string Name { get; set; }
        }
    }

    Result:

    Note:It may run slow.

    More details,you could refer to below articles:

    https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#partial-class-support

    https://docs.microsoft.com/en-us/dotnet/csharp/codedoc#param

    Best regards,

    Yijing Sun

    Monday, May 24, 2021 9:55 AM