Você está na página 1de 54

C#

O padrão MVC
Model-View-Controller
MVC
O MVC é uma sigla do termo em inglês Model (modelo) View
(visão) e Controller (Controle) que facilita a troca de
informações entre a interface do usuário aos dados no banco,
fazendo com que as respostas sejam mais rápidas e dinâmicas.
Apesar de muitas pessoas considerarem essa sigla como um
padrão de design de interface, na verdade ele é um padrão de
arquitetura de software responsável por contribuir na
otimização da velocidade entre as requisições feitas pelo
comando dos usuários.
Com quase 50 anos de formulação, a arquitetura MVC é
dividida em três componentes essenciais: Model, Controller e
View.
MVC
MVC
Model ou Modelo
Essa classe também é conhecida como Business Object
Model (objeto modelo de negócio). Sua
responsabilidade é gerenciar e controlar a forma
como os dados se comportam por meio das funções,
lógica e regras de negócios estabelecidas.

Ele é o detentor dos dados que recebe as


informações do Controller, válida se ela está
correta ou não e envia a resposta mais adequada.
MVC
Controller ou Controlador
A camada de controle é responsável por intermediar
as requisições enviadas pelo View com as respostas
fornecidas pelo Model, processando os dados que o
usuário informou e repassando para outras camadas.

Numa analogia bem simplista, o controller operaria


como o ‘’maestro de uma orquestra’’ que permite a
comunicação entre o detentor dos dados e a pessoa
com vários questionamentos no MVC.
MVC
View ou Visão
Essa camada é responsável por apresentar as
informações de forma visual ao usuário. Em seu
desenvolvimento devem ser aplicados apenas recursos
ligados a aparência como mensagens, botões ou telas.

Seguindo nosso processo de comparação o View está na


linha de frente da comunicação com usuário e é
responsável transmitir questionamentos ao controller
e entregar as respostas obtidas ao usuário. É a parte
da interface que se comunica, disponibilizando e
capturando todas as informação do usuário.
MVC
Como os componentes interagem?
Tudo começa com a interação do usuário na camada
View. A partir daí o controlador pega essa
informações e envia para o Model que fica
responsável por avaliar aqueles dados e transmitir
uma resposta.
O controlador recebe essas respostas e envia uma
notificação de validação daquela informação para a
camada visão, fazendo com a mesma apresente o
resultado de maneira gráfica e visual.
Todo esse processo leva em consideração as regras
de negócio aplicadas na construção de todo projeto.
MVC
Por que usar MVC?
Muitos bootscamps de programação ensinam esse
padrão de arquitetura de software por alguns
benefícios que justificam o MVC como uma das mais
escolhidas no processo de desenvolvimento. Esses
benefícios são:

Segurança: O controller funciona como uma espécie


de filtro capaz de impedir que qualquer dado
incorreto chegue até a camada modelo.
MVC
Organização: Esse método de programação permite que
um novo desenvolvedor tenha muito mais facilidade
em entender o que foi construído, assim como os
erros se tornam mais fácil de serem encontrados e
corrigidos.

Eficiência: Como a arquitetura de software é


dividida em 3 componentes , sua aplicação fica
muito mais leve, permitindo que vários
desenvolvedores trabalhem no projeto de forma
independente.
MVC
Tempo: Com a dinâmica facilitada pela colaboração
entre os profissionais de desenvolvimento, o projeto
pode ser concluído com muito mais rapidez, tornando o
projeto escalável.

Transformação: As mudanças que forem necessárias


também são mais fluidas, já que não será essencial
trabalhar nas regras de negócio e correção de bugs.

Além disso, um software precisa ter estabilidade no


processo de comunicação entre seus elementos de
maneira dinâmica para que a experiência do usuário
não seja prejudicada.
C#

Visão Geral do ASP.NET


ASP.NET
É uma estrutura da Web gratuita para a criação de sites
e aplicativos Web excelentes usando HTML, CSS e
JavaScript. Você também pode criar APIs Web e usar
tecnologias em tempo real como Web Sockets.

O ASP.NET oferece três estruturas para a criação de


aplicativos Web: Web Forms, ASP.NET MVC e Páginas da
Web do ASP.NET. Todas as três estruturas são estáveis e
maduras, e você pode criar ótimos aplicativos Web com
qualquer um deles. Independentemente da estrutura
escolhida, você terá todos os benefícios e recursos do
ASP.NET em todos os lugares.
ASP.NET
Cada estrutura tem como alvo um estilo de desenvolvimento
diferente. O que você escolhe depende de uma combinação de
seus ativos de programação (conhecimento, habilidades e
experiência de desenvolvimento), o tipo de aplicativo que
você está criando e a abordagem de desenvolvimento com a
qual você está familiarizado.
ASP.NET
Formulários da Web
Com o ASP.NET Web Forms, você pode criar sites
dinâmicos usando um modelo familiar de arrastar e
soltar orientado por evento.

