How to wrap a list column in a view

Question

I have a datatable with which one column is a list that is returned by a linq query.

The list look something like:

OFAC,EPLS,UNCON,IEO,EPLS,HHS,EPLS,HHS,EPLS,EPLS,HHS,IEO

I would like the column values to be separated on new lines by the commas.

I am not sure if I should be doing this on the back-end, or if I should be trying to accomplish this with CSS?

Here is a sample of my code:

  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>

And then some CSS I have tried..

#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;
}

Rahatur · Answer 1 · 2019-04-29T16:04:29.777

You should not drive the display logic with commas (,) and CSS. This is an anti-pattern. In the future you might need to change the separator like comma to a semicolon. Instead send the data as a list from the controller.

You can use the following code as answered here: How can I convert comma separated string into a List<int>

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();

//returns a list with integers: 1, 2, 3, 4, 5, 0, 3, 5

Now you have a list of integers. Same you can do for strings. Just change the data types and remove the int.TryParse and int.Parse in the query.

Then on the UI just loop through the list and render the data as you need.

How to wrap a list column in a view

1 Answers1