Return string in Blazor

Question

I have a function that creates an html table from a DataTable. I have attached the code below. Now my question is, how can I convert my string into a HTML code in my Blazor App?

Thanks for your efforts. :)

public static string ConvertDataTableToHtml(DataTable dt)
    {
        string html = "<table>";
        //add header row
        html += "<tr>";
        for (int i = 0; i < dt.Columns.Count; i++)
            html += "<td>" + dt.Columns[i].ColumnName + "</td>";
        html += "</tr>";
        //add rows
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            html += "<tr>";
            for (int j = 0; j < dt.Columns.Count; j++)
                html += "<td>" + dt.Rows[i][j].ToString() + "</td>";
            html += "</tr>";
        }
        html += "</table>";
        return html;
    }

Answer 1

Whatever you're trying to do, stop. This isn't the way. You must embrace Blazor's awesomeness.

It should look something like (I'm not testing this, just to show you the idea):

TableComponent.razor

<table>
    <thead>
            <tr>
            @for (int i = 0; i < dt.Columns.Count; i++)
            {
                <td>@dt.Columns[i]</td>
            }
            </tr>
    </thead>
    <tbody>
        //add rows
        @for (int i = 0; i < dt.Rows.Count; i++)
        {
            <tr>
            @for (int j = 0; j < dt.Columns.Count; j++)
            {
                <td>@dt.Rows[i][j].ToString()</td>
            }
        }
    </tbody>
</table>

@code {
    [Parameter]
    DataTable dt {get; set;}
}

ParentComponentOrPage.razor

<TableComponent dt="@MyData"/>

@code
{
    DataTable MyData;  // Do something in override OnInitializedAsync  to fill your table.
}

Look at your string building code, and look at the sexy-sweet Blazor equivalent, and know that Microsoft has done the coolest thing to happen to computing over the past couple years! :D