MVC 3のwebgridページング
3747 ワード
Model:
public class Genre
{
public int GenreId { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public List 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.00100.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@{ ViewBag.Title = "Index";}
カラムGenreとArtistをクリックすると、ソート効果はありませんが、リフレッシュはありますが、デフォルトのデータビューを取得します.生成されたHTMLコードを見てみましょう
赤いのはソートされた列のパラメータが見えますが、Albumでは、この属性はありません.GenreをGenreに変更する必要があります.Nameだけです.
だからViewでは、この2行を修正しなければなりません.
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、今列の先頭をクリックして並べ替えられます
public class Genre
{
public int GenreId { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public List
}
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.00100.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
Index
@Html.ActionLink("Create New", "Create")
@{ var grid = new WebGrid(source: Model, fieldNamePrefix: "", defaultSort: "Genre", canPage: true, canSort: true, ajaxUpdateContainerId: "DivGrid", pageFieldName: "paging", sortFieldName: "Artist", rowsPerPage: 20);} @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: @@item.Title ),grid.Column("Price", "Price", format: @@item.Price ), grid.Column("", "", format:@ @Html.ActionLink("Edit", "Edit", new { id = item.AlbumId }) | @Html.ActionLink("Details", "Details", new { id = item.AlbumId }) | @Html.ActionLink("Delete","Delete",new{id=item.AlbumId}) ))))
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: @
総ページ数:@grid.PageCount|各ページ:@grid.RowsPerPage行|現在@(grid.PageIndex+1)ページ
カラムGenreとArtistをクリックすると、ソート効果はありませんが、リフレッシュはありますが、デフォルトのデータビューを取得します.生成されたHTMLコードを見てみましょう
<th scope="col"><a href="#" onclick="$('#DivGrid').load('/storemanager?Artist=Genre&sortdir=ASC&__=634697837603269528 #DivGrid');">Genre</a></th>赤いのはソートされた列のパラメータが見えますが、Albumでは、この属性はありません.GenreをGenreに変更する必要があります.Nameだけです.
だからViewでは、この2行を修正しなければなりません.
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、今列の先頭をクリックして並べ替えられます