Как создать простой общий грид-компонент в Asp.Net Core MVC?

Question

Я создал веб-приложение с использованием Asp.Net Core MVC, и я хочу создать компонент с сеткой.

Я неоднократно использовал для сетки в представлении следующий код:

Вид:

<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; 
     } 
    } 

Я также улучшил поиск, но он по-прежнему работает только для одного столбца.

Rember включать:

using Microsoft.EntityFrameworkCore; 
using System.Reflection; 

Я надеюсь, что это помогает некоторым OTHE ребята, работающие на нем в будущем.

ВНИМАНИЕ Сортировка не работает с колонками FK (например, Curso.Name).