Uma superfície de design e muitos controles e


componentes lhe permitem compilar rapidamente sites
sofisticados, poderosos baseados em UI com acesso
de dados.
ASP.NET
MVC
O ASP.NET MVC fornece uma maneira eficiente e com
base em padrões de compilar sites da Web dinâmicos
que habilitam uma separação limpa de preocupações e
que fornece a você total controle sobre a marcação
de desenvolvimento ágil e divertido.

O ASP.NET MVC inclui muitos recursos que habilitam


rapidamente o desenvolvimento amigável a TDD para
criar aplicativos sofisticados que usam os últimos
padrões da Web.
ASP.NET - Razor
É uma sintaxe de programação ASP.NET usada para
criar páginas da web dinâmicas com as linguagens de
programação C# ou VB.NET.

Razor estava em desenvolvimento em junho de 2010 e


foi lançado para o Microsoft Visual Studio 2010 em
janeiro de 2011. Razor é um mecanismo de visualização
de sintaxe simples e foi lançado como parte do MVC 3
e do conjunto de ferramentas WebMatrix.

O Razor tornou-se um componente do AspNetWebStack e


depois tornou-se parte do ASP.NET Core.
ASP.NET - Razor
A sintaxe Razor é uma sintaxe de marcação de modelo, baseada na
linguagem de programação C#, que permite ao programador usar um
fluxo de trabalho de construção de HTML. Em vez de usar a
sintaxe de marcação ASP.NET Web Forms(.aspx) com <%= %>símbolos
para indicar blocos de código, a sintaxe do Razor inicia blocos
de código com um @caractere e não requer o fechamento explícito
do bloco de código.

A ideia por trás do Razor é fornecer uma sintaxe otimizada para


geração de HTML usando uma abordagem de modelagem focada em
código, com transição mínima entre HTML e código. O design
reduz o número de caracteres e pressionamentos de tecla e
permite um fluxo de trabalho de codificação mais fluido ao não
exigir blocos de servidor explicitamente denotados no código
HTML.
ASP.NET - Razor
Razor Pages é uma view engine, isto é, uma ferramenta para
geração de visões que possibilita a inserção de lógica da
aplicação nas visões.
ASP.NET
Páginas da Web do ASP.NET
Páginas da Web do ASP.NET e o sintaxe Razor
fornecem uma maneira rápida, acessível e leve de
combinar o código do servidor com HTML para criar
conteúdo da Web dinâmico.

Conecte-se a bancos de dados, adicione vídeo,


vincule a sites de rede social e inclua muitos
outros recursos que o ajudarão a criar um lindo
site que esteja em conformidade com os padrões da
Web mais recentes.
ASP.NET - Razor
Regras principais de sintaxe do Razor para C #
• Os blocos de código do Razor são colocados em @
{...}
• Expressões inline (variáveis e funções) começam
com @
• As declarações de código terminam com ponto e
vírgula
• As variáveis são declaradas com a palavra-chave
var
• Strings estão entre aspas
• O código C # diferencia maiúsculas de minúsculas
• Os arquivos C # têm a extensão .cshtml
ASP.NET - Razor
Tipos de Dados
int float decimal bool string

Criando variáveis
@{
string nome = "Recode";
string telefone = "xxxxxxx789";
string endereco = "Rua X";
int numero = 101;
int numero2 = 801;
}
ASP.NET - Razor
Conversão de Tipos de Dados
ASP.NET - Razor
Acessando variáveis

As variáveis podem ser facilmente acessadas.


Veja abaixo:

<p>Telefone : @telefone </p>


ASP.NET - Razor
Condicionais (if e else)
As variáveis podem ser facilmente acessadas.

Exemplo:
@if (numero1 == numero2)
{
<p>Chegou!</p>
}
else
{
<p>Continue andando .</p>
}
ASP.NET - Razor
Condicionais (if else if)
As variáveis podem ser facilmente acessadas.
Exemplo:
@if (price>=30)
{
<p>The price is high.</p>
}
else if (price>20 && price<30)
{
<p>The price is OK.</p>
}
else
{
<p>The price is low.</p>
}
ASP.NET - Razor
Condicionais (switch case)
As variáveis podem ser facilmente acessadas.
Exemplo:
@switch(day)
{
case "Monday":
message="This is the first weekday.";
break;
case "Thursday":
message="Only one day before weekend.";
break;
case "Friday":
message="Tomorrow is weekend!";
break;
default:
message="Today is " + day;
break;
}
<p>@message</p>
ASP.NET - Razor
Laços - for
Podemos criar laços utilizando o comando for.

