如何在Asp.Net Core MVC中创建简单的通用网格组件？

Question

我使用Asp.Net Core MVC创建了Web应用程序，我想用网格创建组件。

我在代码中的视图中反复使用了网格：

视图：

<div class="row table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th></th>
                <th>UserId</th>
                <th>UserName</th>
                <th>Email</th>
            </tr>
        </thead>

        <tbody>
            @foreach (var user in Model.Users)
            {
                <tr>
                    <th scope="row"><a class="btn btn-info" asp-action="User" asp-route-id="@user.Id">Edit</a></th>
                    <td>@user.Id</td>
                    <td>@user.UserName</td>
                    <td>@user.Email</td>
                </tr>
            }
        </tbody>
    </table>
</div>

如何使用带有动态数据结构的Generic List输入创建网格组件？

Answer 1

其实我有同样的问题。我正在努力，我即将这样做。有太多的步骤要做，最好做一篇博客文章，而不是这里的答案。

我建议您查看此内容，然后根据您的需要进行自定义：

http://www.c-sharpcorner.com/article/using-jquery-datatables-grid-with-asp-net-core-mvc/ 我建议将其与API和JS一起使用，而不是使用纯C＃和服务器端（我也做过，但是因为我们在2017/2018和移动世界中，最好不要这样做）。

在本教程之后只需要一些帮助。我在服务器端遇到了一些问题，我解决了这样的问题：

    // POST: api/Curso/LoadData
    [HttpPost]
    [Route("LoadData")]
    public IActionResult LoadData()
    {
        try
        {
            var draw = HttpContext.Request.Form["draw"].FirstOrDefault();

            // Skip 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;

            /**start of improved code

            // getting all Curso data  
            var cursoData = (IEnumerable<Curso>) _context.Curso.Include(c => c.CoordinadorAsignado).Include(e => e.Empresa).ToList();
            //Sorting  
            if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))
            {
                PropertyInfo propertyInfo = typeof(Curso).GetProperty(sortColumn);
                if (sortColumnDirection.Equals("asc"))
                {
                    cursoData = cursoData.OrderBy(x => propertyInfo.GetValue(x, null));
                }
                else
                {
                    cursoData = cursoData.OrderByDescending(x => propertyInfo.GetValue(x, null));
                }
            }
            //Search  
            if (!string.IsNullOrEmpty(searchValue))
            {
                cursoData = cursoData.Where(m => m.Nombre.ToLower().Contains(searchValue.ToLower()));
            }

            End of improved code**/

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

        }
        catch (Exception)
        {
            throw;
        }
    }

我还改进了搜索，但它仍然适用于一列。

请记住包括：

using Microsoft.EntityFrameworkCore;
using System.Reflection;

我希望这可以帮助其他人在将来工作。

警告排序不适用于FK列（例如，Curso.Name）。