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/

私はいない純粋なC＃とサーバー側で、APIとJSでの作業、それを一般化することをお勧めします（私も同じことをしましたが、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; 

を私はこれが将来的にそれに取り組んでいくつかのパーソナルプラグインの男に役立ちます願っています。

警告 ソートはFK列（たとえば、Curso.Name）では機能しません。