Buscar

Conteúdo_ASP_NET_02

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 3, do total de 150 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 6, do total de 150 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 9, do total de 150 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Prévia do material em texto

Roni Francisco Pichetti
Keila Barbosa Costa
DESENVOLVIMENTO DE SISTEMAS
WEB COM ASP.NET
Jeanfrank T. D. Sartori
© Universidade Positivo 2019
Rua Prof. Pedro Viriato Parigot de Souza, 5300 – Campo Comprido 
Curitiba-PR – CEP 81280-330
*Todos os gráficos, tabelas e esquemas são creditados à autoria, salvo quando indicada a referência.
Informamos que é de inteira responsabilidade da autoria a emissão de conceitos. 
Nenhuma parte desta publicação poderá ser reproduzida por qualquer meio ou forma sem autorização.
A violação dos direitos autorais é crime estabelecido pela Lei n.º 9.610/98 e punido pelo artigo 184 do Código Penal.
Imagens de ícones/capa: © Thinkstock / © Shutterstock.
Presidente da Divisão de Ensino 
Reitor
Pró-Reitor 
Coordenação Geral de EAD
Coordenação de Metodologia e Tecnologia
Autoria
Parecer Técnico
Supervisão Editorial
Projeto Gráfi co e Capa
Prof. Paulo Arns da Cunha
Prof. José Pio Martins
Prof. Carlos Longo
Prof. Everton Renaud
Profa. Roberta Galon Silva
Prof. Roni Francisco Pichetti
Profa. Keila Barbosa Costa
Prof. Jeanfrank T. D. Sartori
Prof. Alex Pinheiro das Graças
Aline Scaliante Coelho Baggetti
Regiane Rosa
Dados Internacionais de Catalogação na Publicação (CIP)
Biblioteca da Universidade Positivo – Curitiba – PR
DTCOM – DIRECT TO COMPANY S/A
Análise de Qualidade, Edição de Texto, Design Instrucional, 
Edição de Arte, Diagramação, Design Gráfico e Revisão.
- -1
DESENVOLVIMENTO DE SISTEMAS WEB 
COM ASP.NET
CAPÍTULO 1 - CONCEITOS E COMPONENTES 
DA PLATAFORMA WEB
Roni Francisco Pichetti / Keila Barbosa Costa / Jeanfrank T. D. Sartori
- -2
Compreenda seu livro: Metodologia
Caro aluno,
A metodologia da Universidade Positivo apresenta materiais e tecnologias apropriadas que permitem o
desenvolvimento e a interação entre alunos, docentes e recursos didáticos e tem por objetivo a comunicação
bidirecional entre os atores educacionais.
O seu livro, que faz parte dessa metodologia, está inserido em um percurso de aprendizagem que busca direcionar
a construção de seu conhecimento por meio da leitura, da contextualização teórica-prática e das atividades
individuais e colaborativas; e fundamentado nos seguintes propósitos:
• valorizar suas experiências;
• incentivar a construção e a reconstrução do conhecimento;
• estimular a pesquisa;
• oportunizar a reflexão teórica e aplicação consciente dos temas abordados.
Compreenda seu livro: Percurso
Com base nessa metodologia, o livro apresenta os itens descritos abaixo. Navegue no recurso para conhecê-los.
1. Objetivos do capítulo
Indicam o que se espera que você aprenda ao final do estudo do capítulo, baseados nas necessidades de
aprendizagem do seu curso.
2. Tópicos que serão estudados
Descrição dos conteúdos que serão estudados no capítulo.
3. Contextualizando o cenário
Contextualização do tema que será estudado no capítulo, como um cenário que o oriente a respeito do assunto,
relacionando teoria e prática.
4. Pergunta norteadora
Ao final do Contextualizando o cenário, consta uma pergunta que estimulará sua reflexão sobre o cenário
apresentado, com foco no desenvolvimento da sua capacidade de análise crítica.
5. Pausa para refletir
São perguntas que o instigam a refletir sobre algum ponto estudado no capítulo.
6. Boxes
São caixas em destaque que podem apresentar uma citação, indicações de leitura, de filme, apresentação de um
contexto, dicas, curiosidades etc.
7. Proposta de atividade
Sugestão de atividade para que você desenvolva sua autonomia e sistematize o que aprendeu no capítulo.
8. Recapitulando
É o fechamento do capítulo. Visa sintetizar o que foi abordado, retomando os objetivos do capítulo, a pergunta
norteadora e fornecendo um direcionamento sobre os questionamentos feitos no decorrer do conteúdo.
9. Referências bibliográficas
São todas as fontes utilizadas no capítulo, incluindo as fontes mencionadas nos boxes, adequadas ao Projeto
Pedagógico do curso.
Boxes
Navegue no recurso abaixo para conhecer os boxes de conteúdo utilizados.
•
•
•
•
- -3
 
Afirmação
Citações e afirmativas pronunciadas por teóricos de relevância na área de estudo.
 
Assista
Indicação de filmes, vídeos ou similares que trazem informações complementares ou aprofundadas sobre o
conteúdo estudado.
 
Biografia
Dados essenciais e pertinentes sobre a vida de uma determinada pessoa relevante para o estudo do conteúdo
abordado.
 
Contexto
Dados que retratam onde e quando aconteceu determinado fato; demonstram a situação histórica, social e
cultural do assunto.
 
Curiosidade
Informação que revela algo desconhecido e interessante sobre o assunto tratado.
 
Dica
Um detalhe específico da informação, um breve conselho, um alerta, uma informação privilegiada sobre o
conteúdo trabalhado.
 
Esclarecimento
Explicação, elucidação sobre uma palavra ou expressão específica da área de conhecimento trabalhada.
 
Exemplo
Informação que retrata de forma objetiva determinado assunto abordando a relação teoria-prática.
Apresentação da disciplina
A internet permite que pessoas de diferentes locais no mundo se comuniquem utilizando dispositivos com acesso à
rede. Exemplo disso são os sistemas de mensagens e correio eletrônico via (Rede de AlcanceWorld Wide Web
Mundial). Os primeiros sites da Web eram muito simples e abordavam os mais diferentes assuntos. Porém, a
relação com seus usuários era apenas de recepção de informações, pois não permitiam interação e inclusão de
informações.
Após o uso das páginas estáticas, sem interação, aos poucos foram sendo incluídas imagens, tabelas e formulários.
Entretanto, ainda não era disponível um conteúdo dinâmico. Para que a interação e a funcionalidade da web
fossem aumentadas, teve início o uso de processamento em servidores. Assim, tornou-se possível relacionar-se
com banco de dados e processar conteúdos da Web. A fim de atender a essas necessidades, novas tecnologias
foram elaboradas para a escrita do código dos sites.
Neste contexto, esta disciplina abordará aspectos e definições sobre o ASP.NET, uma tecnologia de servidor que
compreende diversas partes da web. Seu uso possibilita aos desenvolvedores de sistemas relacionar suas
aplicações aos usuários (ou clientes) de forma efetiva e dinâmica. Para isso, serão discutidas as relações entre
- -4
cliente e servidor, configurações e versões do ASP.NET, criação de modelos e formulários Web, o uso de 
 gerenciamento de projetos, desenvolvimento de aplicações Web e repositórios on-line.frameworks,
