System.Data.DataTable在Blazor可用吗？

Question

我对blazor很陌生，还试着用它。我尝试重新创建中继器，并试图使用System.Data.DataTable绑定它，但它似乎是不可能做到的，而且我也找不到如何调用行的方法。

在Blazor中如何使用DataTable有迂回的方法吗？

 <Repeater2 Items=@dtTest>
    <RepeaterContainerTemplate Context=ItemsContent>
        <table class="table table-condensed table-bordered">
            <thead>
                <tr>
                    <th class="text-center">Text A</th>
                    <th class="text-center">Text B</th>
                    <th class="text-center">Text C</th>
                </tr>
             </thead>
             <tbody>
                   @ItemsContent
             </tbody>
         </table>
     </RepeaterContainerTemplate>
     <ItemTemplate Context=test>
         <tr>
             <td class="text-center">@test["Text_A"]</td>
             <td class="text-center">@test["Text_B"]</td>
             <td class="text-center">@test["Text_C"]</td>
         </tr>                 
     </ItemTemplate>
 </Repeater2>

Answer 1

这不是如何在Blazor做事情。我使用Dapper进行SQL查询，我的数据方法返回一个类型化的List。这使得Linq很容易对标记中的foreach循环中的查询结果进行排序、筛选或其他操作。这比以前在Winforms或Webforms中所做的事情要简单得多，在Winforms或Webforms中，您必须在代码背后处理数据表、行等。

您不必创建一个中继器或任何一个asp.net表单列表对象，因为现在您可以在标记中使用C#逻辑来决定什么以及如何呈现，在我的经验中，这是非常好的。

Answer 2

您可以在Blazor应用程序中使用System.Data.DataTable，如下所示

这是你的html

@using System.Data

<table class="table table-condensed table-bordered">
    <thead>
        <tr>
            <th class="text-center">Text A</th>
            <th class="text-center">Text B</th>
            <th class="text-center">Text C</th>
        </tr>
    </thead>
    <tbody>
        @foreach (DataRow row in table.Rows)
        {
            <td class="text-center">@row["TextA"]</td>
            <td class="text-center">@row["TextB"]</td>
            <td class="text-center">@row["TextC"]</td>
        }
    </tbody>
</table>

这是你的代码

@code {    
    private System.Data.DataTable table;
    
    protected override void OnInitialized()
    {
        table = new();

        table.Columns.Add("TextA");
        table.Columns.Add("TextB");
        table.Columns.Add("TextC");

        var row = table.NewRow();
        row["TextA"] = "Text_A";
        row["TextB"] = "Text_B";
        row["TextC"] = "Text_C";

        table.Rows.Add(row);
    }    
}

Answer 3

你可以在互联网上的很多网站上找到类似的东西，所以我基本上是在回溯已经存在的东西。

MyTable.razor

@typeparam TRow

@if (this.HeaderRow is not null && this.DataRow is not null && this.DataTable is not null && this.Show)
{
    <table @attributes=UserAttributes>
        <thead>
        <tr>
            @this.HeaderRow
        </tr>
        </thead>
        <tbody>
        @foreach (var item in DataTable)
        {
            <tr>
                @this.DataRow(item)
            </tr>
        }
        </tbody>
    </table>
}

@code {
    [Parameter] public bool Show { get; set; }
    [Parameter] public IEnumerable<TRow>? DataTable { get; set; }
    [Parameter] public RenderFragment? HeaderRow { get; set; }
    [Parameter] public RenderFragment<TRow>? DataRow { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public IDictionary<string, object> UserAttributes { get; set; } = new Dictionary<string, object>();
}

下面是使用该组件的FetchData版本。

@page "/fetchdata"
<PageTitle>Weather forecast</PageTitle>
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

<BaseTable TRow=WeatherForecast DataTable=this.forecasts Show=this.show class="table">
    <HeaderRow>
        <th>Date</th>
        <th>Temp. (C)</th>
        <th>Temp. (F)</th>
        <th>Summary</th>
    </HeaderRow>
    <DataRow>
        <td>@context.Date.ToShortDateString()</td>
        <td>@context.TemperatureC</td>
        <td>@context.TemperatureF</td>
        <td>@context.Summary</td>
    </DataRow>
</BaseTable>

@code {
    private WeatherForecast[]? forecasts;
    private bool show => forecasts is not null;
    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

请注意，我总是使用适当的视图服务来进行数据管理，这样WeatherForecast[]就可以在该服务中而不是在UI中生存。