如何在 webgrid 中显示数据表数据答案

【问题标题】：How can I show data table data in webgrid如何在 webgrid 中显示数据表数据
【发布时间】：2013-04-10 05:34:08
【问题描述】：

我是 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
---------------------------------

请帮我解决这个问题。

【问题讨论】：

将您的数据表转换为列表或可枚举列表。 List<ModelClass> lst=dt.AsEnumerable().ToList(); 将列表传递给您的网格
你可能会发现this link很有用
嗨 @Yasser 在您的代码中 @{ var grid = new WebGrid(source: Model.Products); @grid.GetHtml() } 什么是产品？我使用的模型类型为@ModelType System.Web.Helpers.WebGrid?

标签： vb.net asp.net-mvc-3 razor webgrid

【解决方案1】：

您应该将一个列表作为模型返回到您的视图中...

首先你应该有一个如下所示的类...

public class SomeDetails 
{        
    public string Eno { get; set; }
    public string Ename { get; set; }
    public string Salary { get; set; }
    public string Deptno { get; set; }
}

你的函数应该返回这个类的列表。

然后您的视图可以将模型定义为此类的列表，然后您可以使用 webgrid 的代码

【讨论】：

【解决方案2】：

我以另一种方式得到了解决方案

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

【讨论】：