Exemplo:
@for (int i = 0; i < 5; i++)
{
<p>i = @i </p>
}
ASP.NET - Razor
Laços - @foreach
Podemos criar laços utilizando o comando foreach.

Exemplo:
@foreach (var x in Request.ServerVariables)
{
<li>@x</li>
}
ASP.NET - Razor
Laços - while
Podemos criar laços utilizando o comando while.

Exemplo:
@{
var i = 0;
while (i < 5)
{
i += 1;
<p>Line @i</p>
}
}
ASP.NET - Razor
Exemplo: arquivo criado “webrazorsimples”
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}

<div class="text-center">
<h1 class="display-4">Seja bem vindo!</h1>
<p>Vamos realizar um exemplo bem simples do uso do <b>RAZOR</b></p>
</div>

<body>
<h1>Trabalhanco com uma página web para captura de data do servidor</h1>
<p>A hora atualizada é: @DateTime.Now</p>
</body>
ASP.NET - Razor
Exemplo:
<html>
<body>
<! - Bloco de instrução único ->
@ {var minhaMensagem = "Seja Bem-vindo!"; }

<! - Inline expression or variable ->


<p> O valor de MinhaMensagem é: @minhaMensagem </p>

<! - Multi-statement block ->


@ {
var infor = "Bem-vindo ao nosso site!" ;
var diaSemana = DateTime.Now.DayOfWeek;
var mensagem = inform + "Veja qual o horário: " + diaSemana;
}

<p> A Mensagem passada é: @mensagem </p>


</body>
</html>
ASP.NET - Razor
Um link bem interessante da Microsoft de como se
fazer um razor:
https://docs.microsoft.com/pt-br/aspnet/core/tutorials/razor-
pages/razor-pages-start?view=aspnetcore-6.0&tabs=visual-studio
HTML Helper
De forma bem simples e direta, um HTML Helper é
apenas um método que retorna uma string.

Sendo mais detalhista, podemos dizer que os HTML


Helpers são métodos de extensão da classe
HTMLHelper que são utilizados com a view Razor
engine (é também possível usar a view ASPX) para
facilitar a vida do desenvolvedor de forma a
minimizar a quantidade de declarações HTML que são
necessárias definir nas páginas web.
HTML Helper
Os HTML Helpers, são métodos que possibilitam a
renderização de controles HTML nas views, para
renderizar algum elemento HTML ou um
comportamento desejável nessa view sendo
possível também a implementação de HTML Helpers
personalizados.

Manutenção das páginas


Para facilitar a manutenção do código das
páginas CSHTML, o ASP.NET MVC oferece os vários
métodos que geram HTML usando os Helpers.
HTML Helper
@Html é um objeto da classe HtmlHelper. (o símbolo
@ é usado para acessar o objeto do lado do servidor
na sintaxe do razor).
Html é uma propriedade da classe HtmlHelper
incluída na classe base da visualização do razor
WebViewPage. O ActionLink()e DisplayNameFor()são
métodos de extensão incluídos na HtmlHelperclasse.

A classe HtmlHelper gera elementos HTML. Por


exemplo, @Html.ActionLink("Create New", "Create")
geraria uma marca de âncora <a
href="/Student/Create">Create New</a>.
HTML Helper
Função
A função de um HTML Helper é encapsular um código
HTML.

Por exemplo, para adicionar um link, podemos usar o


método ActionLink do objeto HTML, ao invés de usar
a tag <a> do HTML diretamente.
HTML Helper
Aqui no Html.Beginform estamos passando o nome da
visualização (Índice), o nome do controlador (Home)
e declaramos formMethod = Método Post.
HTML Helper
Segue alguns métodos do HTML Helper:
TagHelper
Permitem que o código do lado do servidor participe na criação
e renderização de elementos HTML em arquivos Razor. Elas são um
novo recurso semelhante aos HTML Helpers, que não ajudam a
renderizar o HTML.

Em muitos casos, os HTML Helpers fornecem uma abordagem


alternativa a um Tag Helper específico, mas é importante
reconhecer que os Tag Helpers não substituem os HTML Helpers e
não há um Tag Helper para cada HTML Helper.

Nota: Para usar como Tag Helpers, nas versões do VS onde ela
não fornece instalado por padrão, precisamos instalar uma
biblioteca NuGet - Microsoft.AspNet.Mvc.TagHelpers - e também
adicionar uma diretiva addTagHelper às views que usam essas
tags helpers.
TagHelper
Exemplo:

