Как обернуть столбец списка в представлении

Question

У меня есть дата, с которой один столбец является списком, который возвращается запросом linq.

Список выглядит примерно так:

УКИА, EPLS, UNCON НОО, EPLS, HHS, EPLS, HHS, EPLS, EPLS, HHS, НОО

Я бы хотел, чтобы значения столбцов в новых строках разделялись запятыми.

Я не уверен, должен ли я делать это на бэкэнде, или я должен пытаться сделать это с помощью CSS?

Вот пример моего кода:

  internal List<string> GetListTitles(long id_validation_results)
    {
        var list = new List<string>();
        using(var db = new fabitrack_validationEntities(ValidationConnString))
        {

            list =  db.ValidationSpecifics.Where(o => o.id_validation_results == o.id_validation_results)
                        .Select(o => o.title).ToList();
        }

        return list; 
    }


  <tbody>
                    @foreach (var o in Model.Results)
                    {
                    <tr>
                        @if (o.Person.FirstName == null || o.Person.FirstName == "" || o.Person.FirstName == "NOT")
                        {
                            <td>Not Found</td>
                        }
                        else
                        {
                            <td>@Html.ActionLink(o.Person.FirstName, "Detail", "Player", new { selectedPlayerID = o.Person.IDPerson, referringController = "ValidationHistory" }, null)</td>
                        }
                        @if (o.Person.LastName == null || o.Person.LastName == "" || o.Person.LastName == "FOUND")
                        {
                            <td>Not Found</td>
                        }
                        else
                        {
                            <td>@Html.ActionLink(o.Person.LastName, "Detail", "Player", new { selectedPlayerID = o.Person.IDPerson, referringController = "ValidationHistory" }, null)</td>
                        }
                        <td>@o.Person.SocialSecurityNumber</td>
                        <td>@o.Validation_Results.IRSOk</td><!--IRS/TIN-->
                        <td>@o.Validation_Results.DMFOk</td><!--DMF Details-->
                        <td>@o.Validation_Results.ListOk</td><!--List Matches-->
                        <td>@o.Validation_Results.ExecutedAt<!--Executed At-->
                        <td>@o.Validation_Results.ExecutedBy</td><!--Executed By-->
                        <td>@o.Person.ClubID</td>
                        <td id="listcol">@o.ListMatches</td>
                    </tr>
                    }
                </tbody>        

А потом я попробовал немного CSS ..

#listcol {
    display: -ms-flexbox; /* IE 10 */
    display: -webkit-flex; /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 150px;
}

Answer 1

Вы не должны управлять логикой дисплея запятыми (,) и CSS. Это анти-паттерн. В будущем вам может понадобиться изменить разделитель, например, запятую, на точку с запятой. Вместо этого отправьте данные в виде списка с контроллера.

Вы можете использовать следующий код в ответе: Как я могу преобразовать разделенную запятыми строку в Список

string csv = "1,2,3,4,a,5,0,3,r,5";
int mos = 0;
var intList = csv.Split(',')
                    .Where(m => int.TryParse(m, out mos))
                    .Select(m => int.Parse(m))
                    .ToList();

// возвращает список с целыми числами: 1, 2, 3, 4, 5, 0, 3, 5

Теперь у вас есть список целых чисел. То же самое вы можете сделать для строк. Просто измените типы данных и удалите int.TryParse и int.Parse в запросе.

Затем в пользовательском интерфейсе просто переберите список и визуализируйте данные, как вам нужно.