GridView in .Net Core (with razor)

Question

User-1063667917 posted

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.

Answer 1

User711641945 posted

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

Answer 2

User-1063667917 posted

Thanks Rena !!!

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