MVC3的webgrid分頁

Model：

 

    public class Genre
    {
        public int GenreId { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public List<Album> Albums { get; set; }
    }

 

 

    public class Artist
    {
        public int ArtistId { get; set; }
        public string Name { get; set; }
    }

 

 

 

    [Bind(Exclude="AlbumId")]
    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }
        [DisplayName("Genre")]
        public int GenreId { get; set; }
        [DisplayName("Artist")]
        public int ArtistId { get; set; }
        [Required(ErrorMessage="An Album Title is requested")]
        [StringLength(160)]
        public string Title { get; set; }
        [Required(ErrorMessage="Price is requested")]
        [Range(0.00,100.00,ErrorMessage="價格必須在0.00到100.00之間")]
        public decimal Price { get; set; }
        [DisplayName("Album Art Url")]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }
        public virtual Genre Genre { get; set; }
        public virtual Artist Artist { get; set; }
    }

 

Controller里獲取數據：

 

var albums = db.Albums.Include(a => a.Genre).Include(a => a.Artist);
            return View(albums.ToList());

注意，Genre和Artist是內聯對象

 

 

View如下：

 

@model IEnumerable<MvcSample.Models.Album>

@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
@{
    var grid = new WebGrid(source: Model, fieldNamePrefix: "", defaultSort: "Genre", canPage: true, canSort: true, ajaxUpdateContainerId: "DivGrid", pageFieldName: "paging", sortFieldName: "Artist", rowsPerPage: 20);
}
<div id="DivGrid">
    @grid.GetHtml(
columns:
grid.Columns(

grid.Column("Genre", "Genre", format: item=>item.Genre.Name,canSort:true),
grid.Column("Artist", "Artist", format: item=>item.Artist.Name,canSort:true),
grid.Column("Title", "Title", format: @<text>@item.Title</text>),
grid.Column("Price", "Price", format: @<text>@item.Price</text>),
    grid.Column("", "", format:@<text> @Html.ActionLink("Edit", "Edit", new { id = item.AlbumId }) |
    @Html.ActionLink("Details", "Details", new { id = item.AlbumId }) |
    @Html.ActionLink("Delete", "Delete", new { id = item.AlbumId })</text>)
)
)
<p>總頁數：@grid.PageCount | 每頁：@grid.RowsPerPage 行 | 當前第 @(grid.PageIndex + 1) 頁</p>

</div>

此時點擊列Genre和Artist，是沒有排序效果的，其實是有刷新，但都是獲取默認數據視圖。我們可以看一下生成的HTML代碼

 

<th scope="col"><a href="#" onclick="$('#DivGrid').load('/storemanager?Artist=Genre&amp;sortdir=ASC&amp;__=634697837603269528 #DivGrid');">Genre</a></th>

可以看到紅色的是排序的列參數，但在Album里，是沒有這一屬性的，必須把Genre改成Genre.Name才可以。

所以在View里，必須修改這兩行

 

grid.Column(" Genre.Name", "Genre", format: item=>item.Genre.Name,canSort:true),
grid.Column(" Artist.Name", "Artist", format: item=>item.Artist.Name,canSort:true),

 OK，現在點擊列頭就可以排序了