A autoria
Roni Francisco Pichetti
O Professor Roni Francisco Pichetti é Mestre em Desenvolvimento Regional pela FURB (2018), especialista em
Administração de Pessoas pela UNIASSELVI (2012) e graduado em Sistemas de Informação pela UnC (2007). Possui
experiência como analista de sistemas e como professor em cursos técnicos.
Currículo Lattes: < >http://lattes.cnpq.br/0174163331554551
Dedico essa obra aos meus familiares por me incentivarem na busca contínua pelo conhecimento.
Keila Barbosa Costa
A professora Keila Barbosa Costa é mestre em Modelagem Computacional do Conhecimento pela Universidade
Federal de Alagoas – UFAL (2019). Tem MBA em Gestão de Projetos pela Universidade Pitágoras/Unopar (2019). É
graduada em Análise e Desenvolvimento de Sistemas em Saúde pela Universidade Estadual de Ciências da Saúde
de Alagoas – UNCISAL (2013) e em Análise e Desenvolvimento de Sistemas pela Universidade Norte do Paraná –
UNOPAR (2011).
Currículo Lattes:< >http://lattes.cnpq.br/4794576859225227
http://lattes.cnpq.br/0174163331554551
http://lattes.cnpq.br/4794576859225227
- -5
Dedico a Deus que, com sua infinita sabedoria, foi um verdadeiro guia nessa minha jornada.
Jeanfrank T. D. Sartori
O Professor Jeanfrank T. D. Sartori possui mais de 15 anos na área de tecnologia da informação e análise de dados,
tendo atuado no setor educacional, gráfico e bancário. Graduado em Administração pela Universidade Federal do
Paraná em 2017.
Currículo Lattes: < >http://lattes.cnpq.br/2047592684381858
http://lattes.cnpq.br/2047592684381858
- -6A Deus, a quem tudo pertence. Aos meus pais, que me deram amor e me prepararam para vida. Aos meus professores,
que me ensinaram o caminho acadêmico. Aos verdadeiros amigos e a todos que vão além do seu dever.
Objetivos do capítulo
Ao final deste capítulo, você será capaz de:
• Reconhecer arquitetura cliente-servidor assim como as tecnologias utilizadas em ASP .NET Core e sua 
aplicabilidade.
Tópicos de estudo
• Arquitetura cliente-servidor
• O Servidor Web
• O Protocolo e as Requisições HTTP
• Métodos do Protocolo HTTP
• Tecnologias utilizadas nas páginas Web
• HTML
• CSS
• JavaScript
• JQuery
• Configuração e deploy de aplicativos ASP.NET Core
• Criando uma aplicação ASP.NET Core
• Criando uma aplicação Web
• Criando um Web site
• Web project
• Componentes da plataforma Web
• Implementando o Bundle
• Utilizando o Bundle
• Bootstrap
• Friendly URLs
Contextualizando o cenário
Estamos na era da informação e a cada dia recebemos mais dados sobre variados e diferentes assuntos. A internet
é uma ferramenta responsável pela disseminação de conteúdo a usuários ao redor do mundo.
Neste sentido, as aplicações Web têm exercido um papel muito importante na maneira em que vivemos em
sociedade. Seja ao facilitar transações que anteriormente dependiam de papel ou permitir a criação e
preenchimento de formulários eletrônicos cujos dados são armazenados remotamente em servidores distantes.
Assim, fica evidente a necessidade do profissional que trabalha com tecnologia da informação saber tratar de
forma rápida, confiável e efetiva os dados que transitam pela rede mundial de computadores. Para isso, é
necessário conhecimento sobre tecnologias e ferramentas que vêm sendo utilizadas na área.
Diante deste cenário, surge uma questão importante:
Qual é a relação das pessoas, sejam desenvolvedores ou usuários, com as aplicações Web?
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
- -7
1.1 Arquitetura cliente-servidor
O modelo cliente-servidor é o mesmo empregado na internet, onde as informações são enviadas de um lado para o
outro a fim de realizar uma tarefa. Geralmente o computador cliente ( ) que quer as informações se comunicaclient
com o computador servidor de arquivos ( ), que armazena os dados por meio de troca de solicitações.file server
Fonte: © Image Studio / / Shutterstock.
A arquitetura cliente-servidor é basicamente uma forma de dividir uma aplicação em duas partes. Uma delas,
chamada de cliente, é a interface do usuário e demais funcionalidades do sistema que são executadas no desktop.
Já a segunda parte trata-se do banco de dados, que fica salvo no servidor de arquivos, um computador com grande
capacidade de espaço e processamento. Assim, os dados ficam mais seguros e alocados no mesmo local para
facilitar sua atualização (FONSECA FILHO, 2007).
Desta forma, as informações entre cliente e servidor são compartilhadas de maneira fácil com a utilização de redes
de computadores. Os servidores são um repositório tanto de dados quanto de programas. Em razão da
comunicação de computadores via rede, esta relação é chamada de arquitetura cliente-servidor (DEITEL; DEITEL,
2003). Em seguida, serão apresentadas informações mais detalhadas sobre o servidor Web.
1.1.1 O Servidor Web
Diferente do servidor de arquivos que se comunica com o dispositivo cliente via rede interna da empresa ou
organização, o servidor Web faz a troca de dados pela internet. Para isso, existe uma comunicação entre navegador
e aplicativos da Web por meio do (HTTP), ou seja, um protocolo de transferência deHypertext Transfer Protocol 
hipertexto. Clique a a seguir para conhecer mais sobre este servidor.
Aplicativos
Os aplicativos para Web são hospedados por um servidor Web que lê solicitações HTTP e
determina qual deles deve ser usado para responder a cada solicitação.
HTML
Quando o pedido é processado, o servidor Web envia uma resposta ao cliente, novamente
usando HTTP. O conteúdo de uma resposta deste tipo é geralmente apresentado como uma
página em (HTML) que, em tradução literal, é uma linguagem deHypertext Markup Language
marcação de hipertexto (SHARP, 2008).
- -8
O próximo tópico aprofunda o protocolo e das requisições HTTP.
1.1.2 O Protocolo e as Requisições HTTP
HTTP é um protocolo sem conexão (do inglês ), também chamado de sem estado. Isso significa queconnectionless
cada requisição, ou uma resposta, consiste em um pacote de dados independente. Uma troca típica entre um
cliente e um aplicativo da Web pode envolver várias requisições. Cada solicitação enviada pelo cliente para o
aplicativo Web é separada de qualquer outra enviada por este e por quaisquer outros clientes usando o mesmo
sistema simultaneamente.
Uma requisição do cliente geralmente requer algum tipo de contexto ou estado. Por exemplo, o usuário pode
procurar produtos à venda usando um aplicativo Web. Ele pode querer comprar vários itens e colocar cada um
deles em um carrinho de compras virtual. Onde o conteúdo do carrinho de compras (o estado do cliente) deve ser
mantido?
Se essas informações forem mantidas no servidor Web, este deverá ser capaz de juntar as diferentes solicitações
HTTP e determinar quais delas vêm de um cliente e quais partiram de outro. Isso é viável, mas pode exigir
processamento adicional para reconciliar solicitações com informações de estado, assim como exigiria algum tipo
de banco de dados para persistir os mesmos dados entre requisições do cliente.
PAUSA PARA REFLETIR
Qual a importância do HTTP para o uso da internet e da comunicação entre servidores Web?
- -9
Fonte: © Image Studio / / Shutterstock.
Uma complicação desta técnica é que o servidor da Web não tem garantia de que, após a preservação das
informações de estado, o cliente enviará outro pedido que as use novamente ou remova. Uma estratégia
alternativa é armazenar estes dados na máquina do cliente. O Protocolo de foi desenvolvido para que osCookies
servidores da Web possam guardar em cache as informações no computador cliente.
Neste caso, o aplicativo deve garantir que os cookies sejam de tamanho limitado. A desvantagem mais relevante
do uso destes arquivos é o fato de que os usuários podem desativá-los e impedir que o navegador os armazene em
computadores de usuários, fazendo com que o aplicativo Web perca todas as informações do estado (SHARP,
2008). Vamos estudar a seguir quais são os métodos de protocolo HTTP.
1.1.3 Métodos do Protocolo HTTP
Vimos que a comunicação entre cliente e servidor via Web é intermediada pelo protocolo HTTP, pelo qual o cliente
envia requisições ao servidor e este as responde no formato solicitado. Para que o navegador possa encaminhar e
receber essas requisições ou ações específicas, foram definidos diferentes métodos HTTP, também chamados de
verbos. Os métodos mais comuns para execução de operações são descritos como CRUD ( e Create, Read, Update
), que correspondem às ações de criar, ler, atualizar e excluir.Delete
Na tabela a seguir apresentaremos os métodos que compõem o CRUD e como eles podem ser implementados
usando o protocolo HTTP:
- -10
Métodos que compõem o CRUD.
Fonte: Adaptado de KANJILAL, 2013.
Navegue no recurso abaixo e entenda melhora cada método.
•
POST
De forma complementar, entende-se que o método POST é usado para criar recursos, e também
para enviar dados que devem ser processados pelo recurso.
•
PUT
Enquanto o PUT tem a função prioritária de atualizar os recursos já criados, apesar de poder criá-los
caso solicite um recurso ainda não existente.
•
GET
O GET é usado para solicitar uma representação de um recurso específico.
•
HEAD
O HEAD é semelhante ao GET, porém recupera somente os cabeçalhos e não o corpo do recurso
(KANJILAL, 2013).
•
DELETE
O DELETE basicamente exclui um recurso específico.
•
OPTIONS
Podemos citar também o OPTIONS, empregado na recuperação de métodos suportados pelo
recurso.
•
PATCH
Complementarmente temos o PATCH, que atualiza apenas partes de um recurso.
•
•
•
•
•
•
•
•
•
- -11
TRACE
O TRACE retorna a mesma requisição que for enviada, verificandose houve alterações ou adições
realizadas por servidores intermediários.
No tópico seguinte abordaremos algumas das tecnologias usadas nas páginas Web.
1.2 Tecnologias utilizadas nas páginas Web
As páginas Web ( ) são fontes de informação adequadas à e que podem ser acessadas porwebpage World Wide Web
um navegador. Portanto, consistem em documentos criados para atender aos requisitos da internet e capazes de
ser visualizadas por meio de uma aplicação específica para este fim. As páginas Web estão localizadas, ou
hospedadas, em um computador local remoto, ou seja, em servidores Web.
Existem servidores Web que geram dinamicamente arquivos (x)HTML, conforme a requisição do navegador. Da
mesma forma, esse comportamento dinâmico pode ser obtido pelo lado do cliente, utilizando-se de
implementações de JavaScript, por exemplo. Nos tópicos a seguir detalharemos a funcionalidade e o uso de
tecnologias das páginas Web.
1.2.1 HTML
O (HTML), linguagem de marcação de hipertexto, é utilizado pelas páginas Web paraHypertext Markup Language 
realizar a formatação dos dados. Assim, não se trata de uma linguagem de programação. Por este motivo, se
diferencia do JavaScript, por exemplo, visto que o HTML muda apenas a forma como os dados são apresentados
em tela.
Fonte: © Image Studio / / Shutterstock.
Um documento HTML é dividido entre cabeçalho e corpo, e utiliza-se de TAGs para executar suas funções. O início
dele é representado por <HTML> e o final por </HTML>, diferenciando o texto de um documento comum. O
- -12
cabeçalho deve conter informações sobre a página que não aparecerão no navegador. O cabeçalho do documento
inicia com <head> e entre as TAGs <title> e <title/> é inserido o nome do documento. E entre as TAGs <body> e <
/body> é construído o corpo da página HTML (SOUZA, 2014).
Portanto uma estrutura básica de uma página HTML seria desta forma:
Estrutura básica de uma página HTML.
É possível testar o texto do HTML do exemplo criando um arquivo no bloco de notas e o salvando com a extensão ‘.
html’. Depois disso, ao ser aberto em um navegador, apresentará as informações que forem incluídas no corpo do
documento, como o título, o texto, as imagens e os links que ligam um hipertexto a outro. Diversas outras TAGs são
utilizadas, entre as básicas ainda não citadas estão <div> para alinhamento do texto, <p> para definir parágrafo,
<br> para inserir uma quebra de linha única entre outras (SOUZA, 2014).
Observe que toda a TAG aberta com ‘<>’ precisa ser fechada por ‘</>’, para que a página seja visualizada da forma
correta. O nome que for definido no texto do HTML é o mesmo que aparecerá na barra de títulos do navegador,
assim como será utilizado nos buscadores de pesquisa, como o Google e o Bing, por exemplo.
A aparência de uma página Web pode ser melhorada utilizando o (CSS), que tem comoCascading Style Sheet 
significado literal “folhas de estilos em cascata”. O CSS pode ser escrito em um arquivo em separado ou no próprio
código do HTML. Portanto, o CSS auxilia a estilizar elementos escritos em HTML. Em seguida abordaremos mais
informações sobre este recurso.
1.2.2 CSS
O CSS surge com o intuito de tornar as aplicações Web mais leves, limpas e dinâmicas. Trata-se de uma linguagem
de estilo ou de formatação para a construção de páginas ou sites. Como visto anteriormente, com o CSS é possível
definir a apresentação de documentos escritos em HTML e também em XML. Uma de suas características é que
separa o formato e o conteúdo do documento. Ou seja, diferente do HTML que utiliza TAGs de marcação dentro do
texto original, no CSS pode-se criar um link ou importar um arquivo de estilos na página. Estes são chamados à
aplicação da formatação da página (JOBSTRAIBIZER, 2009).
Desta forma, quando for necessário atualizá-la, somente o arquivo da formatação, o CSS, é alterado. Assim, se
ganha tempo e agilidade no desenvolvimento voltado à Web, pois em uma folha de estilos é possível coordenar a
formatação de sistemas com 10 ou 1000 páginas. Clique nas abas abaixo e conheça as principais vantagens do uso
do CSS de acordo com Jobstraibizer (2009, p. 06):
• 
Total controle do layout de vários documentos a partir de uma única folha de estilos.
• 
•
•
- -13
Maior precisão no controle do layout como um todo.
• 
Emprego de técnicas de desenvolvimento variadas, sofisticadas e avançadas.
Para se fazer um bom uso do CSS, é necessário conhecer bem o HTML. Este último é utilizado para estruturar o
conteúdo do site ou página, enquanto o CSS é empregado para formatar o que já está organizado. Como exemplo
da praticidade do uso do CSS, podemos citar a troca de fonte dos títulos de um site com mais de 50 páginas. Com o
uso somente do HTML, seria necessário editar a TAG <font> dentro do documento para cada um dos casos.
Enquanto que com o CSS a mudança será feita em apenas um local para aplicação em todo o documento.
Fonte: © Image Studio / / Shutterstock.
A escrita do CSS também pode ser testada no bloco de notas, porém, é recomendável utilizar um editor de textos
que faça diferenciação dos códigos, pois facilitará a criação das folhas de estilo. Como exemplo destes editores,
podemos citar o ATOM ou o Visual Studio, entre outros. A vantagem do uso destes sistemas específicos para HTML
é que por meio deles realiza-se e endentação e a troca de cores para cada função do código de forma fácil
(JOBSTRAIBIZER, 2009).
Veja um exemplo de criação de folha de estilos básica no bloco de notas. Ao abrir o arquivo devem ser incluídas as
informações sobre o tipo e o tamanho da fonte para o corpo do site com a TAG <body>. Para isso, é necessário ter
conhecimento respeito das TAGs e seus atributos. O código ficaria desta forma:
Código para criação de folha de estilos básica no bloco de notas.
Fonte: Adaptado de Jobstraibizer (2009).
•
- -14
As propriedades dos elementos utilizados são inúmeras. No exemplo, foram usadas as propriedades e font-family
Por meio da é informada a família de fontes empregue em determinado elemento de texto.font-size. font-family 
Enquanto que com a font-size, especifica-se o tamanho das fontes.
1.2.3 JavaScript
O JavaScript é uma linguagem de programação interpretada e baseada em protótipo, com suporte parascript 
digitação dinâmica, que permite que os scripts do cliente interajam com os controles em um navegador. Grande
parte dos sites usa JavaScript, bem como todos os navegadores possuem interpretadores para poderem interagir
com esta linguagem. Em resumo, Flanagan (2013) entende que um desenvolvedor Web necessita conhecer o HTML
para conseguir especificar o conteúdo de suas páginas; o CSS para definir a apresentação delas; e o JavaScript para
especificar o seu comportamento.
JavaScript possibilita fazer scripts do conteúdo HTML e da apresentação CSS de documentos em
navegadores Web, mas também nos permite definir o comportamento desses documentos em rotinas
de tratamento de evento. Uma rotina de tratamento de evento é uma função JavaScript que
registramos no navegador e que este chama quando ocorre algum tipo de evento especificado. O
evento de interesse pode ser um clique de mouse ou um pressionamento de tecla (ou, em ,smartphone
pode ser um gesto de algum tipo, feito com dois dedos). (FLANAGAN, 2013, p. 10).
As API utilizadas para fazer do conteúdo (HTML), da apresentação (CSS) e do tratamento de eventos de sitesscripts
e páginas Web costumam ser complexas e eventualmente apresentam incompatibilidade com navegadores. Por
conta disso, se emprega uma biblioteca de funções ou estrutura do lado do cliente para tornar mais simples a
realização de tarefas básicas de programação. Uma dessas bibliotecas é a jQuery, que será apresentada no tópico
seguinte.
1.2.4 JQuery
A biblioteca jQuery não é outra linguagem de programação, mas exerce sua função em conjunto ao JavaScript. Foi
criada com a intenção de facilitar a vida do desenvolvedor Web. Isso porque compacta diferentes linhas de código
em uma única função, diminuindo a necessidade de escrita de códigos iguais para execução da mesmaatividade.
Desta forma, se pode dizer que o jQuery é rápido e rico em recursos. Ele simplifica com uma API com interface
intuitiva, que é compatível com vários navegadores, funções como passagem e manipulação de documentos
HTML, manipulação de eventos e animação. Por esta razão, o jQuery mudou a maneira como os desenvolvedores
escrevem JavaScript.
PAUSA PARA REFLETIR
Qual a importância do CSS para o uso de sites Web?
- -15
De posse do código, ele pode ser incluído nas páginas Web sendo desenvolvidas com um elemento A jQueryscript. 
define uma função global chamada ‘ ( )’. Esta função é utilizada com grande frequência e por esse motivo ajQuery
biblioteca define o símbolo global ‘$’ como seu atalho. De acordo com Flanagan (2013), a função ‘ ( )’ é a maisjQuery
importante desta biblioteca. O tópico a seguir abordará a configuração e dos aplicativos tratados nestedeploy
capítulo.
1.3 Configuração e deploy de aplicativos ASP.NET Core
O ASP.NET Core é baseado no ASP.NET, que pode ser considerado um antigo parente do primeiro. Mesmo sendo
muito conhecido, o ASP.NET tradicional precisou mudar para atender às atualizações do mundo corporativo.
Afinal, um desenvolvedor não trabalha apenas com o Windows ou com o Linux, mas muitas vezes com ambos,
conforme a exigência e necessidade do mercado.
O ASP.NET Core foi construído do zero. Não é apenas uma melhoria do ASP.NET, é algo novo. Os framework 
formulários da Web agora desaparecem, seguindo as tendências de evolução tecnológica. O ASP.NET Core possui
código aberto, o que beneficiou a comunidade de desenvolvedores, que elaborando contribuições no código que
acabam auxiliando os demais (PERES, 2017).
1.3.1 Criando uma aplicação ASP.NET Core
Para criar uma aplicação no ASP.NET Core é necessário possuir uma versão recente do Visual Studio instalada.
Neste momento, verificaremos de forma breve como proceder a instalação do Visual Studio Community 2019, que
é gratuito. Primeiramente deve-se acessar a página do Visual Studio, disponível no site da Microsoft, e selecionar a
opção download gratuito. Depois clique nos módulos de instalação ASP.NET e desenvolvimento Web,
desenvolvimento para desktop .NET e desenvolvimento multiplataforma com .NET Core.
DICA
A biblioteca jQuery é um livre, por isso está disponível para ser baixada gratuitamente software
no site oficial.
- -16
Fonte: © Image Studio / / Shutterstock.
Após a conclusão da instalação dos módulos, escolha a opção em seguida e depois . Na telaArquivo, Novo Projeto
do Visual Studio Community 2019 será apresentada uma tela com três colunas, deve ser selecionada na primeira
delas a opção e na segunda coluna (.NET Core). O próximo passo é criar.NET Core ASP.NET Core Web Application
nome e local para o projeto e salvar. Ao criar um projeto no Visual Studio Community 2019, a primeira coisa que se
vê é o explorador de modelos com a exibição em árvore para escolher entre os instalados.
Na próxima tela que será apresentada, sobre modelos de projetos, selecione a opção Depois de terAplicação Web.
escolhido a fonte, os diferentes modelos serão mostrados. Como alguns deles integram vários tipos de aplicativos,
às vezes, é necessário fazer escolhas adicionais para especificar o tipo exato de aplicativo que se deseja criar.
Seguindo nosso exemplo, na coluna gerenciador de opções, deve ser escolhida a opção e, em sequência, Pages
 Assim, será apresentado o editor para iniciar a criação do código na linguagem C#. No próximoAbout.cshtml.cs.
