Access to a collection type in webgrid

Question

I have used a webgrid in an asp.net mvc4 application

@if( @Model.Count  >   0){
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
grid.Pager(WebGridPagerModes.All);
@grid.GetHtml(
        tableStyle: "table_data",
        headerStyle: "table_header",
        columns: grid.Columns(
    grid.Column("Concept technique", "Concept technique", canSort: false, format: @<label>@Html.Raw(@item.Concept)</label>),
    grid.Column("Propriétés", "Propriétés", canSort: false, format: @<span>@{ 
                                   var liste= item.Propriétés;
                             foreach (var s in liste){@s}}</span>),
    grid.Column("Catégorie", "Catégorie", canSort: false, format: @<label>@Html.Raw(@item.Catégorie)</label>)

                                                                                                    )
                                                                                   );
}

The model of this view contains a List<String> called Propriétés .My problem is in this line

var liste= item.Propriétés;

I got this error :

Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: 'System.Web.Helpers.WebGridRow' not contain the definition of 'Propriétés'

1. Why this error appears?
2. How can i proceed to fix this error?

Answer 1

You cannot define and set a variable and exceute a foreach loop inside the template.

What you have to do is to create an html helper, and use it in the template:

Define it in your razor file before using it in the webgrid:

@helper Propriétés(List<string> propriétés)
{
    foreach (var p in propriétés)
    {
    <span>p</span>
    }
}

Use it in your webGrid column template:

format: <text>@Propriétés(@item.Propriétés)</text>