How can I show data table data in webgrid - vb.net

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

You should return a List as your model to your view...
To start with you should have a class like the one shown below...
public class SomeDetails
{
public string Eno { get; set; }
public string Ename { get; set; }
public string Salary { get; set; }
public string Deptno { get; set; }
}
and your function should return a list of this class.
and then your view can have Model defined as a List of this class and then you can use your webgrid's code

Answer 2

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> ";
}
footer = footer + "</tfoot>";
// $("#DataTable thead").after(footer);
return footer;
}
</script>