我是MVC3 Razor的新手。如何在webgrid中显示数据表数据?
以下是我的尝试......
我的家庭控制器
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
我的观点
@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>
我的问题
我收到错误消息,因为“列”Eno“不存在。”
我需要的是我想在webgrid中显示数据
---------------------------------
Eno Ename Salary Deptno
---------------------------------
1 a 50000.5 10
2 b 4000.5 20
3 c 10000.5 10
---------------------------------
请帮我解决这个问题。
答案 0 :(得分:0)
您应该将List作为模型返回到您的视图中......
首先,你应该有一个如下所示的课程......
public class SomeDetails
{
public string Eno { get; set; }
public string Ename { get; set; }
public string Salary { get; set; }
public string Deptno { get; set; }
}
并且您的函数应该返回此类的列表。
然后您的视图可以将Model定义为此类的List,然后您可以使用您的webgrid代码
答案 1 :(得分:0)
我以另一种方式得到了解决方案
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)
并查看
<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>