Форматирование и стилизация данных Dynami c, полученных из DataTable в представлении

Question

В настоящее время я использую ASP. NET core 2.1 и bootstrap 4 для создания веб-приложения. Я использую хранимую процедуру Dynami c для возврата таблицы данных с сервера Sql на основе выбора пользователя. Когда данные заполнены в DataTable, я передаю модель, содержащую DataTable, представлению и выполняю ForEach l oop, чтобы заполнить заголовки и строки таблицы, поскольку столбцы являются динамическими c (зависит от того, что выбрал пользователь).

Мой вопрос: как применить форматирование и стиль к таблице, отображаемой для пользователя? Например, если в таблице есть столбец суммы, я хочу отобразить 27,87 долл. Вместо 27,87 и выровнять по правому краю столбца, а если столбец «Дата», отобразить дату в стандартном формате даты с центром в столбце и т. Д.

Вот мой контроллер:

public async Task<ActionResult> TestAction(ViewModel model)
{
    SqlConnection con = new SqlConnection(ConnectionString);
    con.Open();
    SqlCommand cmd = new SqlCommand();
    SqlDataAdapter da = new SqlDataAdapter();

    cmd = new SqlCommand("SP_Test", con);
    cmd.Parameters.Add(new SqlParameter("@TestId", model.TestId));
    cmd.CommandType = CommandType.StoredProcedure;
    da.SelectCommand = cmd;

    da.Fill(model.ReportResults);

    cmd.Dispose();
    con.Close();

    return View(model);
}

, а вот мой взгляд:

@using System.Data
@model ViewModel

<div class="container">
        <table class="table table-hover">
            <thead>
                <tr>
                    @foreach (DataColumn col in Model.ReportResults.Columns)
                    {
                        <th>@col.ColumnName</th>
                    }
                </tr>
            </thead>
            <tbody>
                @foreach (DataRow row in Model.ReportResults.Rows)
                {
                    <tr>
                        @foreach (DataColumn col in Model.ReportResults.Columns)
                        {
                            <td>@row[col.ColumnName]</td>
                        }
                    </tr>
                }
            </tbody>
        </table>

, а вот мой ViewModel:

public class ViewModel
{
    public int ReportId { get; set; }
    public DataTable ReportResults { get; set; }
}

Спасибо

Answer 1

Вы можете добавить оценку к DataType каждого столбца при отображении значения каждой ячейки в foreach l oop и внести изменения формата в окончательное отображаемое значение.

Использовать style="text-align: xx" для тега td для выравнивания столбца по центру или справа.

@using System.Data;
@using System.Globalization;
@model ViewModel  

<div class="container">
    <table class="table table-hover">
        <thead>
            <tr>
                @foreach (DataColumn col in Model.ReportResults.Columns)
                {
                    <th>@col.ColumnName</th>
                }
            </tr>
        </thead>
        <tbody>
            @foreach (DataRow row in Model.ReportResults.Rows)
            {
            <tr>
                @foreach (DataColumn col in Model.ReportResults.Columns)
                {
                    if (col.DataType == typeof(DateTime))
                    { 
                       <td style="text-align:center">
                            @DateTime.Parse(row[col.ColumnName].ToString(), new CultureInfo("en-US"), DateTimeStyles.NoCurrentDateDefault)
                        </td>
                    }
                    else if (col.DataType == typeof(decimal))
                    {
                          <td  style="text-align: right">
                            @decimal.Parse(row[col.ColumnName].ToString()).ToString("C", CultureInfo.CurrentCulture)
                        </td>
                    }
                    else
                    {
                        <td>@row[col.ColumnName]</td>
                    }
                }
            </tr>
            }
        </tbody>
    </table>
</div>

Вот результат: