ASP.NET MVC 4的Datagrid [英] ASP.NET MVC 4 Datagrid

问题描述

进出口新的ASP.NET MVC和想要做一个简单的页面检索使用实体的一些数据，并显示在寻呼数据网格。

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.

任何人都可以点我在正确的方向或教程等。

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.

推荐答案

有关，你可以使用ASP.NET MVC的的jqGrid

For that you can use ASP.NET MVC jqGrid.

下面我所提到的样品code 如何实现这一点。

Below I have mentioned sample code for how to achieve that.

样品图像

动作方法

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在这里得到更多的细节

You can get more details from GridView in ASP.NET MVC Here

勾选此 获取ASP.NET MVC中最出的WebGrid的 （MVC与4兼容）

Check This Get the Most out of WebGrid in ASP.NET MVC (compatible with MVC 4)

我希望这会帮助你。

这篇关于ASP.NET MVC 4的Datagrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！