Webgrid rows based on a collection in Model. MVC4

Question

I am trying to create a webgrid that will have rows of one column. The number of rows will depend upon the number of email addresses (strings) in the Model coming in. Here's the code of the view:

@model BarClients.Models.BarClientsViewModel

@{
    var grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId:     "gridContent");
    int rowIndex = 0;

    if (Model.EmailAddressesOfChosenClient != null)
    {
        foreach (var email in Model.EmailAddressesOfChosenClient)
        {
            grid.Rows.Add(new WebGridRow(grid, email, rowIndex++));
        }        
    }
}


div id="gridContent"
@grid.GetHtml()
/div (arrows removed).

At @grid.GetHtml(), I am getting the error: A data source must be bound before this operation can be performed.

Is it even possible what I am trying to do? Many thanks.

Answer 1

You don't need to add the rows. They will be automatically generated when you call @grid.GetHtml().

This article shows you how to use the WebGrid and even improve it to be safely typed, if you want to.

The minimum code to render a grid looks like this:

@{
   var grid = new WebGrid(Model, defaultSort:"Name");
}

@grid.GetHtml()

Where Model is an IEnumerable<T> of objects, for example a List<T>. (Well there is a little bit more than the minimun: this will sort the grid by Name, and Name must be a property of the enumerated object).

Of course you can "fine-tune" it, by defining columns, formats and so on.