ASP.NET MVC 5 webgrid

Question

This is my View. It has a table and a webgrid.

@model IEnumerable<List.Models.cList>

@{
    ViewBag.Title = "List";
    var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 20);
    grid.Pager(WebGridPagerModes.All); }

<h2>List</h2>

This is my table:

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.ActionLink("Podrobno", "Artikel_Podrobno", new { parID = item.ID, parName = item.Name })
            </td>
        </tr>
    }
</table>

This is my webgrid:

<style type="text/css">
    .webgrid-table {
        font-family: Verdana;
        font-size: 1em;
        width: auto;
        display: table;
        border-collapse: separate;
        border: solid 1px black;
        background-color: white;
    }

        .webgrid-table td, th {
            border: solid 1px #98BF21;
            padding: 3px 7px 2px;
        }

    .webgrid-header {
        background-color: azure;
        color: aqua;
        padding-bottom: 4px;
        padding-top: 5px;
        text-align: left;
    }

    .webgrid-footer {
    }

    .webgrid-row-style {
        padding: 3px 7px 2px;
    }

    .webgrid-alternating-row {
        background-color: #EAF2D3;
        padding: 3px 7px 2px;
    }
</style>

<div id="content">
    @grid.GetHtml(
    tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    rowStyle: "webgrid-row-style",
    columns: grid.Columns(
    grid.Column(columnName: "ID", header: "ID", format:@<text>@Html.ActionLink("ID", "Analitics", new { parID = item.ID, parName = item.Name })</text>),
    grid.Column(columnName: "Name")
    )
                   )
</div>

Now what I am trying to do is display the name of the column in webgrid like I did in my table (@Html.DisplayFor(modelItem => item.ID)). But because it requires a string I can't do this. So this (grid.Column(columnName: "ID", header: item.ID, ...) does not work.

Can anyone tell me how to do this?

Answer 1

Dynamic Header

columns: grid.Columns(
        grid.Column("ID",null,format:@<text>@{
                                                   string ID= item.ID;
                                                   @Html.DisplayFor(m => ID);
                                            } </text>),
        grid.Column("Name",null,format:@<text>@{
                                                   string Name= item.Name;
                                                   @Html.DisplayFor(m => Name);
                                            } </text>),
       grid.Column(null,null,
format:@<text>
@{
    string userIdlink = item.ID;
    @Html.ActionLink(userIdlink, "Analitics", new { parID = item.ID, parName = item.Name });
}</text>)
        )

With Action Link

 columns: grid.Columns(
        grid.Column("ID","ID"),
        grid.Column("Name","Name"),
       grid.Column(null,null,
format:@<text>
@{
    string userIdlink = item.ID;
    @Html.ActionLink(userIdlink, "Analitics", new { parID = item.ID, parName = item.Name });
}</text>)
        )

You can do the following to get same UI style as that of above table.

 columns: grid.Columns(
        grid.Column("ID","ID"),
        grid.Column("Name","Name"),
        grid.Column("ID",null, format:@<a href="@Url.Action("Analitics","ControllerName",new { parID = item.ID, parName = item.Name })">@item.ID</a>)
        )