ASP.NET MVC は初めてで、Entity を使用してデータを取得し、ページング データグリッドに表示する単純なページを作成したいと考えています。
誰でも正しい方向やチュートリアルなどに私を向けることができます.
もののリストを取得して表示するための概念実証にすぎません。
ASP.NET MVC は初めてで、Entity を使用してデータを取得し、ページング データグリッドに表示する単純なページを作成したいと考えています。
誰でも正しい方向やチュートリアルなどに私を向けることができます.
もののリストを取得して表示するための概念実証にすぎません。
そのために、ASP.NET MVC jqGridを使用できます。
以下に、それを実現する方法のサンプル コードを示します。
サンプル画像
アクション方法
public ActionResult JsonSalesCollection(DateTime startDate, DateTime endDate,
string sidx, string sord, int page, int rows)
{
SalesLogic logicLayer = new SalesLogic();
List<Sale> context;
// If we aren't filtering by date, return this month's contributions
if (startDate == DateTime.MinValue || endDate == DateTime.MinValue)
{
context = logicLayer.GetSales();
}
else // Filter by specified date range
{
context = logicLayer.GetSalesByDateRange(startDate, endDate);
}
// Calculate page index, total pages, etc. for jqGrid to us for paging
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = context.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
// Order the results based on the order passed into the method
string orderBy = string.Format("{0} {1}", sidx, sord);
var sales = context.AsQueryable()
.OrderBy(orderBy) // Uses System.Linq.Dynamic library for sorting
.Skip(pageIndex * pageSize)
.Take(pageSize);
// Format the data for the jqGrid
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (
from s in sales
select new
{
i = s.Id,
cell = new string[] {
s.Id.ToString(),
s.Quantity.ToString(),
s.Product,
s.Customer,
s.Date.ToShortDateString(),
s.Amount.ToString("c")
}
}).ToArray()
};
// Return the result in json
return Json(jsonData);
}
Jquery のセットアップ
<script type="text/javascript">
var gridDataUrl = '/Home/JsonSalesCollection';
// use date.js to calculate the values for this month
var startDate = Date.parse('today').moveToFirstDayOfMonth();
var endDate = Date.parse('today');
jQuery("#list").jqGrid({
url: gridDataUrl + '?startDate=' + startDate.toJSONString() + '&endDate=' + endDate.toJSONString(),
datatype: "json",
mtype: 'GET',
colNames: ['Sale Id', 'Quantity', 'Product', 'Customer', 'Date', 'Amount'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'left' },
{ name: 'Quantity', index: 'Quantity', width: 100, align: 'left' },
{ name: 'Product', index: 'Product', width: 100, align: 'left' },
{ name: 'Customer', index: 'Customer', width: 100, align: 'left' },
{ name: 'Date', index: 'Date', width: 100, align: 'left' },
{ name: 'Amount', index: 'Amount', width: 100, align: 'right'}],
rowNum: 20,
rowList: [10, 20, 30],
imgpath: gridimgpath,
height: 'auto',
width: '700',
pager: jQuery('#pager'),
sortname: 'Id',
viewrecords: true,
sortorder: "desc",
caption: "Sales"
});
</script>
ASP.NET MVC の GridViewから詳細を取得できます。
これを確認してください ASP.NET MVC で WebGrid を最大限に活用する(MVC 4 と互換性があります)
これがお役に立てば幸いです。
ASP.net MVC Awesome - jQuery Ajax helpers
(デモ)
jqxGrid
Grid.MVC
( codeplex ) ソート、ページング、フィルタリング
MVCContrib.Grid
jqGrid
(デモ)
FuelUX repeater
IgniteUI Grid