asp.net-mvc ASP.NET MVC 4 数据网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14079003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET MVC 4 Datagrid
提问by Dale Fraser
Im new to ASP.NET MVC and want to do a simple page that retrieves some data using Entity and displays it in a paging datagrid.
我是 ASP.NET MVC 的新手，想要做一个简单的页面，使用 Entity 检索一些数据并将其显示在分页数据网格中。
Can anyone point me in the right direction or to a tutorial etc.
任何人都可以指出我正确的方向或教程等。
Its just a proof of concept for retrieving a list of stuff and displaying it.
它只是检索内容列表并显示它的概念证明。
回答by Sampath
For that you can use ASP.NET MVC jqGrid.
为此，您可以使用 ASP.NET MVC jqGrid。
Below I have mentioned sample codefor how to achieve that.
下面我已经提到了如何实现这一点的示例代码。
Sample Image
示例图像
Action Method
动作方法
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 Set up
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>
You can get more details from GridView in ASP.NET MVC Here
您可以在 ASP.NET MVC Here 中从GridView获取更多详细信息
OR
或者
Check This Get the Most out of WebGrid in ASP.NET MVC(compatible with MVC 4)
检查这个在 ASP.NET MVC 中充分利用 WebGrid（与 MVC 4 兼容）
I hope this will help to you.
我希望这会对你有所帮助。
