使用webgrid的自定義設計

我需要顯示記錄一些事情。請檢查下面的圖片。我需要在webgrid中顯示記錄。使用webgrid的自定義設計

enter image description here

@{ 
    MalayaleeTech.Models.NewLIst newsL = new MalayaleeTech.Models.NewLIst(); 
} 
@{ 
    var grid = new WebGrid(Model.News, canPage: true, rowsPerPage: 10, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent"); 
    grid.Pager(WebGridPagerModes.NextPrevious); 
} 



@grid.GetHtml(tableStyle: "webGrid", 
            headerStyle: "header", 
            mode: WebGridPagerModes.All, 
            numericLinksCount: 10, 
            firstText: "<<", 
            previousText: "<", 
            nextText: ">", 
            lastText: ">>", 
            displayHeader:false, 
            footerStyle: "webgrid-footer", 
            columns: grid.Columns(
            grid.Column("NewsID", "News ID", style: "gridrow"), 
            grid.Column("NewsHeader", "News Header", style: "gridrow") 

          ))

來源

2013-12-17 user1849993

您的意思是代碼...？ – user1849993

我的第一反應是，實際上，你不想使用的WebGrid在圖像描述的場景。 WebGrid呈現一個HTML表格，該表格專門用於顯示表格數據 - 列和行（這是WebGrid包括列排序功能的原因）。

但是，您可以將任何HTML模板傳遞給WebGrid列的格式參數。因此，這可以爲你提供了一個起點：

var grid = new WebGrid(Model.News) 
@grid.GetHtml(
    columns: grid.Columns(
     grid.Column("", "SPORTS", format: @<div> 
            <h1>@item.Headline</h1> 
            <div class="block"> 
             <img src="@item.Image" /> 
            </div> 
            <div class="block">@item.Text</div> 
           </div>)))

您需要更改的屬性名稱，以匹配你的模型，你也將需要應用一些CSS正確的作風， - 我建議使用display:inline-block爲block CSS類。

如果您決定不使用Webgrid，但仍希望能夠使用分頁，我寫了一篇關於如何做到這一點的文章。它適用於Web頁面，但仍使用Razor語法：http://www.mikesdotnetting.com/Article/150/Web-Pages-Efficient-Paging-Without-The-WebGrid

來源

2013-12-17 09:05:55

使用webgrid的自定義設計

回答

相關問題