Embedded Files
Após a construção da API, podemos visualizar e interagir com a API através de documentos HTML exibidos na Web. Para isso, com a API criada, siga os passos:
Passo 1: Abra o arquivo Startup.cs e adicione os comandos abaixo no método: public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "AulaAPIFaculdadeAluno v1"));
}
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseHttpsRedirection();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
Passo 2: No projeto, crie uma pasta chamada wwwroot
Passo 3: Crie um arquivo chamado alunos.html. Crie também uma pasta chamada js e dentro dela um arquivo alunos.js.
Passo 4: No arquivo alunos.html, coloque o código abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Página dos alunos</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1> Alunos </h1>
<table style="width: 100%">
<tr>
<th>Id</th>
<th>Nome</th>
<th>Endereco</th>
<th>Cpf</th>
<th>Turma</th>
<th>Matricula</th>
<th>Faculdade</th>
</tr>
<tbody id="alunos"></tbody>
</table>
<script src="/js/alunos.js" asp-append-version="true"></script>
<script type="text/javascript"> getAlunos(); </script>
</body>
</html>
Passo 5: No arquivo alunos.js, coloque o código abaixo:
const uri = 'api/Alunos';
let alunos = [];
function getAlunos() {
fetch(uri)
.then(response => response.json())
.then(data => _displayAlunos(data))
.catch(error => console.error('Unable to get alunos.', error));
}
function _displayAlunos(data) {
console.log(data);
const tBody = document.getElementById('alunos');
tBody.innerHTML = '';
data.forEach(aluno => {
let tr = tBody.insertRow();
let textNode0 = document.createTextNode(aluno.alunoId);
tr.insertCell(0).appendChild(textNode0);
let textNode1 = document.createTextNode(aluno.nome);
tr.insertCell(1).appendChild(textNode1);
let textNode2 = document.createTextNode(aluno.endereco);
tr.insertCell(2).appendChild(textNode2);
let textNode3 = document.createTextNode(aluno.cpf);
tr.insertCell(3).appendChild(textNode3);
let textNode4 = document.createTextNode(aluno.turma);
tr.insertCell(4).appendChild(textNode4);
let textNode5 = document.createTextNode(aluno.matricula);
tr.insertCell(5).appendChild(textNode5);
let textNode6 = document.createTextNode(aluno.faculdade.nome);
tr.insertCell(6).appendChild(textNode6);
});
alunos = data;
}
Execute sua aplicação e teste-a acessando o link: https://localhost:44304/alunos.html
Fixação: Faça o procedimento acima, agora no contexto das Faculdades
Page updated
Google Sites
Report abuse