Question

我需要向某些东西展示记录。请查看下面的图片。我需要在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")

                             ))

Answer 1

我最初的回答是，实际上，您不想将WebGrid用于图像中概述的场景。 WebGrid呈现一个HTML表，用于显示表格数据 - 列和行（这就是WebGrid包含列排序功能的原因）。

但是，您可以将任何HTML模板传递给WebGrid列的format参数。所以这可以为你提供一个起点：

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类。< / p>

如果你决定不使用Webgrid，但仍然希望能够使用分页，我写了一篇关于如何做到这一点的文章。它适用于网页，但仍使用Razor语法：http://www.mikesdotnetting.com/Article/150/Web-Pages-Efficient-Paging-Without-The-WebGrid

使用webgrid进行自定义设计

1 个答案: