programando razor

28

Upload: vitor-reis

Post on 19-Jun-2015

689 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Programando razor
Page 2: Programando razor

Quem sou eu● Vitor Reis - Avatar● Analista de Sistemas Pleno - Pearson ● Sócio - NewGT Desenvolvimento Mobile● Blog: www.vitorreis7.wordpress.com

2

Page 3: Programando razor

Ferramentas exploradas nesta apresentação

● WebMatrix○ IIS Express○ ASP.Net Web Pages○ SQL Server Compact

● Razor

3

Page 4: Programando razor

Microsoft WebMatrix

● Criar● Customizar● Publicar● Servidor Web● Banco de dados● Ferramenta de

desenvolvimento

4

Page 5: Programando razor

WebMatrix Versus Visual Studio

Eu <3 Web Apps!Eu apenas preciso de uma ferramenta em que seja fácil de configurar, customizar e publicar

Eu quero construir web sites sozinho, com uma ferramenta fácil e com recursos de um framework

Eu sou um desenvolvedor profissional e crio web sites complexos, grandes e escaláveis com um time de desenvolvimento 5

Page 6: Programando razor

O que é HTML?

● HTML é uma linguagem para descrever páginas web.

● HTML vem de Hyper Text Markup Language● Uma linguagem de marcação é um conjunto

de tags● As tags definem o conteúdo da página

6

Page 7: Programando razor

O que é CSS?

● CSS vem de Cascading Style Sheet.● Um estilo define como o navegador irá exibir

um elemento HTML.● Folhas de estilo "externas" podem lhe fazer

aumentar a produtividade.● Folhas de estilo "externas" são

armazenadas em arquivos CSS.

7

Page 8: Programando razor

Uma breve história das plataformas de desenvolvimento WEB da Microsoft

● Active Server Pages - ASP● ASP.NET Web Forms● ASP.NET MVC● WebMatrix

8

Page 9: Programando razor

Active Server Pages - (ASP)

Código e marcação são criados em um único arquivo, em que cada arquivo fisico corresponde a uma página no website.

Os desenvolvedores queriam mais:● Reutilização de código● Separação de Conceitos● Facilitar a utilização dos

princípios de POO

9

Page 10: Programando razor

Abordagem baseada em páginaSeparação em 2 camadas: Código e Marcação

É considerado por alguns desenvolvedores como uma abstração de HTML, Javascript e CSS.

ASP.Net Web Forms - 2002

10

Page 11: Programando razor

ASP.NET MVC - 2008

● Total abandono da abordagem baseada em páginas

● Em vez de arquivos de marcação, as views tem a responsabilidade de gerar o HTML para o usuário.

● Permite que o desenvolvedor escolha a linguagem que usará na view, Razor emergiu como a mais popular.

11

Page 12: Programando razor

MVC - Padrão de Projeto

O modelo MVC define aplicações com 3 camadas principais:

A camada de negócio (Model logic)A camada de exibição (View logic)O controle de entradas (Controller logic)

12

Page 13: Programando razor

MVC - Padrão de Projeto

Page 14: Programando razor

ComparaçãoWEB FORMS6 Marcações de transição

PHP2 Marcações de transição1 Função

Razor2 Marcações de transição

Page 15: Programando razor

Objetivos do Razor

Compacto, Expressivo e FluídoFácil de aprenderNão é uma nova linguagemFunciona em qualquer editor de textoPossuí um Intellisense muito bom

View Engine!15

Page 16: Programando razor

Hello, Razor!

O código:

<div>Hello world, essa página foi renderizada em @DateTime.Now</div>

Produz algo do tipo:

<div>Hello world, essa página foi renderizada em 12/7/1941 7:38:00 AM</div>

16

Page 17: Programando razor

Diferenciando Código de Marcação

Code NuggetsExpressões simples que são avaliadas e renderizadas em uma linha, por exemplo:

Identifique-se, efetue o @Html.ActionLink("Login", "Login")

Será renderizado como:

Identifique-se, efetue o <a href="/Login">Login</a>

17

Page 18: Programando razor

Diferenciando Código de Marcação

Code BlocksContém somente código, em vez de uma combinação de marcação e código:

@{ LayoutPage = "~/Views/Shared/_Layout.cshtml"; View.Title = "Detalhes do produto " + Model.ProductName;}

18

Page 19: Programando razor

Comentários com Razor

@* @{ LayoutPage = "~/Views/Shared/_Layout.cshtml"; View.Title = "Inicio";

}*@

19

Page 20: Programando razor

Razor Helpers

● Web Grid● Web Graphics● Google Analytics● Facebook Integration● Twitter Integration● Sending Email● Validation

20

Page 21: Programando razor

Razor e Microsoft WebMatrix

Demonstração21

Page 22: Programando razor

Criando um banco de dados

Popular o banco com dados

22

Page 23: Programando razor

Exibindo os dados do bancoAdicionar Post

- Uma página que você usará para adicionar novos "posts" no blog.

Post- Uma página que exibe todos os dados de

determinado post.

Página Inicial- Contém uma lista com os posts mais

recentes e link para a visualização completa. 23

Page 24: Programando razor

Adicionar livro

Formulário

Gerenciando os dados no POST do formulário

Validando os dados

24

Page 25: Programando razor

Finalizando hands on

Aplicar CSS de layout

Aplicar CSS no formulario

25

Page 26: Programando razor

Referências - Leitura sugerida

Page 27: Programando razor

Referências - Leitura sugerida

27

Page 28: Programando razor

Perguntas - Encerramento

Muito Obrigado!

FB: facebook.com/vitorreis7email: [email protected]

Blog: www.vitorreis7.wordpress.com

28