GridView in .Net Core (with razor)[Answered] RSS

• • Reply
  GeorgeClass

  Member

  33 Points

  188 Posts

  GridView in .Net Core (with razor)

  May 12, 2020 03:33 AM|GeorgeClass|LINK

  Hi,

  I am totally new at Core and Razor pages, I have searched for samples to fill a html table (since Gridview is no longer available) but all I see is MVC and I need Razor.

  Can somebody help me with a basic example of code?, I have my own connection, so I don't use EF.

  Thanks in advance.

• • Reply
  Rena Ni

  Contributor

  2690 Points

  874 Posts

  Re: GridView in .Net Core (with razor)

  May 12, 2020 09:42 AM|Rena Ni|LINK

  Hi GeorgeClass,

  What about using DataTable in your Razor Pages?

  Here is a basic demo about how to use DataTable:

  1.Model:

  public class Test
  {
      public int Id { get; set; }
      public string Name { get; set; }
  }

  2.Index.cshtml:

  @page
  @model IndexModel
  
  @{
      ViewData["Title"] = "Index";
  }
  
  <h1>Index</h1>
  
  <table id="myTable" class="table">
      <thead>
          <tr>
              <th>
                  @Html.DisplayNameFor(model => model.Test[0].Id)
              </th>
              <th>
                  @Html.DisplayNameFor(model => model.Test[0].Name)
              </th>
              <th> </th>
          </tr>
      </thead>
      <tbody>
      </tbody>
  </table>
  @section Scripts {
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
      <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
      <script>
      $(document).ready(function () {
          $('#myTable').DataTable({
              "ajax": {
                  url: "/Tests",
                  type: 'Post',
                  headers: { 'RequestVerificationToken': $('@Html.AntiForgeryToken()').val() }
              },
              "pageLength": 5,
              "columns": [
                  { 'data': 'id' },
                  { 'data': 'name' },
                  {
                      'data': 'id',
                      "render": function (data, type, row, meta) {
                          return '<a href="/tests/edit?id=' + row.id + '">Edit</a> | <a href="/tests/details?id=' + row.id + '">Details</a> | <a href="/tests/delete?id=' + row.id + '">Delete</a>';
                      },
  
                  }
              ]       
          });
      });
      </script>
  }

  3.Index.cshtml.cs:

  public class IndexModel : PageModel
  {
      private readonly Razor3_1Context _context;
  
      public IndexModel(Razor3_1Context context)
      {
          _context = context;
      }
  
      public IList<Test> Test { get; set; }
  
      public async Task OnGetAsync()
      {
              
      }
      public async Task<JsonResult> OnPost()
      {
          //I used EF Core
          //you could get data from database by yourself
          Test = await _context.Test.ToListAsync();
        
          return new JsonResult(new { data = Test });
      }
  }

  Result:

  

  Here is a detailed demo on github you could refer to:

  https://github.com/dmamulashvili/DataTables-with-Razor-Pages

  You could download the demo and modify something in Pages/Customers/Index.cshtml:

  "columnDefs": [
                  {
                      "targets": -1,
                      "data": null,
                      "render": function (data, type, row, meta) {
                          return '<a href="/customers/edit?id=' + row.id + '">Edit</a> | <a href="/customers/details?id=' + row.id + '">Details</a> | <a href="/customers/delete?id=' + row.id + '">Delete</a>';
                      },
                      "sortable": false
                  },
                  { "name": "Id", "data": "id", "targets": 0, "visible": false },
                  { "name": "Name", "data": "name", "targets": 1 },
                  { "name": "PhoneNumber", "data": "phoneNumber", "targets": 2 },
                  { "name": "Address", "data": "address", "targets": 3 },
                  { "name": "PostalCode", "data": "postalCode", "targets": 4 }
  ],

  Best Regards,

  Rena

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  GeorgeClass

  Member

  33 Points

  188 Posts

  Re: GridView in .Net Core (with razor)

  May 12, 2020 03:31 PM|GeorgeClass|LINK

  Thanks Rena !!!

  Very clear sample, I'd buy you a beer if I could !!!