如何在MVC4.0 cshtml页面中创建网格视图？ [英] how to create Grid View in MVC4.0 cshtml page?

问题描述

我有一个表和一些colums ..我可以在MVc 4.0 Cshtml页面中创建Grid View吗？

请发给我。

i have one table and some colums ..how can i create Grid View for That in MVc 4.0 Cshtml page?
Please send me.

推荐答案

你有两个选项可以在mvc中制作网格：



1）在视图中使用foreach循环。

You have two options to make grid in mvc:

1) Using foreach loop in view.

Add following model list at the top of the page.

// List of the model with data
@model List<modellist>  like @model List<mvc_project.model.studentmodel>

<table>
    <tr>
        <th>
           First Name
        </th>
        <th>
            Last Name
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @item.FirstName
            </td>
            <td>
                @item.LastName
            </td>
        </tr>
    }
</table>

注意：但必须要做自定义分页，在这种类型的网格中排序。所以我建议您使用 WebGrid ，如下所示。



2）WebGrid示例。

Note: But have to do custom paging, sorting in this type of grid. So I suggest you to user WebGrid like follows.

2) WebGrid Example.

@{
    var grid = new WebGrid(source: Model, canPage: true, canSort: false);
}
@grid.GetHtml(
    htmlAttributes: new { id = "gridId" },
    fillEmptyRows: false,
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",

columns: new[] {
        grid.Column("FirstName", "Name"),
        grid.Column("LastName", "Last Name"),
               //add edit, delete links
                grid.Column(columnName: "Edit", format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.id })),
                grid.Column(columnName: "Delete", format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.id }, new { onclick = "return confirm('Are you sure you want to delete this record?');" }))
                }
)

WebGrid是mvc中用于在网格中显示数据的最佳方式，因为您无需进行自定义分页，排序。

WebGrid is the best way in mvc to make to show data in grid because you have no need to do custom paging, sorting.

这篇关于如何在MVC4.0 cshtml页面中创建网格视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！