tópico, traremos um exemplo de criação de uma aplicação Web.
1.3.2 Criando uma aplicação Web
Uma aplicação Web executa seu trabalho da mesma forma que um sistema que não seja voltado para internet.
Neste sentido, entendemos que mais do que um site, este recurso permite cadastro de informações em banco de
dados e interação com estes dados de diferentes formas, como relatórios ou automatização de processos, por
exemplo. Assim, o intuito de uma aplicação Web é solucionar um problema por meio da programação.
Nesse tópico traremos um exemplo de criação de um simples aplicativo Web na plataforma Windows. Para isso,
será necessário utilizar a instalação abordada no tópico anterior. Clique a seguir e acompanhe os passos
necessários.
Iniciando num novo projeto
DICA
Para mais informações sobre criação de aplicativo no ASP.NET Core, acesse a página Início
no site da Microsoft para criar seu primeiro aplicativo Web ASP.NETRápido: Usar o Visual Studio 
Core.
- -17
Com um novo projeto aberto, no gerenciador de soluções, expanda a pasta Páginas ( ) e escolha .Pages About.cshtml
O arquivo selecionado se refere à uma página de nome Sobre, com informações sobre o aplicativo Web, que será
executado no navegador Web. No editor da página estará disponível o código HTML.
Dando seguimento ao exemplo
Para dar seguimento, na área para informações adicionais do HTML da página deve ser incluído o texto “Olá, Sobre
Mundo!”. De volta ao gerenciador de soluções, expanda a opção e escolha . Nesta tela,About.cshtml About.cshtml.cs
já em código C#, deve ser alterada a descrição do aplicativo para “Qual é minha mensagem?”. Um aplicativo com
mais funções incluiria mais informações nessa tela.
Iniciando a execução do aplicativo
Dando sequência, deve-se voltar para a tela do novo projeto e selecione ou então clique em IIS Express CTRL+F5
para iniciar a execução do aplicativo, que será aberto no navegador. Caso seja apresentada alguma mensagem de
erro, reveja os passos e, se tudo estiver correto, feche o Visual Studio e abra novamente com a opção Executar
Agora, na página do navegador que abriu, verifique se a página ficou com o texto que foicomo administrador. Sobre
incluído anteriormente. Teremos o aplicativo Web dizendo “Olá, Mundo!” (MICROSOFT, 2019).
Agora que compreendemos a aplicação, em seguida informações sobre a criação de um Web site.
1.3.3 Criando um Web site
Uma Web site se diferencia de uma aplicação Web no sentido de que tem o caráter mais informativo e não de
processamento de informações. Portanto, um site pode ser tratado como um conjunto de páginas Web que traz
informações diversas sobre determinado assunto, seja notícias, curiosidades ou informações sobre o trabalho de
uma empresa, por exemplo.
No Visual Studio, podem ser criados projetos de aplicativos Web ou sites. Sendo que para cada um deles devem-se
utilizar os módulos e configurações que forem de interesse do desenvolvedor e que atendam às suas necessidades.
Para criar ou abrir um projeto de site deve-se escolher a opção ou no menu Novo Site Abrir Site Arquivo.
Navegue no recurso abaixo para conhecer as características deste tipo de projeto.
•
Não existe um arquivo único para o projeto, os arquivos construídos são armazenados em
pastas do próprio site.
• O código-fonte é compilado dinamicamente (automaticamente) pelo ASP.NET no servidor
na primeira vez em que uma solicitação é recebida após o site ter sido publicado ou
atualizado.
• 
Por padrão, a compilação produz vários conjuntos.
1.4 Componentes da plataforma Web
Ao trabalhar com aplicações Web, é comum o uso de arquivos JavaScript e CSS. Quando a página possui muitos
links para recursos externos, pode se tornar lenta ao carregar. O (empacotamento) é uma das técnicasBundling 
disponíveis nas tecnologias ASP.NET para diminuir o tempo de carregamento de páginas Web.
•
•
•
- -18
Outros componentes que podem ser utilizados na plataforma Web que serão abordados nesse tópico são o 
e as URLs amigáveis, ou Bootstrap FriendlyURLs.
1.4.1 Implementando o Bundle
A palavra Bundle tem como significado agrupar, embrulhar ou empacotar. Neste sentido, os navegadores
costumam limitar o número de conexões simultâneas a um mesmo servidor, o que quer dizer que enquanto esse
número de requisições não terminar as próximas ficarão em espera. E a funcionalidade do ASP.NET Corebundling
possibilita juntar diferentes arquivos em um único, limitando assim a quantidade de requisições a um servidor para
download.
Fonte: © Image Studio / / Shutterstock.
Esta técnicareduz a quantidade de arquivos trafegando, mas não seu tamanho. O pode ser elaborado embundling
CSS, JavaScript ou ser criado uma própria linguagem de programação. Outra função que auxilia a aumentar a
velocidade de carregamento de páginas, reduzindo o tamanho dos arquivos é a Pela minificação,minification.
como também é conhecida, realiza-se a verificação de todo um ou de um CSS, renovando o conteúdo nãoscript 
necessário para sua execução. Como por exemplo, comentários ou espaços extras. Neste caso, o tamanho dos
nomes das variáveis também é diminuído.
Essas duas técnicas, quando utilizadas em conjunto, podem melhorar o desempenho do aplicativo da Web. 
e podem ser aplicados durante o design e também enquanto ocorre a execução. No tópicoBundling minification 
seguinte abordaremos diferentes ferramentas que utilizam essas funções no ASP.NET Core.
1.4.2 Utilizando o Bundle
O ASP.NET suporta o uso de e prontos para uso, mas o mesmo não acontece no ASP.NET bundling minification 
Core. Como o ASP.NET Core é as possibilidades são maiores. As ferramentas que mencionaremos aopen source,
seguir são um misto entre tecnologias de código aberto e desenvolvidas pela Microsoft. Todas estes recursos são
fáceis de configurar e ajudam a concluir o processo com poucas linhas de códigos. Vamos clicar nas abas a seguir
para conhecê-los.
Opção padrão
O BundlerMinifier é a opção padrão para o aplicativo ASP.NET Core. É um pacote de pacotes
integrado ao sistema de construção do projeto deste formato. Ele foi projetado para evitar
dependências em outras bibliotecas. É uma extensão do Visual Studio que permite configurar o
agrupamento e a minimização de arquivos JavaScript, CSS e HTML. Uma de suas funções é
agrupar agrupá-los em um único arquivo de saída, sejam individuais ou integrados.
- -19
O u t r a s
ferramentas
Outras ferramentas disponíveis com as mesmas funcionalidades são Gulp, Webpack,
WebOptimizer, Grunt, e Smidge. Cada uma delas tem suas características, prós e contras. Tanto
Webpack, Gulp e Grunt requerem conhecimento de JavaScript. Já as outras três citadas não
exigem esta experiência.
No próximo tópico aprenderemos sobre outras ferramentas úteis para criar aplicativos, o Bootstrap.
1.4.3 Bootstrap
O é um ou kit de ferramentas, de código aberto para desenvolvimento com HTML, CSS e Bootstrap framework, 
JavaScript. Com ele, é possível criar protótipos ou construir um aplicativo inteiro. Este recurso une códigos comuns
entre diferentes projetos de software com uma funcionalidade genérica. Assim, as funcionalidades específicas são
definidas por configuração no período da programação de uma aplicação.
Pode-se dizer que a aplicação principal do B é na criação de sites responsivos, com tamanhos adaptáveisootstrap
para Ao utilizar a ferramenta, o desenvolvedor não necessita escrever linhas de código repetidamente paramobile. 
a mesma função. O recurso possui em jQuery e um grande número de bibliotecas prontas disponíveis, plugins
sendo assim, o trabalho é incluir as funcionalidades que serão utilizadas em cada projeto.
Para aplicar o é necessário realizar o download no site oficial da ferramenta e adicionar os arquivos “framework 
” e “ ” nas pastas correspondentes a cada um deles dentro da aplicação Webbootstrap.min.css bootstrap.min.js
desenvolvida. Em sequência, deve-se chamar o CSS e o JavaScript dentro do cabeção ( ) do HTML. Depois<head>
disso, a ferramenta acessará a biblioteca jQuery para tornar ativo o comportamento de seus Em sequência,plugins.
serão apresentadas informações sobre a criação das Friendly URLs.
1.4.4 Friendly URLs
As Friendly URLs são URLs ( – Localizador Uniforme de Recursos) amigáveis tanto para osUniform Resource Locator 
usuários quanto para os sistemas de buscas. Ao invés de demonstrarem no navegador os endereços completos dos
sites, apresentam um link familiar e descritivo, dando a entender a que parte do site a URL se refere. Como
exemplo, podemos citar o endereço como uma URL amigável, sendo que ohttp://www.sitemeu.com.br/noticia
mesmo site poderia ter utilizado . A primeira opção éhttp://www.sitemeu.com.br/noticia.categoria=64/atual
nitidamente mais clara.
DICA
No site oficial da ferramenta Bootstrap existe uma página de exemplos ( ) de recursosexamples
disponíveis para customizar seus projetos de sites.
http://www.sitemeu.com.br/noticia
http://www.sitemeu.com.br/noticia.categoria=64/atual
- -20
Fonte: © Image Studio / / Shutterstock.
O uso de URLs amigáveis aumenta a pontuação do site nos sistemas de busca, visto que o endereço é relevante e
traz palavras que fazem parte do conteúdo ou do título da página que representam. Além de serem fáceis de usar e
ser compreendida pelos usuários.
Quando uma URL é digitada, o navegador se comunica por meio de uma requisição com o servidor, que retorna o
resultado. Este é obtido por meio de regras internas definidas em código e nas configurações da aplicação para que
seja apresentado o arquivo ou página correspondente. Basicamente, ao acessar a URL do exemplo (http://www.
), o servidor receberá a instrução de acessar o arquivo correto (com descrição nãositemeu.com.br/noticia
amigável) para responder a requisição.
Proposta de atividade
Agora é a hora de recapitular tudo o que você aprendeu nesse capítulo! Elabore um mapa conceitual destacando as
principais ideias abordadas ao longo do texto. Ao produzir seu mapa conceitual, considere as leituras básicas e
complementares realizadas.
Dicas: Comece com um termo ou expressão principal, em seguida, os conecte a palavras de ligação, para dar
sentido ao texto.
Elabore o mapa com até 15 conceitos.
Recapitulando
Ao longo deste capítulo reforçamos o conhecimento a respeito dos conceitos e componentes da plataforma Web.
Foram abordadas definições sobre a arquitetura cliente e servidor e o protocolo e as requisições HTTP, assim como
a respeito das tecnologias HTML, CSS, JavaScript e jQuery. Em sequência, falou-se da criação de aplicações e de
sites, bem como do uso das ferramentas Bundle, Bootstrap e Friendly URLs.
Os objetivos traçados no início do capítulo foram reconhecer arquitetura cliente-servidor, além das tecnologias
utilizadas em ASP.NET Core e sua aplicabilidade. Enquanto a pergunta norteadora tratou sobre como as aplicações
Web influenciam a vida das pessoas. Ao longo do estudo, vimos que o uso dessas tecnologias e ferramentas
influencia tanto na performance dos sistemas desenvolvidos, quanto na agilidade do serviço feito pelos
desenvolvedores e na usabilidade dos softwares pelos usuários.
http://www.sitemeu.com.br/noticia
http://www.sitemeu.com.br/noticia
- -21
Referências
BOOTSTRAP. Disponível em: < >. Acesso em 16 abr. 2019.Home. https://getbootstrap.com/
DEITEL, P. J.; DEITEL, H. M. 1 ed. Deitel & Associates Inc., São Paulo: Editora Makron, 2003.C# Como Programar.
FLANAGAN, D. o guia definitivo. 6 ed. Tradução João Eduardo Nóbrega Tortello. Porto Alegre:JavaScript:
Bookman, 2013.
FONSECA FILHO, C. o caminho do pensamento e da tecnologia. 1 ed. Porto Alegre:História da computação: 
EDIPUCRS, 2007.
JOBSTRAIBIZER, F. 1 ed. São Paulo: Digerati Books, 2009. Criação de sites com CSS.
JQUERY. ? Disponível em: < >. Acesso em 15 abr. 2019.What is jQuery http://jquery.com
KANJILAL, J. build RESTful web applications and services on the .NET framework. 1 ed.ASP.NET Web API:
Birmingham, UK: Packt Publishing. 2013.
MICROSOFT. Usar o Visual Studio para criar seu primeiro aplicativo Web ASP.NET Core. DisponívelInício Rápido: 
em: < >. Acesso em 16 abr.https://docs.microsoft.com/pt-br/visualstudio/ide/quickstart-aspnet-core?view=vs-2019
2019.
MICROSOFT. Download. Disponível em: < >. Visual Studio: https://visualstudio.microsoft.com/pt-br/downloads/
Acesso em 16 abr. 2019.
PERES, R. MVC patterns, configuration, routing, deployment, and more. 1 ed.Mastering ASP.NET Core 2.0:
Birmingham, UK: Packt Publishing. 2017.
SHARP, J. 1 ed. Porto Alegre: Editora Artmed, 2008.Visual C# 2008.
SOUZA, J. B. de. Hypertext Markup Language. 1 ed. Joinville: Clube de Autores,2014.Curso Básico de HTML:
https://getbootstrap.com/
http://jquery.com
https://docs.microsoft.com/pt-br/visualstudio/ide/quickstart-aspnet-core?view=vs-2019
https://visualstudio.microsoft.com/pt-br/downloads/
- -1
DESENVOLVIMENTO DE SISTEMAS WEB 
COM ASP.NET
CAPÍTULO 2 - FRAMEWORK ASP.NET CORE 
MODEL-VIEW-CONTROLLER (MVC)
Keila Barbosa Costa
- -2
Objetivos do capítulo
Ao final deste capítulo, você será capaz de:
• Reconhecer os modelos de MVC e escrever códigos que implementam a lógica de negócios dentro de 
modelo e métodos, propriedades e eventos.
• Adicionar controladores para um aplicativo de MVC e gerenciar a interação do usuário.
• Criar modos de exibição em um aplicativo de MVC para exibir e editar dados e interagir com modelos e 
controladores.
Tópicos de estudo
• O padrão MVC
• Estrutura dos arquivos MVC
• Controller
• Views
• Models
• Componentes MVC
• Componentes do modelo MVC
• Fluxo de execução do modelo MVC
• MVC - Validação e filtros
• Validação
• Anotação de dados
• Geração automática de código
• ADO.NET Core com MVC
• Separação das responsabilidades
• Retorno de métodos
• Controllers e para exibir e alterar dadosViews
Contextualizando o cenário
Quando falamos de sistemas computacionais, geralmente nos deparamos com o seguinte cenário: um banco de
dados fornecendo informações para serem apresentadas para o usuário. Na , isso não muda. Quando entramosweb
em um , estamos solicitando informações para uma aplicação, que deve buscá-las em uma fonte e entãosite
apresentá-las em uma interface amigável. Para que funcione desta maneira, no desenvolvimento, somos
inclinados a escrever o código de acesso ao banco de dados no mesmo local do código da interface, buscando
melhor desempenho.
Nesse sentido, neste capítulo veremos mais informações sobre o ASP.NET Core, que é um criadoframework web
pela Microsoft para construção de aplicativos web, entre outras funções. Ele usa padrões comuns como o MVC
(Model-View-Controller ou Modelo-Visão-Controlador). O ASP.NET Core possui código aberto, o que significa que o
seu código-fonte está disponível gratuitamente e a comunidade é encorajada a contribuir com correções de ebugs
inclusão de novos recursos. Diante desse cenário, surge uma questão importante: quais as principais
características e funcionalidades do ASP.NET Core MVC?
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
- -3
2.1 O padrão MVC
O é um padrão de arquitetura que separa um aplicativo em três componentesModelo-Visão-Controlador (MVC)
lógicos principais: o , a e o Cada um desses componentes é criado para lidar comModelo Visão Controlador. 
aspectos específicos de um aplicativo.
O MVC é uma das estruturas de desenvolvimento da padrão usado em quase todos os web frameworks web
frequentemente para criar projetos escalonáveis e extensíveis. Trabalhando juntamente ao ADO.NET, a estrutura
do padrão MVC divide uma aplicação em alguns componentes (STELLMAN, 2008). Em seguida será apresentada de
forma mais detalhada esta estrutura.
2.1.1 Estrutura dos arquivos MVC
A arquitetura MVC tem maior influência no mundo da aplicação . Os desenvolvedores podem facilmente criarweb
seus aplicativos utilizando esta arquitetura, pois ela reduz a complexidade do aplicativo e o divide em trêsweb
componentes principais: modelo, visualização e controlador. Assim, fornece controle total sobre o aplicativo da 
para os desenvolvedores.web 
Nesse sentido, os modelos retêm os dados adicionados às visualizações ou dados inseridos pelo usuário, enquanto
que as visualizações são que obtêm dados adicionados a eles e são exibidos ao do utilizador. Os templates 
controladores processam solicitações recebidas de um cliente ou do navegador e tomam decisões sobre o código a
ser executado.
Pode-se dizer que o ASP.NET Core suporta três modelos de desenvolvimento principais: Páginas da Web, Web Forms
e MVC. Veremos, portanto, que a estrutura da ASP.NET Core MVC é de apresentação leve e altamente testável,
integrada aos recursos existentes do ASP.NET como páginas mestras, autenticação etc (HADDAD, 2009). A seguir, é
apresentada a interação entre o Modelo, a Visão e o Controlador.
Interação entre Modelo, Visão e Controlador.
De forma simples, pode-se dizer que o usuário utiliza a interface, neste caso entendida como a Visão, para fazer
uma solicitação ao sistema. E o Controlador é o intermediador deste pedido, já que é ele que encaminha para o
Modelo processar ou calcular o pedido conforme o caso. E, por fim, o Controlador devolve à interface gráfica o
resultado, que exibirá ao usuário. Se a operação necessitar ser registrada em base de dados, o Modelo faz esta
tarefa. Esta relação também é apresentada na figura a seguir.
- -4
Fluxo da solicitação do usuário no ASP.NET MVC.
No exemplo anterior, quando o usuário insere um endereço no navegador, a requisição é enviada para o servidor,
que chama o Controlador apropriado. Em seguida, o Controlador usa a Visão e o Modelo adequado, cria a resposta
e a envia de volta ao usuário.
Assim, verificamos que o MVC é um padrão para o desenvolvimento de aplicativos, de modo que cada parte tem
sua responsabilidade, que é diferente uma da outra. Com isso, veremos a seguir as responsabilidades do Controller.
2.1.2 Controller
O Controlador, também conhecido como manipula a solicitação do usuário. Vamos clicar a seguir eController,
conhecer mais sobre suas atribuições.
Interação com o
usuário
Normalmente, a interação ocorre com a Visão ( ) que, por sua vez, gera uma solicitação deView
endereço (URL) apropriada. Para que isso ocorra, a requisição será tratada por um controlador
que interpreta as entradas enviadas pelo usuário, mapeia essas ações e as envia para o modelo
como uma resposta. Por exemplo, o controlador do cliente manipulará todas as interações e
entradas da e atualizará o banco de dados usando o Modelo do Cliente.CustomerView
Métodos de ação
O controlador é uma classe derivada da classe base A classeSystem.Web.Mvc.Controller.
controladora contém métodos públicos chamados métodos de ação. O controlador e seu
método de ação manipulam as solicitações ( ) de entrada do navegador, recuperam osRequest
dados de modelo necessários e retornam as respostas apropriadas.
No ASP.NET MVC, todo nome de classe do controlador deve terminar com uma palavra " ". Por exemplo,Controller
controlador para deve ser e para o aluno será denominado Alémhome page HomeController StudentController.
disso, todas as classes do controlador devem estar localizadas na pasta da estrutura de pastas do MVC.Controller
O aceita entradas do usuário e instrui a e o para realizar a correspondente. Assim,Controller View model action 
vejamos a seguir mais detalhes sobre e suas responsabilidades.View, Model
DICA
Um lida com solicitações de endereços (URLs) de entrada. O roteamento MVC envia controlador
a solicitação ao controlador e ao método de ação apropriados com base na URL e nas rotas
configuradas. A rota é definida como um padrão para o endereço e fixa como ele será tratado
pelo Sistema.
- -5
2.1.3 Views
Em um aplicativo ASP.NET Core MVC, não existe uma página ou nada similar quando se especifica um caminho na
URL. O mais próximo dela é conhecido como ou Neste sistema, todas as solicitações de entrada doVisão, Views. 
navegador são tratadas pelo controlador e mapeadas para ações dele. Desta forma, uma solicitação do
controlador pode retornar uma visualização ou ainda executar um diferente tipo de tarefa, como redirecionar a
uma outra atividade.
Com o MVC, o método mais popular para criar HTML é usar o mecanismo de exibição do ASP.NETframework Razor
MVC.
Para usar este recurso, uma ação do controlador produz um objeto , que pode transportar o nome daViewResult
visualização que pretendemos usar. A exibição será um arquivo no sistema. O também pode transportarViewResult 
um objeto de modelo para a exibição e esta pode usá-lo ao criar o HTML. Quando a estrutura do MVC vê que a ação
do controlador produz um , localiza a exibição no sistema de arquivos, a executa gerandoo HTML que aViewResult
estrutura envia de volta ao cliente. A seguir, abordaremos de forma mais detalhada a camada (Modelo) doModel
MVC.
2.1.4 Model
O ou é a camada MVC onde estará contida a lógica relacionada a dados com a qual o usuárioModelo Model
trabalha. Isso pode representar as informações que estão sendo transferidas entre os componentes e Visão
ou qualquer outra relacionada à lógica de negócios. Por exemplo, por meio desta camada, o sistemaControlador 
recuperará as informações do cliente do banco de dados, manipulará conforme a solicitação recebida e os
atualizará ou os usará para outros dados.renderizar 
Esses são os fundamentos do padrão de MVC, cuja uniformização tem como objetivo manter uma separaçãodesign
de interesses. De forma resumida, o Controlador é responsável apenas por aceitar uma solicitação e enviá-la para o
modelo correto correspondente, enquanto que o Modelo processa a lógica e acessa os dados que precisamos para
DICA
O é uma sintaxe de programação do usada para criar páginas da dinâmicasRazor ASP.NET web
com as linguagens de programação ou (GALLOWAY ., 2012).C # VB.NET et al
DICA
A Visão e o Controlador dependem do Modelo. No entanto, o Modelo não depende
exclusivamente das demais camadas para realizar suas funções. Esse é um dos principais
benefícios da separação que permite a criação e o teste do Modelo de forma independente da
apresentação visual.
- -6
a Visão. A Visão, por fim, é a responsável apenas por transformar o Modelo em HTML a fim de apresentá-lo
graficamente ao usuário. a seguir serão apresentados os componentes do MVC.
2.2 Componentes MVC
Os componentes MVC são utilizados em aplicativos que dispõem de mecanismos de renderização de servidor.Web
Clique a seguir para entender mais sobre esse processo.
Paradigma MVC
Dentro do paradigma MVC, temos controladores que expõem ações públicas. Inserindo cada ação, o controlador
aplica qualquer lógica de negócios de que necessita e decide quais exibições deve renderizar, passando
informações suficientes ao modelo para que este possa executar seu trabalho. Um controlador não tem
informações sobre os elementos da interface do usuário, apenas pega o contexto de dados e execução sobre
bancos de dados, serviços da , sequências de conexão, SQL e outros, possivelmente tomando decisões simplesWeb
sobre a maneira de fazer o processamento de dados (PERES, 2017).
Modelo
Quanto ao modelo, ele basicamente contém tudo o que você precisa que contenha sobre as informações exigidas
pela visualização, incluindo listas de registros, informações estáticas do usuário e muito mais. Essa separação
rígida facilita muito o gerenciamento, o teste e a implementação das aplicações. De qualquer forma, cabe salientar
que o padrão MVC não é específico para a web, ele pode ser usado sempre que essa separação de interesses for
útil, como quando temos uma interface de usuário e algum código para controlá-la (PERES, 2017).
A seguir, abordaremos diferentes funções dos componentes do MVC.
2.2.1 Componentes do modelo MCV
O (componentes ) é um pacote de padrões que permitem aos desenvolvedores criar seusWeb Components Web
próprios elementos DOM ( ou Modelo de Objeto de Documento). Esta interface retrata comoDocument Object Model
os documentos HTML e XML são entendidos pelo seu navegador. Os elementos personalizados podem encapsular
pontos de extremidade de interação comuns de comportamento. Os componentes podem, ainda, exporWeb
atributos personificados usados posteriormente para adaptar o elemento e definir o seu comportamento. Um
componente personalizado é usado de maneira declarativa, como qualquer outro elemento HTML.Web
O inclui quatro partes: e Além disso, ofereceWeb Components Templates, Imports, Shadow DOM Custom Elements.
uma direção realmente revolucionária para a criação de aplicativos da , dividindo páginas da emWeb Web
componentes reutilizáveis que incluem seu próprio comportamento e interação.
DICA
O é um poderoso e responsivo cabeçalho de navegação do , sendo este um navbar Bootstrap kit
de ferramenta para desenvolvimento com HTML, CSS e JS.
- -7
Visto isso, a seguir será detalhado o fluxo de execução do modelo MVC.
2.2.2 Fluxo de execução do modelo MVC
Anteriormente, vimos de forma simplificada a execução das diferentes camadas do MVC. A seguir, podemos ver
com maior detalhe uma implementação que utiliza a arquitetura MVC, com as diferentes funções da Visão, do
Controle e do Modelo, que corresponde ao seu fluxo de execução.
Fluxo de Execução do Modelo MVC.
Fonte: MACORATTI, 2018 (Adaptado).
O fluxo inicia com a camada de visualização e a interface com o usuário, que contém os elementos de exibição (no
exemplo HTML, ASP e outros clientes). É a camada Visão que recebe a entrada de dados. Já a camada de controle
estabelece o fluxo da representação, ou seja, controla e mapeia as ações. A do modelo ou lógica é responsável por
tudo que a aplicação vai executar, o que significa que é responsável pelas ações. Com isso, a seguir será abordado
o uso de filtros e a validação no MVC.
PAUSA PARA REFLETIR
Você já se perguntou como obter os botões de controle de uma de vídeo? tag 
- -8
2.3 MVC - Validação e filtros
Os filtros no ASP.NET Core MVC permitem que você execute códigos antes ou depois de estágios específicos no
processamento de solicitações. Filtros incorporados lidam com tarefas como: autorização (impedindo o acesso a
recursos para os quais um usuário não está autorizado); garantia que todas as solicitações usem HTTPS; Cache de
resposta (para retornar uma resposta armazenada em cache de forma rápida). O uso de filtros pode evitar a
duplicação de código nas ações. Por exemplo, um filtro de exceção de tratamento de erros pode consolidar o
tratamento de erros (MICROSOFT, 2019).
Os filtros podem ser aplicados a um método de ação ou controlador de duas maneiras: declarativa ou
programática. Os meios declarativos atuam aplicando um atributo de filtro a um método de ação ou classe de
controlador, enquanto os meios programáticos funcionam implementando uma interface correspondente
(GALLOWAY, 2010). A seguir são apresentadas informações sobre a validação.
2.3.1 Validação
O ASP.NET Core MVC fornece suporte à validação, arranjando o objeto de modelo com alguns atributos de
confirmação de anotação de dados. Conheça mais sobre a validação clicando a seguir:
•
Melhorias
A validação pode fornecer melhorias significativas de desempenho ao legitimar modelos que não
podem ou não têm validadores associados. Este recurso inclui coleções (byte[], string[],
 etc.) ou objetos gráficos complexos.Dictionary<string, string>
