2012-09-27 68 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; 
}