Parte 17

Parte 17

Criando a tabela que lista categorias.

1. Altere o arquivo index.cshtml com o seguinte conteudo:

@page
@model Taste.Web.Pages.Settings.Category.IndexModel
@{
    ViewData["Title"] = "Index";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}
<div class="border backgroundWhite container">
    <div class="row">
        <div class="col-6">
            <h2 class="text-primary">Categorias</h2>
        </div>
        <div class="col-6 text-right">
            <a asp-page="Item" class="btn btn-primary">
                <i class="fas fa-plus"></i>
                Nova categoria
            </a>
        </div>
    </div>
    <br /><br />
    <table id="DT_Load" class="table table-striped table-bordered" style="width: 100%;">
        <thead>
            <tr>
                <th>Nome da categoria</th>
                <th>Ordem de exibição</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
    </table>
</div>
@section Scripts {
    <script src="~/js/Category.js"></script>
}

2. Dentro da pasta wwwroot existe uma pasta chamada js, crie o arquivo Category.js dentro desta pasta com o seguinte conteudo:

var dataTable;

$(document).ready(function () {
    loadList();
});

function loadList() {
    dataTable = $('#DT_Load').DataTable({
        "ajax": {
            "url": "/api/Category",
            "type": "GET",
            "datatype": "json"
        },
        "columns": [{
                "data": "name",
                "width": "40%"
            },
            {
                "data": "order",
                "width": "30%"
            },
            {
                "data": "id",
                "render": function (data) {
                    return `<div class="row">
                                <div class="col-6 text-center">
                                    <a href="/Settings/Category/Item?id=${data}" class="btn btn-primary text-white" style="cursor: pointer;">
                                    <i class="fas fa-pen"></i>&nbsp;Editar
                                    </a>
                                </div>
                                <div class="col-6 text-center">
                                    <a href="/Settings/Category/Item?id=${data}" class="btn btn-danger text-white" style="cursor: pointer;">
                                    <i class="fas fa-trash"></i>&nbsp;Excluir
                                    </a>
                                </div>
                            </div>`;
                },
                "width": "30%"
            }
        ],
        "language": {
            "emptyTable": "Nenhum registro encontrado!"
        }
    });
}

3. Execute o projeto e veja se esta tudo como esperado.

Execute seu projeto, veja [aqui] o procedimento para o Visual Studio Code.

Para executar o projeto no Visual Studio, basta pressionar F5.