•
Conveniência
A validação do lado do cliente é uma grande conveniência para os usuários. Ela economiza tempo
que, de outra forma, seria gasto esperando por uma viagem de ida e volta ao servidor. Em termos de
negócio, algumas frações de segundo multiplicadas centenas de vezes por dia resultam em espera,
despesa e frustração. A validação direta e imediata permite que os usuários trabalhem com mais
eficiência e produzam entradas e saídas de melhor qualidade.
•
A estrutura e os filtros
A estrutura manipula dados de solicitação de validação no cliente e no servidor enquanto os filtros
ajudam os desenvolvedores a encapsular preocupações transversais, como manipulação ou
autorização de exceção. Eles permitem a execução de lógica personalizada de pré e pós-
processamento para métodos de ação e podem ser configurados para serem executados em
determinados pontos no pipeline de execução para uma determinada solicitação. Os filtros podem
ser aplicados a controladores ou ações como atributos (ou podem ser executados globalmente).
Vários filtros (como Autorizar) estão incluídos na estrutura. [ ] é o atributo usado para criar filtros deAuthorize
autorização do MVC.
Exemplo:
•
•
•
- -9
[Authorize]
public class AccountController : Controller
{
Podemos rapidamente adicionar validação aos nossos aplicativos com a adição de anotações de dados para
nossas classes. Anotações de dados nos permitemdescrever as regras que queremos que sejam aplicadas a nossas
propriedades de modelo e o ASP.NET MVC se encarregará de impô-las e exibir as mensagens apropriadas para
nossos usuários, o que será abordado a seguir.
2.3.2 Anotação de dados
Quando desenvolvemos nunca podemos confiar totalmente nos dados que o usuário informa. É aí quesoftware
entra a validação. O ASP.NET MVC usa atributos de anotações de dados para confirmar as informações. Para isso,
as anotações de dados incluem recursos incorporados adaptáveis a diferentes regras a serem aplicadas às
propriedades da classe de modelo. A estrutura da ASP.NET MVC implantará automaticamente as regras e exibirá
mensagens de validação na exibição.
Com isso, a seguir será detalhada a funcionalidade da geração automática de código.
2.3.3 Geração automática de código
Uma das ferramentas disponíveis no ASP.NET Core é a geração automática de código, tanto para documentação de
uma aplicação criada recentemente quanto para a geração de novas APIs, Para isso, pode ser utilizado o ,NSwag
para que possam ser acessadas as ações da API de uma biblioteca C# gerada previamente. Web
Para iniciar o uso dessa ferramenta, é necessário criar e configurar um projeto API da Web no Visual Studio,
baseado nos do . Após executar o projeto, navegar até a URL middlewares NSWag Swagger http://yourserver
, na qual será apresentada a interface do usuário do . Esta função também permite criar novos/swagger Swagger
projetos e configurar ferramentas.
A seguir veremos mais detalhes sobre a utilização do ADO.NET ( .NET).Microsoft ActiveX Data Objects 
PAUSA PARA REFLETIR
Como podemos aplicar validação de dados para melhorar nossa aplicação?
DICA
Para mais informações sobre o no ASP.NET Core acesse o da Microsoft.NSwag site
http://yourserver/swagger
http://yourserver/swagger
- -10
2.4 ADO.NET Core com MVC
Conforme visto anteriormente, o ASP.NET Core MVC é uma estrutura de código aberto, plataforma cruzada e de
alto desempenho usada para criar o aplicativo da web. É multiplataforma, portanto pode ser executada nos
sistemas operacionais Windows, Mac ou Linux. O ASP.NET Core é uma combinação de MVC e API da Webframework 
em um único framework web.
O é um conjunto de bibliotecas incluídas na Microsoft ActiveX Data Objects .NET (ADO.NET) Microsoft. NET Framework
que ajuda os dados a se comunicar com aplicativos baseados em .NET, incluindo dados XML. Trata-se de uma
plataforma para programação de dados que eleva o nível de abstração do nível lógico (relacional) para o nível
conceitual (entidade). Portanto, reduz significativamente a incompatibilidade de impedância para aplicativos e
serviços de dados, como relatórios, análises e replicações. Com isso, podemos ver na figura a seguir algumas
vantagens ao utilizar o ASP.NET Core.framework
Vantagens do ASP.NET Core.
A seguir, serão apresentadas divisões de responsabilidades no ASP.NET Core.
- -11
2.4.1 Separação das responsabilidades
A partir dos conhecimentos da plataforma, é possível dividir as responsabilidades em uma biblioteca ADO.NET em
alguns níveis, que ajudam a organizar as informações. Clique a seguir para conhecer esses níveis.
Nível de Apresentação do Usuário
É responsável pela interação com o usuário. Recebe informações de entrada e, por meio dos controles de página,
passa os parâmetros ao nível da lógica de negócios. Por fim, de acordo com os resultados de processamento do
nível de lógica de negócios, altera o método de exibição de página e, em seguida, apresenta ao usuário.
Nível de lógica de negócios
É responsável por assumir o parâmetro do nível de exibição do usuário. Determina qual serviço é aplicado de
acordo com o parâmetro e, em seguida, chama o serviço de componente e o banco de dados para manipular as
solicitações do nível de apresentação do usuário. Por fim, retorna os resultados para o nível de exibição.
Nível de banco de dados
Acessa o banco de dados por meio do ADO.NET Core para fornecer serviços de dados ao nível lógico de negócios.
Podemos criar aplicativos modernos, otimizados para nuvem, IoT, utilizando o ASP.NET Core.Mobile Backends
Também é possível implantar o aplicativo localmente ou na nuvem, que é executada na estrutura .NET Core ou na
estrutura .NET Standard.
Um método é utilizado para processar uma requisição HTTP e esse método pode conter ou não argumentos.action 
Para criar uma é preciso definir o método como , sendo que o valor de retorno será uma instância deaction public
uma classe que deriva de , que abordaremos a seguir.ActionResult
2.4.2 Retorno de métodos
A partir do .NET Core versão 2.1, existem três tipos de respostas que as ações do controlador podemWebApi 
retornar. Todos os três tipos tinham seus próprios prós e contras, mas faltam opções para satisfazer tanto o REST
quanto o alto nível de testabilidade.
Os tipos de resposta disponíveis no ASP.NET Core são:
• Tipo específico: retorna uma coleção de objetos personalizados.Product 
Exemplo:
Exemplo de tipo específico.
DICA
O (REST) é um estilo de arquitetura de que define umRepresentational State Transfer software
conjunto de restrições a serem usadas para criar serviços da web.
•
- -12
• IActionResult: permite que diferentes status HTTP sejam retornados.
Exemplo:
Exemplo de IActionResult.
• ActionResult<T>: permite o retorno de um tipo derivado de ou tipo específico.ActionResult
Exemplo:
Exemplo de ActionResult.
A única diferença para é que a propriedade de valor do resultado não é encaixada e retornada como IActionResult 
tipo de objeto. Em vez disso, volta como um tipo genérico usado para a resposta declarada noT ActionResult <T>
método de ação do controlador. Isso torna a forma de retorno um pouco mais fácil de ser verificada, já que não
precisa desmarcar a propriedade que, no caso de precisa ser lançada no tipo de retornoresut IActionResult, 
esperado.
No tópico seguinte serão detalhados os controles, formas de visualização e de alteração de dados.
•
•
- -13
2.4.3 e para exibir e alterar dadosControllers views
O modelo de dados conceituais é tornado real por um tempo de execução que implementa um modelo relacional
estendido, o . Este engloba entidades e relacionamentos como conceitos de primeiraEntity Data Modelaka (EDM)
classe, uma linguagem de consulta para o , um mecanismo de mapeamento abrangente que traduz do nível EDM
conceitual para o lógico (relacional) e um conjunto de ferramentas guiadas por modelo que ajudam a criar
transformadores eobjeto-objeto, objeto-xml entidade-xml.
Ao inserir uma exibição parcial em uma página , todos os associados à visualização chamadora são Razor ViewData 
associados automaticamente à Visualização Parcial. Isso significa que uma Visão Parcial pode se comportar de
maneira muito diferente em uma página do que em outra. Com os componentes da Visão, é possívelRazor 
controlar o que é compartilhado com eles.
Os Componentes de Visualização foram projetados para fazer tudo o que uma Visualização Parcial em versões
anteriores do ASP.NET faziam e muito mais. São objetos completamente independentes que consistentemente
html a partir de uma visualização Gerados a partir de uma classe C# derivada da classe base renderizam Razor. 
 acabam tipicamente associados a um arquivo para gerar marcação.ViewComponent, Razor
Devido a isso, os componentes de visualização separam e encapsulam bem a lógica do lado do servidor necessária
para renderizar a saída. Assim como os Controladores ASP.NET MVC, os Componentes de Visualização são
facilmente testáveis, pois podem ser gravados para não ter efeitos colaterais, o que significa menos . Agora,bugs
abordaremos um exemplo para facilitar a compreensão desses conceitos. Para isso, vamos criar o aplicativo MVC
usando o Visual Studio, de acordo com os passos que você conhece clicando a seguir:
• 
Abra o Visual Studio e selecione File >> New >> Project.
• 
Depois de selecionar o projeto, uma caixa de diálogo "Novo projeto" será aberta.
• 
Selecione .NET Core dentro do menu Visual C# no painel esquerdo.
•Em seguida, selecione ASP.NET Core Web Application dos tipos de projeto disponíveis.
• 
Coloque o nome do projeto como AspCore_Crud e pressione OK.
•
•
•
•
•
- -14
Uma nova caixa de diálogo será aberta pedindo para selecionar o modelo do projeto. Haverá dois menus
suspensos no canto superior esquerdo da janela do modelo. Selecione e Em seguida, .NET Core ASP.NET Core 2.0.
escolha o modelo e pressione Aplicativo da (Modelo-Visão-Controle) Web OK.
Agora, o projeto será aberto. Observe que existem as pastas Modelos, Visualizações e Controladores já criadas. Para
gerar a Visão do projeto, conforme a figura a seguir, clique com o botão direito do mouse sobre o respectivo
método do controlador ( ) e siga os passos: clicar em aceitar o nome padrão da ; definir o Controle VisãoAdd ; Visão
 definir a classe de modelo; clicar no botão Template; Add.
Exemplo de Visualização.
Fonte: REPRODUÇÃO, 2019.
Na tela apresentada na figura anterior podemos ver um exemplo de já o código abaixo pode ser utilizado paraView,
editar os dados de um funcionário existente.
Exemplo.
- -15
Exemplo de Visualização.
Fonte: REPRODUÇÃO, 2019.
Essa visualização exibirá todos os registros de funcionários presentes no banco de dados. O padrão de MVCdesign 
insere uma classe de controlador entre a visualização e o modelo para remover as dependências da exibição deste
último. Com as dependências removidas, o modelo e possivelmente a visualização podem ser reutilizados sem
modificação. Isso facilita muito a implementação de novos recursos e manutenção.
Proposta de atividade
Agora é a hora de recapitular tudo o que você aprendeu nesse capítulo! Elabore um aplicativo da MVC no ASP.web 
NET Core usando o ADO.NET simulando um aplicativo para cadastro de pedido de Itens, destacando as principais
ideias abordadas ao longo do capítulo. Ao produzir sua API , considere as leituras básicas e complementaresWeb
realizadas.
Recapitulando
Vimos neste capítulo como o padrão MVC é estruturado e suas vantagens quando aplicado adequadamente no
desenvolvimento de aplicações para Foram apresentadas as tecnologias ASP.NET Core com MVC e ADO.NETWeb.
Core com MVC, o que utiliza todos os recursos já existentes no ASP.NET Core aplicado ao padrão MVC,framework 
como funcionam suas partes (Modelo, Visão e Controle) e como construí-las utilizando esses recursos. Apresentou-
se que os filtros MVC, que são usados para executar a lógica personalizada antes ou depois da execução do método
de ação.
Note que todos os pontos citados têm alguma relação com a apresentação final para o usuário, isso porque as
regras de negócio de uma aplicação são pouco alteradas se comparadas com a interface. Logo, devem ser
separadas de alguma forma para facilitar a manutenção de código e permitir futuras extensões da aplicação.
- -16
Referências
CAMACHO JR., C. O. A. Florianópolis: Visual Books, 2008.Desenvolvimento em camadas com C# .NET.
DEITEL, H. M. Deitel & Associates Inc., Editora Makron: São Paulo, 2003.C# Como Programar.
GALLOWAY, J. . Indianapolis: John Wiley & Sons, 2012.et al Professional ASP.NET MVC 4.
GALLOWAY, J.; H., S. Indianápolis: IN: Wiley, 2010. Professional ASP.NET MVC 2. 
HADDAD, R.I. 1ª edição, São Paulo: Editora ÉricaLINQ e C# 3.0: A Solução em consultas para desenvolvedores.
LTDA., 2009.
LIMA, E. Rio de Janeiro: Campus, 2002.C# e .NET Guia do Desenvolvedor. 
MACORATTI, J. C. O modelo , Disponível em: <Padrões de projeto: mvc-modelviewcontrolle’ www.macoratti.net
>. Acesso em: 23/03/2019./vbnmvc.htm
MICROSOFT. Disponível em: <Filters in ASP.NET Core. docs.microsoft.com/pt-br/aspnet/core/mvc/controllers
>. Acesso em 05/05/2019./filters?view=aspnetcore-2.2
______. . Disponível em: <Get started with Swashbuckle and ASP.NET Core docs.microsoft.com/pt-br/aspnet/core
>. Acesso em 05/05/2019./tutorials/getting-started-with-swashbuckle?view=aspnetcore-2.2&tabs=visual-studio
______. Usar o Visual Studio para criar seu primeiro aplicativo Web ASP.NET Core. Disponível em: < Início Rápido: 
>. Acesso em 16/04/2019.docs.microsoft.com/pt-br/visualstudio/ide/quickstart-aspnet-core?view=vs-2019
MUKHI, V. São Paulo: Makron Books, 2002.C# Fundamentos.
PERES, R. MVC patterns, configuration, routing, deployment, and more. 1 ed.Mastering ASP.NET Core 2.0:
Birmingham, UK: Packt Publishing. 2017.
STELLMAN, A.; GREENE, J.. Rio de Janeiro: Editora Alta Books, 2008.Use a Cabeça C#. 
SHARP, J. Passo a Passo. Editora Artmed, 2008.Visual C# 2008:
SANTOS, L. . São Paulo: Érica, 2009.Microsoft Visual C# 2008 Expression Edition
http://www.macoratti.net/vbnmvc.htm
http://www.macoratti.net/vbnmvc.htm
http://docs.microsoft.com/pt-br/aspnet/core/mvc/controllers/filters?view=aspnetcore-2.2
http://docs.microsoft.com/pt-br/aspnet/core/mvc/controllers/filters?view=aspnetcore-2.2
http://docs.microsoft.com/pt-br/aspnet/core/tutorials/getting-started-with-swashbuckle?view=aspnetcore-2.2&tabs=visual-studio
http://docs.microsoft.com/pt-br/aspnet/core/tutorials/getting-started-with-swashbuckle?view=aspnetcore-2.2&tabs=visual-studio
http://docs.microsoft.com/pt-br/visualstudio/ide/quickstart-aspnet-core?view=vs-2019
- -1
DESENVOLVIMENTO DE SISTEMAS WEB 
COM ASP.NET
CAPÍTULO 3 - FORMULÁRIOS E HTML HELPERS
Jeanfrank Teodoro Dantas Sartori
- -2
Objetivos do capítulo
Ao final deste capítulo, você será capaz de:
• Compreender conceitos e a aplicabilidade de formulários assim como usar Helpers para criar formulários.
Tópicos de estudo
• Usando Formulários
• A ação e o método
• GET e POST
• HTML Helpers
• ActionLink Helper
• Helpers de Formulários
• DropDownList Helper
• Editor Helper
• Outros Helpers de Entrada
• Html.Hidden
• Html.Password
• Html.RadioButton
• Html.CheckBox
• Helpers de Renderização
• Html.ActionLink e Html.RouteLink
• URL Helpers
• Html.Partial e Html.RenderPartial
• Html.Action e Html.RenderAction
Contextualizando o cenário
Já reparou como os formulários, em suas diversas formas, fazem parte de quase toda a experiência na internet e
em aplicações? Sem eles, páginas e sistemas seriam meros repositórios de informações e documentos, pois
estaríamos sem capacidades básicas como a de pesquisar por um dado termo.
Assim, formulários são um componente importante e poderoso do desenvolvimento Web, tema de nossa
disciplina. Neste capítulo, estudaremos os seus componentes básicos e como os Html Helpers (Auxiliares de Html)
podem nos ajudar na sua implementação.
Aplicações Web em ASP.net consistem em uma ou mais páginas ou formulários e arquivos de códigos e de
configurações. Estes formulários são descritos em arquivos aspx, que são essencialmente documentos com html 
 específicas do Microsoft .NET (SHARP, 2008).tags
Como trabalhar com formulários no desenvolvimento Web em ASP.net e fazer uso dos Html Helpers? São as
respostas para esta e outras perguntas que exploraremos juntos ao longo do capítulo.
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
- -3
3.1. Usando Formulários
Formulários são uma parte delimitada em um e basicamente contêm elementos de entrada de dados, comohtml 
botões, caixas de texto etc. Esses recursos permitem ao usuário inserir informações que serão posteriormente
submetidas a um servidor para processamento e tratamento.
Fonte: © Image Studio / / Shutterstock.
Mas afinal, como esses dados de entrada chegam até o servidor? E para qual servidor? As respostas para estas
perguntas estão em dois atributos fundamentais de qualquer formulário Web: E são eles queaction and method.
estudaremos a seguir.
3.1.1. A ação e o método
O atributo – ação – corresponde, como o nome sugere, ao que é feito com os dados do formulário, ou seja,action 
para onde (qual servidor) são enviados, além de outras informações. Deste modo, o seu valor corresponde a um
endereço (URL), que pode ser absoluto (caminho completo) ou relativo (caminho a partir da localização da página
atual).
Suponhamos que nosso formulário esteja numa aplicação localizada em e <http://meuapp.minhaempresa.com.br> 
que as informações devam ser encaminhadas para página em umasubpágina pesquisar. O URL absoluto seria
 enquanto o relativo corresponderia a <http://meuapp.minhaempresa.com.br/pesquisar> </pesquisar>.
- -4
O atributo – método –, por sua vez, corresponde à forma como os dados preenchidos nos formulários serãomethod 
encaminhados ao endereço definido pelo Existem duas opções, GET e POST, que muitas vezes sãoaction.
confundidos, mal compreendidos e adotados de forma equivocada.
Quais as diferenças entre esses métodos e quando utilizá-los? É o que veremos a seguir.
3.1.2. GET e POST
O método GET é o padrão para a submissão dos dados de um formulário. Cada um dos campos é adicionado ao
endereço definido no atributo Para isso, após o URL é incluído o caractere interrogação (?) seguido doaction.
padrão Caso exista mais de um campo, eles são separados pelo símbolo “&”. “nomedocampo=valor”. 
No exemplo anterior, considerando que o único campo do formulário fosse o termo a ser pesquisado (imaginemos
um número de nota fiscal 17.413), o resultado do envio seria o encaminhamento para o endereço: <http://meuapp.
>.minhaempresa.com.br/pesquisar?NF=17413
Fonte: © Image Studio / / Shutterstock.
Já no método POST, por sua vez, as informações do formulário são enviadas dentro do corpo da requisição ,html
ou seja, numa explicação simplificada, no pedido de acesso ao endereço de destino. Note que, desta forma, os
dados não são mais explícitos após enviados.
Um dos benefícios de POST ocorre quando informações restritas estão envolvidas, como senhas, meios de
pagamento etc., uma vez que esses dados ficam um pouco mais protegidos. Por exemplo, se alguém olhar o
histórico no navegador no qual você fez uma compra na internet, não conseguirá descobrir dados do seu cartão de
crédito, pois nenhuma informação está descrita nos respectivos endereços.
CURIOSIDADE
A sigla URL corresponde a (em português Localizador Padrão deUniform Resource Locator 
Recursos). De forma simples, é um endereço local ou na internet, precedido pela indicação de
um protocolo ou por exemplo), sendo normalizado pela RFC 1738 (Internet(http:// ftp://,
Engineering Task Force, 1994).
http://meuapp.minhaempresa.com.br/pesquisar?NF=17413
http://meuapp.minhaempresa.com.br/pesquisar?NF=17413
- -5
Já no exemplo que estamos construindo, provavelmente utilizaríamos GET, uma vez que uma simples pesquisa
normalmente não envolve dados sigilosos. Além disso, permite que uma dada submissão seja salva (nos favoritos
do navegador, por exemplo) para acesso futuro. Por exemplo, manter uma pesquisa pelo número específico de
uma nota fiscal. Se o formulário usasse o método POST, de nada adiantaria salvá-lo.
Será que existe uma forma mais fácil de codificar formulários em aplicações Web no contexto de ASP.net? Sim, e é
isso que passaremos a estudar.
3.2. HTML Helpers
Ao criar formulários para aplicações Web, é possível produzi-los escrevendo diretamente os códigos Existem, html. 
todavia, no contexto de ASP.net, os Html Helpers ou Auxiliares HTML que, como o nome sugere, possuem a função
de tornar mais fácil a tarefa de construção dos formulários.
Fonte: © Image Studio / / Shutterstock.
CURIOSIDADE
A base para a linguagem HTML foi desenvolvida em 1980 por Tim Berners-Lee e descrita em
maiores detalhes em 1989. Em 1990, foi criado o primeiro navegador e o primeiro servidor
(BERNERS-LEE, 1989).
- -6
Além dessa facilitação, o uso dos Html Helpers traz a vantagem de tornar a aplicação menos resistente a
mudanças, por exemplo, de hospedagem da aplicação. Numa escrita direta e estática em especialmentehtml, 
usando endereços absolutos, podemos ter sérios problemas.
3.2.1. ActionLink Helper
Clique nas abas a seguir para conhecer este helper.
Funcionalidade
O ActionLink tem a funcionalidade de gerar um em de forma dinâmica (e nãohelper link html 
estática). Vamos imaginar, por exemplo, um site que ao clicar sobre o texto “Sobre a minha
empresa” se acesse o endereço “/about”.
Escrevendo diretamente em , teríamos algo como:html
<a href=”/about”>Sobre a minha empresa</a>
Resultado
Para produzirmos o resultado equivalente com o ActionLink Helper, utilizaríamos a seguinte
forma:
@Html.ActionLink("Sobre a minha empresa", "/about")
Benefícios
Para quem já é familiarizado com a linguagem a segunda opção do exemplo pode parecer html,
simples, porém, o objetivo é tornar a programação acessível, bastando saber os parâmetros
requeridos pelo Além disso, temos o benefício das facilidades em casos maishelper.
complexos.
Será que também dispomos desta ferramenta para a construção dos formulários propriamente ditos? Certamente!
E é isso que passamos a estudar a seguir.
3.2.2. Helpers de Formulários
Para entendermos como os Helpers de Formulários podem tornar mais fácil a vida do programador, vamos
explorar um pouco mais o exemplo trabalhado anteriormente. Para isso, imaginemos que o formulário solicite
apenas o número da nota fiscal a ser procurada, como ilustrado na figura a seguir:
Deste modo ele poderia ser escrito, diretamente em , da seguinte forma:html
Esse mesmo formulário pode ser construído utilizando o BeginForm que assume a responsabilidade dehelper, 
inserir tanto a <form> quanto </form>, conforme exposto a seguir:tag
Se olharmos o html renderizado, teremos uma saída idêntica à programação feita de modo direto. Mas essa não é a
única maneira de utilizar este helper, também podendo ser adotado a invocação por meio de @using, como o
código equivalente a seguir. Note que ela é ainda mais reduzida (178 caracteres contra 189).
- -7
Outros parâmetros podem ser adicionados à definição do formulário utilizando o mesmo Imaginemos quehelper.
queiramos que os resultados sejam exibidos em uma outra janela. Isso pode ser configurado por meio da opção 
(em branco) de (destino ou alvo):“_blank” target 
Semelhantemente e com a mesma sintaxe, você pode adicionar todos os parâmetros disponíveis para a tag <form>,
que podem ser consultadas facilmente em qualquer tutorial da linguagem html.
Até agora estudamos apenas como criar o contêiner de um formulário, pois são os seus campos que darão a ele
sentido e utilidade. Veremos, a seguir, alguns que nos ajudam a criar alguns desses espaços maishelpers 
frequentes.
3.2.3. DropDownList Helper
DropDown List, ou em português lista suspensa, é um dos tipos mais comuns de campos de formulário. São
aquelas caixas de seleção em que o usuário escolhe dentre opções pré-estabelecidas que aparecem quando se
clica em um símbolo de flecha para baixo ou outro análogo, conforme exemplificado a seguir.
Fonte: © Image Studio / / Shutterstock.
Para criarmos um campo deste tipo, contamos com um auxiliar específico, o DropDownList Helper. Seguindo com
o exemplo, imaginemos que nosso formulário precise ter uma caixa de seleção para especificar se a nota procurada
é de entrada ou de saída. O código a seguir é uma das formas de construirmos isso:
- -8
Este exemplo, utilizando o corresponde aproximadamente ao seguinte código cujo resultado helper, html, 
(acrescido ao desenvolvido anteriormente) é apresentado na próxima figura.
Agora que sabemos criar uma lista suspensa, podemos avançar para outro campo bastante comum em
formulários, mais precisamente um campo de texto para entrada de dados.
3.2.4. Editor Helper
Na construção de nosso formulário, já criamos um campo de texto para informar o número da NF a ser pesquisado,
como podemos ver no trecho que a seguir:
A demonstração anterior mostra um exemplo feito (intencionalmente) por meio da codificação direta em .html
Podemos obter o mesmo resultado utilizando o correspondente, o Html.Editor, conforme apresentado ahelper 
seguir:
DICA
Existe um bastante semelhante ao DropDownList Helper, chamado LisBox Helper. Ahelper
diferença? Enquanto o primeiro permite a seleção de apenas uma opção, o segundo habilita a
escolha de múltiplos itens (GALLOWAY , 2014).et al.
- -9
Assim, aprendemos dois dos tipos mais comuns de campos em formulários. Mas há muito mais que podemos fazer
por meio de outros E é isso que veremos a seguir.helpers.

Continue navegando