细目表（按页）

Question

I'm creating a webpage using Razor in VS2012, where it will list a bunch of available projects in a table. The problem is, this table can get pretty long. Is there a way to separate these rows by pages (maybe 5 projects in each page in the table) without using webgrid or Javascript?

Code:

@if (!Request.QueryString["UserID"].IsEmpty()){
    <table>      
    <tr>
    <th >Group ID</th>
    <th >PPMID</th>
    <th >EPRID</th>
    <th >Project Name</th>
    <th >Delete</th>
    </tr>

    @foreach (var row in db.Query(sql_c)) {
    counter++;
    <tr class="@temp">

        <td><br />
            @row.UserID
        </td>

        <td><br />
            @row.PPMID
        </td>

        <td><br />
            @row.EPRID
        </td>

        <td ><br />
            @row.Proj_Name
        </td>

        <td><br /><button type="submit" onclick="return confirm('Are you sure you want to delete?')" id="delete" name="delete" value="@row.Link"/>Delete</td>

    </tr>            
    }
    </table>
    <br /><input style="float:right;font-weight:bold" type="submit" id="add" name="add" value="Add New Project" />
} 

Answer 1

This can be achieved with a NuGet package called PagedList.Mvc , complete step by step tutorial - here

1. Open package manager console in Visual Studio
2. Set the Default project: to your web application
3. Paste Install-Package PagedList.Mvc in the console and press Enter

4. Open web.config file in the VIEWS folder and the namespaces below to the <namespaces> element

    <add namespace="PagedList"/> <add namespace="PagedList.Mvc"/> 

Controller:

public class PagingController : Controller
{
    public ActionResult Index(int?page)
    {
        int pageSize = 3;
        int pageNumber = (page ?? 1);

        List<Item> items = this.GetItems();
        return View(items.ToPagedList(pageNumber, pageSize));
    }

    private List<Item> GetItems()
    {
        var item1 = new Item { Description = "Item 1", Number = "1" };
        var item2 = new Item { Description = "Item 2", Number = "2" };
        var item3 = new Item { Description = "Item 3", Number = "3" };

        var item4 = new Item { Description = "Item 4", Number = "4" };
        var item5 = new Item { Description = "Item 5", Number = "5" };
        var item6 = new Item { Description = "Item 6", Number = "6" };

        var item7 = new Item { Description = "Item 7", Number = "7" };
        var item8 = new Item { Description = "Item 8", Number = "8" };

        return new List<Item> { item1, item2, item3, item4, item5, item6 ,item7, item8};
    }
}

View:

@model PagedList.IPagedList<MVC_jqgrid_example.Controllers.Item>

@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
    Layout = null;
}

<table class="table">
    <tr>
        <th>
            Number
        </th>
        <th>
            Description
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @item.Number
        </td>
        <td>
            @item.Description
        </td>
    </tr>
}
</table>
<br />
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action("Index",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

Output: