ASP.NET MVC 4 数据网格

Posted 2023-03-27

【中文标题】ASP.NET MVC 4 数据网格

【英文标题】：ASP.NET MVC 4 Datagrid

【发布时间】：2012-12-14 06:42:03

【问题描述】：

我是 ASP.NET MVC 的新手，想做一个简单的页面，使用 Entity 检索一些数据并将其显示在分页数据网格中。

谁能指出我正确的方向或教程等。

它只是检索和显示内容列表的概念证明。

【问题讨论】：

我已经做到了，找不到带有 MVC 4、剃刀视图等的简单数据网格示例，有很多旧示例，但我想要一些新的。但如果你的谷歌技能比我好，请随时分享。

【参考方案1】：

为此，您可以使用 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>

您可以从GridView in ASP.NET MVC Here获取更多详细信息

或

检查此Get the Most out of WebGrid in ASP.NET MVC（与 MVC 4 兼容）

希望对你有帮助。

【讨论】：

缩进怎么样？

@RobertHarvey 是的。实际上，格式化是 SOF 编辑器非常烦人的事情。所以，你能不能建议 SOF 给我们一个更好的编辑器？。无论如何我都这样做了。我觉得现在看起来不错。检查一下。

正在寻找 MVC 4 示例、剃须刀视图等。

@DaleFraser 是的，您也可以将其应用于 mvc 4 razor 视图。这不取决于 mvc 版本。您可以将其应用于任何版本。纯jQuery。这个 jqGrid 有很多功能。所以你可以很容易地根据你的情况自定义它。我也提到了一个链接以获取更多信息。源代码也在那里。试试看。如果你有任何问题，请告诉我。

@a.boussema 检查这个：***.com/questions/13506179/…

【参考方案2】：

ASP.net MVC Awesome - jQuery Ajax helpers (demo) jqxGrid Grid.MVC (codeplex) 排序、分页、过滤 MVCContrib.Grid jqGrid (demo) FuelUX repeater IgniteUI Grid