在ASP.NET中使用的WebGrid核心

Question

我使用System.Web.Helpers.WebGrid控制在ASP.NET的核心应用， 我得到下面的错误，而在线路

System.Web.Helpers.WebGrid objWebGrid = new System.Web.Helpers.WebGrid(Model.MeetingsObj); 

模型来呈现网格

An unhandled exception occurred while processing the request. 

ArgumentNullException: Value cannot be null. 
Parameter name: httpContext 

System.Web.HttpContextWrapper..ctor(HttpContext httpContext) 

：

public class Meeting 
    { 

     public int MeetingId { get; set; } 
     public string MeetingName { get; set; } 
     public string Format { get; set; } 
     public string Location { get; set; } 
    } 

    public class MeetingVM 
    { 
     public Meeting MeetingObj { get; set; } 
     public List<Meeting> MeetingsObj { get; set; } 
     public Boolean ShowGridHeader { get; set; } 
    } 

任何人都可以为上述错误提供解决方案吗？

Answer 1

您可以尝试使用其他组件，我建议MVC6电网 http://mvc6-grid.azurewebsites.net/

基本上它使用几乎相同的语法，所以会出现你当前的代码细微的变化，请检查下面的示例代码

@model IEnumerable<PersonModel> 

@(Html 
.Grid(Model) 
.Build(columns => 
{ 
    columns.Add(model => model.Name).Titled("Name"); 
    columns.Add(model => model.Surname).Titled("Surname"); 

    columns.Add(model => model.Age).Titled("Age"); 
    columns.Add(model => model.Birthday).Titled("Birth date"); 
    columns.Add(model => model.IsWorking).Titled("Employed"); 
}) 
.Filterable() 
.Sortable() 
.Pageable() 
) 

它也有很多其他的功能，让事情更容易.netcore

Answer 2

您可以使用客户端电网（jQuery的数据表网格ASP.NET MVC CORE），这是SIMP le，轻量级和开源。

脚本和CSS所需的数据表网格

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> 

    <link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" /> 
    <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" /> 

    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script> 

完整的代码片段ShowGrid观

@{ 
    Layout = null; 
} 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> 

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" /> 
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" /> 

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script> 

<div class="container"> 
    <br /> 
    <div style="width:90%; margin:0 auto;"> 
     <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0"> 
      <thead> 
       <tr> 
        <th>CustomerID</th> 
        <th>Name</th> 
        <th>Address</th> 
        <th>Country</th> 
        <th>City</th> 
        <th>Phoneno</th> 
        <th>Edit</th> 
        <th>Delete</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
</div> 

<script> 

     $(document).ready(function() 
     { 
      $("#example").DataTable({ 
       "processing": true, // for show progress bar 
       "serverSide": true, // for process server side 
       "filter": true, // this is for disable filter (search box) 
       "orderMulti": false, // for disable multiple column at once 
       "ajax": { 
        "url": "/DemoGrid/LoadData", 
        "type": "POST", 
        "datatype": "json" 
       }, 
       "columnDefs": 
       [{ 
        "targets": [0], 
        "visible": false, 
        "searchable": false 
       }], 
       "columns": [ 
        { "data": "CustomerID", "name": "CustomerID", "autoWidth": true }, 
        { "data": "Name", "name": "Name", "autoWidth": true }, 
        { "data": "Address", "name": "Address", "autoWidth": true }, 
        { "data": "Country", "name": "Country", "autoWidth": true }, 
        { "data": "City", "name": "City", "autoWidth": true }, 
        { "data": "Phoneno", "name": "Phoneno", "autoWidth": true }, 
        { 
         "render": function (data, type, full, meta) 
         { return '<a class="btn btn-info" href="/DemoGrid/Edit/' + full.CustomerID + '">Edit</a>'; } 
        }, 
        { 
         data: null, render: function (data, type, row) 
         { 
          return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.CustomerID + "'); >Delete</a>"; 
         } 
        }, 
       ] 

      }); 
     }); 


    function DeleteData(CustomerID) 
     { 
      if (confirm("Are you sure you want to delete ...?")) 
      { 
       Delete(CustomerID); 
      } 
      else 
      { 
       return false; 
      } 
     } 


     function Delete(CustomerID) 
    { 
     var url = '@Url.Content("~/")' + "DemoGrid/Delete"; 

      $.post(url, { ID: CustomerID }, function (data) 
       { 
        if (data) 
        { 
         oTable = $('#example').DataTable(); 
         oTable.draw(); 
        } 
        else 
        { 
         alert("Something Went Wrong!"); 
        } 
       }); 
    } 

</script> 

完整代码DemoGridController的片段

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Threading.Tasks; 
using Microsoft.AspNetCore.Mvc; 
using ExampleGrid.Models; 
using System.Linq.Dynamic; 
// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860 

namespace ExampleGrid.Controllers 
{ 
    public class DemoGridController : Controller 
    { 
     private DatabaseContext _context; 

     public DemoGridController(DatabaseContext context) 
     { 
      _context = context; 
     } 
     // GET: /<controller>/ 
     public IActionResult ShowGrid() 
     { 
      return View(); 
     } 

     public IActionResult LoadData() 
     { 
      try 
      { 
       var draw = HttpContext.Request.Form["draw"].FirstOrDefault(); 
       // Skiping number of Rows count 
       var start = Request.Form["start"].FirstOrDefault(); 
       // Paging Length 10,20 
       var length = Request.Form["length"].FirstOrDefault(); 
       // Sort Column Name 
       var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault(); 
       // Sort Column Direction (asc ,desc) 
       var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault(); 
       // Search Value from (Search box) 
       var searchValue = Request.Form["search[value]"].FirstOrDefault(); 

       //Paging Size (10,20,50,100) 
       int pageSize = length != null ? Convert.ToInt32(length) : 0; 
       int skip = start != null ? Convert.ToInt32(start) : 0; 
       int recordsTotal = 0; 

       // Getting all Customer data 
       var customerData = (from tempcustomer in _context.CustomerTB 
            select tempcustomer); 

       //Sorting 
       if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection))) 
       { 
        customerData = customerData.OrderBy(sortColumn + " " + sortColumnDirection); 
       } 
       //Search 
       if (!string.IsNullOrEmpty(searchValue)) 
       { 
        customerData = customerData.Where(m => m.Name == searchValue); 
       } 

       //total number of rows count 
       recordsTotal = customerData.Count(); 
       //Paging 
       var data = customerData.Skip(skip).Take(pageSize).ToList(); 
       //Returning Json Data 
       return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }); 

      } 
      catch (Exception) 
      { 
       throw; 
      } 

     } 
    } 
} 

Link for Detail Article

Answer 3

我口打开使用ASP.NET的核心和包源的WebGrid现在是的NuGet AndreyKurdiumov.AspNetCore.Helpers - 版本0.2.0

这个包试图成为在 - 替换WebGrid的使用。 但我还没有设法使这种情况发生100％。

变化应在_ViewImports.cshtml

@using AndreyKurdiumov.AspNetCore.Helpers 
@inject Microsoft.AspNetCore.Http.IHttpContextAccessor HttpContextAccessor 

哪里的WebGrid构造完成

1. 添加以下行应添加构造器参数HttpContextAccessor

   var grid = new WebGrid(HttpContextAccessor, source: this.Model.Tables, 
        defaultSort: "TableName", 
        rowsPerPage: 30); 
   

这对于我设法实现的现有代码库的迁移来说尽可能简单。

的源代码 https://github.com/kant2002/AspNetCore.Helpers