1

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

これについて私を助けてください。

4

2 に答える 2

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>&nbsp;";
        }
        footer = footer + "</tfoot>";
        //        $("#DataTable thead").after(footer);
        return footer;
    }
</script>
于 2013-04-11T04:43:56.620 に答える
0

モデルとしてリストをビューに返す必要があります...

まず、以下に示すようなクラスが必要です...

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

関数はこのクラスのリストを返す必要があります。

次に、ビューにこのクラスのリストとして定義されたモデルを含めることができ、WebGrid のコードを使用できます。

于 2013-04-10T10:24:49.067 に答える