2013-04-10 22 views
0

我是MVC3 Razor的新手。如何在webgrid中显示数据表数据?我如何在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

将您的数据表转换为列表或可枚举列表。 'List lst = dt.AsEnumerable()。ToList();'将列表传递给您的网格 – 2013-04-10 06:06:26

+0

您可能会发现[此链接](http://yassershaikh.com/introduction-to-webgrid-in-mvc-3 -razor-with-code-samples /) – Yasser 2013-04-10 08:11:33

+0

hi @Yasser in your code'@ { var grid = new WebGrid(source:Model.Products); @ grid.GetHtml() }'什么是产品?和我使用模型类型'@ModelType System.Web.Helpers.WebGrid'? – 2013-04-10 09:09:57

回答

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> 
解决方案
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的代码

相关问题