2012-09-27 47 views
0

我想在MVC中的视图上显示网格。在html页面显示网格?

我已经填充了一个WebGrid,但我不能让它显示?

有人请告诉我如何显示webGrid?

我查看的代码如下:

@model MvcResComm.Models.ReturnProperties 
@{ 
    ViewBag.Title = "ShowProperties"; 
} 
<h2>Select Property</h2> 

@using System.Dynamic 
@{ 
    var result = new List<dynamic>(); 

    foreach (var emprow in Model.DDS) 
    { 
     var row = (IDictionary<string, object>)new ExpandoObject(); 
     Dictionary<string, object> eachEmpRow = (Dictionary<string, object>)emprow; 

     foreach (KeyValuePair<string, object> keyValuePair in eachEmpRow) 
     { 
      row.Add(keyValuePair); 
     } 
     result.Add(row); 
    } 
    var grid = new WebGrid(result); 
    } 

回答

1

这条线需要

@grid.GetHtml() 
+0

谢谢,你知道如何风格电网在所有?也许像添加行到单独的行和列? – Pomster

+0

我认为你可以使用css的.. GetHtml将网格转换为HTML表,所以你可以使用CSS来添加边框,颜色等。 – th1rdey3

1
@using System.Dynamic 
<div> 
@{ 
    var result = new List<dynamic>(); 

    foreach (var emprow in Model.DDS) 
    { 
     var row = (IDictionary<string, object>)new ExpandoObject(); 
     Dictionary<string, object> eachEmpRow = (Dictionary<string, object>)emprow; 

     foreach (KeyValuePair<string, object> keyValuePair in eachEmpRow) 
     { 
      row.Add(keyValuePair); 
     } 
     result.Add(row); 
    } 
    var grid = new WebGrid(result); 

} 
@grid.GetHtml(
     tableStyle: "grid", 
     headerStyle: "grid-header", 
     alternatingRowStyle: "grid-alternating-row", 
     selectedRowStyle: "grid-selected-row", 
     rowStyle: "grid-row-style" 
     ) 
</div> 

的site.css

.grid 
{ 
    width: 50%; 
    border: 0px; 
    border-collapse: collapse; 
} 

.grid a 
{ 
    color: #000; 
} 

.grid-row-style td 
{ 
    text-align:center 
} 

.grid-header th 
{ 
    padding-right:20px; 
    padding-left:20px; 
} 

.grid-alternating-row td 
{ 
    text-align:center 
} 

.grid-header 
{ 
    padding: 6px 5px; 
    text-align: center; 
    background-color: #e8eef4; 
    border-bottom: 2px solid #3966A2; 
    height: 40px; 
    border-top: 2px solid #D6E8FF; 
    border-left: 2px solid #D6E8FF; 
    border-right: 2px solid #D6E8FF; 
} 

.grid-footer 
{ 
    padding: 6px 5px; 
    text-align: center; 
    background-color: #e8eef4; 
    border-top: 2px solid #3966A2; 
    height: 30px; 
    border-bottom: 2px solid #D6E8FF; 
    border-left: 2px solid #D6E8FF; 
    border-right: 2px solid #D6E8FF; 
} 

.grid-alternating-row 
{ 
    height: 30px; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #d2d2d2; 
    border-left: 2px solid #D6E8FF; 
    border-right: 2px solid #D6E8FF; 
} 

.grid-row-style 
{ 
    height: 30px; 
    border-bottom: 1px solid #d2d2d2; 
    border-left: 2px solid #D6E8FF; 
    border-right: 2px solid #D6E8FF; 
} 

.grid-selected-row 
{ 
    font-weight: bold; 
}