TagHelper
@model RegisterViewModel
<form asp-controller = "Demo" asp-action = "
RegistroInput " method = "post">
Email : <input asp-for = "Email" /> <br />
Senha : <input asp-for = "Password" /> <br />
<button type = "submit"> Registrador </button>
</form>
TagHelper
Exemplo:

Html
<form method = "post" action = " / Demo / RegistroInput" >
E - mail :<input type = "email" data-val = "true"
data-val-email = "O Email não é um endereço de email válido."
data-val-required = "O campo Email é obrigatório"
id = "Email" name = "Email" value = "" /> <br>
Senha :<input type = "senha" data-val = "true"
data-val-required = "O campo Senha é obrigatório."
id = "Senha" name = "Senha" /> <br>
<button type = "submit"> Registrador </button>
<input name = "__ RequestVerificationToken" type = "hidden" value =
"<removida ...>" />
</form>
ASP.NET - Rotas
As rotas fazem uso de um recurso chamado Middleware
de rotas .
Rota nada mais é do que um caminho que visualizamos
na URL.
httP://github.com/treinamento/sistema-academico

Protocolo Domínio Rota

O trabalho com as rotas permite que seu site seja


visto com mais facilidade e tenha uma melhor
dinâmica, sem falar que você trabalha com uma URL
amigável.
ASP.NET - Rotas
Middleware
É um software embutido por meio de injeção de
dependências é um padrão de desenvolvimento de
programas de computadores usados quando é
necessário manter o nível de acoplamento entre
diferentes módulos de um sistema.

Cada componente de uma rota tem um significado e um


papel, quando ocorre o processo de requisição.
ASP.NET - Rotas
http  que representa o protocolo a ser utilizado.

localhost: 5000  que são o servidor e a porta de


comunicação, respectivamente.

Cursos  que representa o controlador que receberá


uma requisição.

Índice  que é uma ação que atenderá à requisição.

http://localhost:5000/Cursos/Index
ASP.NET - Rotas
No projeto MVC, essa configuração fica na
classe Startup, no método Configure .

app.UseEndpoints (endpoints =>


{
endpoints.MapControllerRoute (
nome: "padrão",
padrão: "{controlador = Home} / {ação =
Índice} / {id?}");
});
ASP.NET - Rotas
Repare uma chamada do
método endpoints.MapControllerRoute() , responsável
por adicionar rotas à sua aplicação MVC . Essa rota
recebe o nome padrão e uma máscara para um URL
({controlador} / {ação} / {id}). Esse nome é o
usado nas aplicações ASP.NET Core MVC , mas você
pode alterar e outros.

Observe essa marcação ({controller} / {action} /


{id}) e vamos usar como exemplo nosso primeiro
projeto para exemplificar como funcionar na
prática.
ASP.NET - Rotas
Repare que na figura acima o navegador simplesmente
mostra o servidor localhost e a porta 44371 que a
aplicação está sendo executada, isso significa que
o .Net Core sabe exatamente onde deve buscar uma
rota inicial da aplicação da
configuração {controller} / {action} / {id} vista
anteriormente.
ASP.NET - Rotas
No exemplo acima, temos uma rota completa digitada
no navegador, onde HOME é
nosso controlador e Índice é a chamada (action)
da nossa view .
ASP.NET - Rotas
Controller
Uma classe Controller métodos que permitem a
requisições(chamadas) HTTP para uma
aplicação ASP.NET Core MVC. Essas respostas são
realizadas por métodos de ação (ações do
controlador) que compõem uma classe.
ASP.NET - Rotas
Actions

Nossas Actions estão dividias em public que


representa o escopo do nosso método,
Um IActionResult representa um objeto da interface
com o retorno de uma action.
O método View() (implementado na classe Controller)
retorna uma visão para o requisitante, ou seja,
nossas telas e suas informações equivalentes. A
nossa Action Cursos está recebendo por parâmetro um
objeto do nosso modelo que será explicado mais para
frente.
ASP.NET - Rotas
Views
Na pasta Views temos todos os arquivos cshtml,
esses arquivos estão todas como marcações de HTML e
configurações do ASP Net MVC que precisa para
organizar e estruturar como informações das páginas
que serão exibidas no navegador ou para qualquer
outro cliente que solicite essas visualizações.
ASP.NET - Rotas
Home
Repare que foi criado de forma automática dentro da
pasta View uma pasta chamada Home, essa pasta
representa o controlador com o mesmo nome e dentro
desta pasta temos como Views correspondente a
cada Action criada no controller HomeController .
https://recode.org.br

Você também pode gostar