Melhorando o visual de projetos .NET MVC
O template visual .NET MVC nos proporciona muitas vantagens, trazendo uma interface pronta para uso, com vários elementos visuais e links preparados para navegabilidade de cada página.
Sua estrutura já vem pronta, mas muitas vezes ela precisa de uma melhoria, já que é bem sem graça !
Vemos por exemplo, que todas as páginas “Index” vem com elementos pré definidos, com um layout bem simples! Vamos dar uma melhorada nisso, com menos esforço possível, criando um elemento para personalizar o topo das páginas.
Veja um exemplo de uma Index criada para a entidade “Usuário”:
Ela não possui nenhum elemento identificador do seu Controller, informando que ela é uma página de listagem de usuários, e o nome “Index” já vem fixado no cabeçalho da nossa View.
Mesma coisa para o método Create, Edit, Delete e Details.
Então vamos começar personalizando o topo da página !
Iremos utilizar ícones, do tipo “Font Awesome”, para utilizá-los, devemos ir até a página _Layout.cshtml e colocar na sua <head> a inclusão da referência para a biblioteca dela que virá de seu CDN.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />Para isto, vamos utilizar uma View Parcial (nunca ouviu falar?), para isto, vá até a pasta “Shared” e com o assistente de adição, insira uma nova página:
Na próxima tela insira o nome da View, inserindo: HeaderPartial.cshtml
Pronto, a View estando criada, vamos personalizá-la, para que ela possa montar um cabeçalho padronizado em todas as nossas telas.
Para isto, primeiro vamos personalizar nossa View com estes códigos, já pensando nos elementos que serão exibidos, utilizando ViewBags (saiba mais sobre elas, resumidamente são dados levados para as Views fora do modelo).
Ok, mas de onde virão estes dados das Viewbags? Vamos lá, todas as controllers, são derivadas de uma classe base, que é a classe “Controller”
Então para que possamos disponbilizar uma função que esteja disponível em todas as controllers, vamos criar uma nova classe, a qual daremos o nome de “ControllerBase” que irá ter como classe pai a própria classe “Controller”.
Neste primeiro bloco, obtemos os nomes da Controller e Action para depois definir suas novas propriedades a serem inseridas nas ViewBags.
Agora continuando o código, vamos inserir esta condição também para a Action, onde iremos dar outros nomes para Index,Create,Edit, Delete e Details.
Pronto !! Agora está quase pronto, mas teremos que mudar todas as nossas controllers, onde ela era uma instância da classe pai “Controller”, agora faremos para “ControllerBase”.
Agora faça isto em todas as Controllers ! Depois teremos que alterar cada View, ajustando o conteúdo do topo para utilizar a View Parcial.
Vamos começar pela Index.cshtml
Devendo agora ficar assim:
Vejam que simplificou bastante o topo, tudo ficou à cargo da HeaderPartial !
Veja o novo layout ! então inserimos os elementos no topo, e eles estarão disponíveis agora para todas as telas.
Falta agora ajustarmos os botões, dentro de cada Index.cshtml, temos os itens padronizados inseridos automaticamente, e digamos, que não são nada bonitos, simples links com os textos “Edit”, “Details” e “Delete”.
Podemos fazer melhor? vamos então criar uma nova View Parcial, agora com o nome “IndexTableButtonsPartial.cshtml”
Nela vamos colocar os botões com ícones e receber um código identificador do tipo “Guid” que é o código das nossas chaves em todas as tabelas.
e agora feita a implementação na View Parcial, vamos deletar aquelas 3 linhas com os botões originais na View “Index”, e inserir a chamada da View parcial, mas desta vez, passaremos o parâmetro referente á chave de cada registro para inserir nos links, pois como é visível na imagem acima, no item “asp-route-id” inserimos @Model que é o item recebido no topo da View Parcial.
Pronto, agora sim, teremos nossos botões personalizados e utilizáveis em todas as telas Index.
Pronto, deu trabalho, mas agora pode criar várias Controllers e ir personalizando neste modelo.
Mas ainda temos um desafio, no caso da tela da ação “Delete” ! Temos que tirar alguns elementos do topo para personalizá-la.
Lembrando-se que esta frase já foi inserida lá na nossa View Parcial !
E assim, nossa tela “Delete” agora estará personalizada no seu topo com um visual dentro do nosso novo padrão do projeto, com o detalhe que a frase sobre a exclusão, é chaveada lá na nossa ControllerBase através das ViewBags para ser exibida quando executada a nossa View Parcial.
Muitos vão falar: “ah, é .NET MVC….” , mas se precisar criar um CRUD rápido, eficiente e que rode sem muitas particularidades, o MVC permite entregar rapidamente features que levariam horas para serem construídos utilizando outras tecnologias.
Gostou do artigo? clique no ícone👏e também me siga para ver as próximas publicações !!
Caso queira acompanhar este projeto, isto está sendo elaborado na classe do Curso de Desenvolvimento de Sistemas na Etec Itu, o repositório é este:
