How can I show data table data in webgrid

Question

I am new to MVC3 Razor. How can I show data table data in webgrid ?

Below is what I have tried...

My Home Controller

Public Function List() As ActionResult

Dim dt1 As New DataTable
dt1.Columns.Add("Eno", GetType(Int32))
dt1.Columns.Add("Ename", GetType([String]))
dt1.Columns.Add("Salary", GetType([Double]))
dt1.Columns.Add("Deptno", GetType(Int32))

' Loading data into dt1, dt2:

Dim o1 As Object() = {1, "a", 50000.5, 10}
Dim o2 As Object() = {2, "b", 4000.5, 20}
Dim o3 As Object() = {3, "c", 10000.5, 10}
dt1.Rows.Add(o1)
dt1.Rows.Add(o2)
dt1.Rows.Add(o3)


dt1.AsEnumerable()
Dim columns = dt1.Columns.Cast(Of DataColumn)()
Dim wgrid As Web.Helpers.WebGrid

wgrid = New Web.Helpers.WebGrid(source:=columns, defaultSort:="Eno", rowsPerPage:=2)

Return View(wgrid)
End Function

My View

@ModelType System.Web.Helpers.WebGrid

<h1>Emp Details</h1> 
<div id="grid"> 
  @Model.GetHtml(tableStyle:="grid", headerStyle:="head", alternatingRowStyle:="alt", columns:={Model.Column("Eno")})
</div> 

My Problem

I get an error message as "Column "Eno" does not exist."

what i need is i want to show the data in the webgrid as

---------------------------------
Eno    Ename    Salary    Deptno
---------------------------------
1        a      50000.5    10
2        b      4000.5     20
3        c      10000.5    10
---------------------------------

please help me out on this.

Answer 1

i got the solution in another way

    Dim dt1 As New DataTable
                dt1.Columns.Add("Eno", GetType(Int32))
                dt1.Columns.Add("Ename", GetType([String]))
                dt1.Columns.Add("Salary", GetType([Double]))
                dt1.Columns.Add("Deptno", GetType(Int32))

                Dim o1 As Object() = {1, "a", 50000.5, 10}
                Dim o2 As Object() = {2, "b", 4000.5, 20}
                Dim o3 As Object() = {3, "c", 10000.5, 10}
                dt1.Rows.Add(o1)
                dt1.Rows.Add(o2)
                dt1.Rows.Add(o3)

                Dim skip As Integer = If(page.HasValue, page.Value - 1, 0)

                Dim data = From row In dt1.AsEnumerable() Select New With {.value = row("intDepartmentID").ToString, .display = row("vchDepartment").ToString}

                Dim grid = New Helpers.WebGrid(data, rowsPerPage:=10)

                Dim htmlString = grid.GetHtml(tableStyle:="webgrid", htmlAttributes:=New With {.id = "DataTable"}, headerStyle:="webgrid-header", alternatingRowStyle:="webgrid-alternating-row", footerStyle:="webgrid-footer", selectedRowStyle:="webgrid-selected-row", rowStyle:="webgrid-row-style", columns:=grid.Columns(grid.Column("display", "Eno"), grid.Column("value", "Ename")))

Return Json(New With {.Data = htmlString.ToHtmlString(), .count = data.Count()}, JsonRequestBehavior.AllowGet)

and view

<div class="tablegridpanel">
<div id="div1">
</div>
</div>
<script type="text/javascript">

    /* On pageload web grid is loaded */
    $(document).ready(function () {
        alert("hii");
        PopulateGrid();
    });
    function PopulateGrid() {
        $.getJSON("/Home/webGrid", null, function (d) {
            if (d.count > 0) {
                $("#DataTable").remove();
                $("#div1").append(d.Data);
            }
            else {
                $('#div1').hide();enter code here
            }
            var footer = createFooter(d.Count);
            $("#DataTable tfoot a").live("click", function (e) {
                e.preventDefault();
                var data = {`enter code here`
                    page: $(this).text()
                };
                $.getJSON("/Home/webGrid", { page: data.page }, function (html) {
                    if (html.count > 0) {
                        $("#DataTable").remove();
                        $("#div1").append(html.Data);
                        //                        $('#DataTable thead').after(footer);
                    }
                    else {
                        $('#div1').hide();
                    }
                });

            });
        });
    }
    function createFooter(d) {
        var rowsPerPage = 5;
        var footer = "<tfoot>";
        for (var i = 1; i < (d + 1); i++) {
            footer = footer + "<a href=#>" + i + "</a>&nbsp;";
        }
        footer = footer + "</tfoot>";
        //        $("#DataTable thead").after(footer);
        return footer;
    }
</script>