Using WebGrid to show a list of email addresses (strings) - ASP.Net MVC4

Question

I am declaring a WebGrid as follows:

@{
    WebGrid grid = null;
    if (Model.EmailAddressesOfChosenClient.Count<string>() != 0)
    {
        grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId: "gridContent");
    }
}

Then I am trying to Render the WebGrid as follows without specifying any columns:

<div id="gridContent">
@{ if (grid != null)
   {
      @grid.GetHtml()
   }
}
</div>

My EmailAddressesOfChosenClient property of the Model is IEnumerable of strings where each string is an email address. I would like the WebGrid to contain a single column with title "Email Address" followed by rows of email address strings.

If I render it this way however, my WebGrid shows up with column heading "Length" and the rows contain the length of each email address string.

Why is that? How do I configure things so that I show the email addresses in the rows and with the right column heading? Many thanks

Answer 1

Why is that?

Because if you do not explicitly specify the columns, the helper uses reflection to inspect the public properties of the type and autogenerates a column for them. So the System.String has the .Length public property and thus you get a column for it.

You will need to use a custom column:

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("email", format: item => item)
    )
)

Alternatively you could define a view model and have your IEnumerable<T> use this view model instead of string.