![ViewData, ViwBag e Strogl typed Views
ViewData
ViewData["mensagem"] = “Bem vindo a PW";
MS](https://image.slidesharecdn.com/aula3camadadeapresentao3-241219161948-6c3308e9/85/Aula-3_Camada-de-apresentacao-livro-muito-bom-16-320.jpg)
Aula 3_Camada de apresentação livro muito bom
- 1. PROGRAMAÇÃO WEB AVANÇADA(ASP.NET MVC) UNIVERSIDADE SÃO TOMÁS DE MOÇAMBIQUE FACULDADE DE CIÊNCIAS E TECNOLOGIAS DE INFORMAÇÃO CURSO: LDS, 3ºAno Aula 3: Camada de Apresentação (MVC) MS
- 2. CAMADA DE APRESENTAÇÃO ➢ É responsável por gerar as páginas de uma aplicação web. ➢ Os dados apresentados em uma página web são definidos na camada de modelo. ➢ A camada de controle recupera os dados da camada de modelo e os envia para a camada de apresentação. MS
- 3. CAMADA DE APRESENTAÇÃO ➢ Define como os dados serão apresentados para os usuários da aplicação. ➢ O fluxo inverso também ocorre: também obtém dados inseridos pelos usuários e os envia para a camada de controle que, por sua vez, usa esses dados para alterar a camada de modelo. MS
- 4. Razor vs ASPX ➢ Até a segunda versão do ASP.NET MVC, as telas (ou páginas) de uma aplicação web eram desenvolvidas em ASPX. A partir da terceira versão desse framework, pode-se usar a linguagem Razor para construir essas telas. ➢ Razor é mais concisa e simples, diminuindo o número de caracteres e as tradicionais tags de scripts do ASP.NET MVC (<% %>). MS
- 5. Razor ➢ É uma View Engine ➢ O servidor em primeira instância lê o código escrito e interpreta primeiro o código Razor para depois enviar a página HTML para o navegador. MS
- 6. Razor ➢ Todas as expressões Razor devem obrigatoriamente iniciar com o caractere @. Toda a codificação Razor fica dentro de um bloco {} MS
- 7. Razor vs ASPX ➢ Declaração e uso de variáveis Razor ASPX MS
- 9. Razor vs ASPX ➢ Laços MS
- 10. Razor vs ASPX ➢ Texto e código MS
- 11. Razor vs ASPX ➢ Comentários MS
- 12. Razor vs ASPX ➢ Exercícios: Usando as Razor Page: ➢ Altere o arquivo index.cshtml para gerar a seguinte tela para o usuário: MS
- 13. ViewData, ViwBag e Strogl typed Views ➢ São utilizados para transportar pequenas quantidades de dados entre views ou de controllers para views . MS
- 14. ViewData, ViwBag e Strogl typed Views ➢ Os objetos ViewData e ViewBag podem ser aplicados para: ➢ Incorporar listas suspensas de dados de pesquisa em uma entidade ➢ Actuar como um widget de perfil de usuário ➢ Actuar pequenas quantidades de dados agregados ➢ Já o objeto TempData trabalha bem em um único cenário: ➢ Passar dados entre a solicitação HTTP actual e a próxima requisição; (Permite que armazenar dados que persiste mesmo após um redirect. Para isso internamente ele usa o objecto Session.) MS
- 15. ViewData, ViwBag e Strogl typed Views ViewData ➢ Os dados viajam do controlador para a view através de um dicionário ViewDataDictionary. A propriedade dictionary ViewData pode ser usada para preencher os dados que você deseja passar para uma view MS
- 16. ViewData, ViwBag e Strogl typed Views ViewData ViewData["mensagem"] = “Bem vindo a PW"; MS
- 17. ViewData, ViwBag e Strogl typed Views ViewBag ➢ ViewBag é utilizada para transmitir dados da camada de controle para a camada de apresentação. Para adicionar um item à propriedade ViewBag, tem que se definir uma chave para esse item. MS
- 18. ViewData, ViwBag e Strogl typed Views ViewBag ➢ Apresenta algumas desvantagens. Por exemplo, como as chaves são adicionadas dinamicamente, não é possível garantir a existência dessas chaves em tempo de compilação. Considere o código abaixo. MS
- 19. ViewData, ViwBag e Strogl typed Views Strongly typed views ➢ Apresenta-se como alternativa para a Viwbags. ➢ São View Fortemente tipadas ➢ Com esse recurso podemos fixar, em tempo de compilação, o tipo do objecto que será transferido da camada de controle para a camada de apresentação. Uma vez que o tipo desse objecto foi fixado, o compilador é capaz de verificar a validade do código, evitando eventuais erros de execução. MS
- 20. ViewData, ViwBag e Strogl typed Views Exercícios 1. Para cada página do seu projecto, exiba a hora actual do servidor e uma mensagem de boas vindas. 2. Usando a ViewData, exiba no index.cshtml o título e os respectivos elementos de uma lista de productos. 3. Crie uma lista de produtos no controller. MS
- 21. ViewData, ViwBag e Strogl typed Views Exercícios Vamos “tipar” fortemente a View X com a directiva @Model. Aqui, @model indica que a view é fortemente tipada com a classe X. Portanto, pode acessar directamente suas propriedades (Id, Nome, Turma) desta classe.. MS
- 22. ViewData, ViwBag e Strogl typed Views Benefícios de Views Fortemente Tipadas: ➢ Compilação Forte: ➢ IntelliSense ➢ Manutenção MS
- 23. ViewData, ViwBag e Strogl typed Views Exercícios Para o exercício 3, no Controller X, crie uma classe estudante com atributos: Id, Nome, Turma MS
- 24. ViewData, ViwBag e Strogl typed Views Exercícios Instancie um abjecto pertencente a esta classe e atribua alguns valores aos atributos. Retorne este objecto para a View. MS
- 25. ViewData, ViwBag e Strogl typed Views TPC Para o exercício anterior, retorne uma lista de 5 estudantes. MS
- 26. HTML Helpers Vamos implementar uma classe Producto, com as seguintes informações: Id, Nome, Preco. A implementação da classe deve ser feita no directório Models. De seguida, no repectivo Controller, vamos instanciar um objecto Producto e passar para ele alguns atributos: MS
- 27. HTML Helpers MS
- 28. HTML Helpers No respective Arquivo x.cshtml, no directório Views, vamos criar um formulário e preencher os campos através das informaçoes atribuídas no Controller. Usaremos a directiva @model. A directiva @model informa qual tipo de objecto a view vai receber, possibilitando acessar propriedades do modelo diretamente na view. MS
- 29. HTML Helpers Não esqueça de informar o namespace: @Model teu_projecto.Models.Classe MS
- 30. HTML Helpers MS
- 31. HTML Helpers ➢ A função das páginas CSHTML é gerar hipertexto XHTML para enviar aos navegadores dos usuários. Os arquivos .cshtml misturam tags XHTML com scripts de servidor escritos em C#. ➢Essa mistura pode prejudicar a legibilidade do código em alguns casos. Além disso, a manutenção da aplicação pode se tornar mais complexa MS
- 32. HTML Helpers Considere a criação de um link utilizando diretamente as tags HTML. Se o formato da url para acessar a acção Index do controlador fcti for alterado, o código acima deverá ser modificado. Para facilitar a manutenção do código das páginas CSHTML, o ASP.NET MVC oferece os chamados HTML Helpers. <a href="/ fcti / Index /"> Turmas </a> MS
- 33. HTML Helpers Os Tag Helpers permitem que o código do lado do servidor participe da criação e renderização de elementos HTML em arquivos Razor. Permitem Encapsular um código XHTML. @Html.ActionLink (“Turmas”, “Index”, “fcti”) Agora, se o formato da url para acessar a ação Index do controlador Editora for alterado, o código acima não precisa ser alterado. MS
- 34. HTML Helpers ActionLink Helper ➢ É utilizado para gerar os links das páginas de uma aplicação web. ➢ A forma mais simples de utilizá-lo é passar a ele dois parâmetros: o texto e a ação associados ao link desejado. Nesse caso, o link gerado pelo helper ActionLink estará associado ao controlador correspondente a página na qual o link foi inserido. @Html.ActionLink (“Texto para o usuário”, “Action”) MS
- 35. HTML Helpers ActionLink Helper Podemos definir o controlador desejado explicitamente. Para isso, é necessário passar um terceiro parâmetro para o método ActionLink @Html.ActionLink (“Texto para o usuário”, “Action”, “Controlador”) MS
- 36. HTML Helpers BeginForm e EndForm Helpers Facilitam a criação de formulários. MS
- 37. HTML Helpers BeginForm e EndForm Helpers Por padrão, um formulário criado com o helper BeginForm enviará requisições à ação associada à url actual. Contudo, podemos definir explicitamente uma outra ação para receber essas requisições. Veja um exemplo no código abaixo. MS
- 38. HTML Helpers BeginForm e EndForm Helpers Por padrão, os formulários gerados pelo helper BeginForm fazem requisições do tipo POST. Nesse caso, as ações associadas a esses formulários devem ser anotadas com HttpPost para indicar o tipo de requisição HTTP esperado. MS
- 39. HTML Helpers HTML Helpers ➢ São métodos fornecidos pelo ASP.NET MVC que geram marcação HTML usando código C# diretamente dentro dos arquivos de visualização do Razor. ➢ São essencialmente métodos C# que retornam strings HTML e são usados dentro de blocos de código do Razor MS
- 40. HTML Helpers Tag helpers ➢ Permitem que os desenvolvedores criem elementos personalizados semelhantes a HTML que encapsulam a lógica do lado do servidor, tornando o código mais legível. MS
- 41. HTML Helpers Principais Tag Helpers - Básicos ➢ @Html.BeginForm ➢ @Html.EndForm ➢ @Html.TextBox ➢ @Html.TextArea ➢ @Html.Password ➢ @Html.Hidden ➢ @Html.CheckBox ➢ @Html.RadioButton ➢ @Html.DropDownList ➢ @Html.ListBox MS
- 42. HTML Helpers Principais Tag Helpers – Strongly type html helpers ➢ @Html.TextBoxFor ➢ @Html.TextAreaFor ➢ @Html.PasswordFor ➢ @Html.HiddenFor ➢ @Html.CheckBoxFor ➢ @Html.RadioButtonFor ➢ @Html.DropDownListFor ➢ @Html.ListBoxFor MS
- 43. HTML Helpers CheckBox - @html.CheckBox HTML @Html.CheckBox O valor enviado através do checkbox inserido no formulário será armazenado na propriedade Aceito do contrato enviado como parâmetro para a ação Cadastra(). MS
- 44. HTML Helpers ChecTextBoxkBox - @html.TextBox HTML @Helper.TextBox. MS
- 45. HTML Helpers ChecTextBoxkBox - @html.TextArea HTML @html.TextArea MS
- 46. HTML Helpers ChecTextBoxkBox - @html.RadioButton HTML @html.RadioButton MS
- 47. HTML Helpers ChecTextBoxkBox - @html.Hidden HTML @html.Hidden MS
- 48. HTML Helpers ChecTextBoxkBox - @html.Password HTML @html.Password MS
- 49. HTML Helpers Strongly Typed Views Se os HTML Helpers forem utilizados de maneira análoga à mostrada anteriormente, a probabilidade de ocorrer um erro de digitação é alta. A forma que os HTML Helpers foram aplicados não permite que o compilador verifique a existência das propriedades associadas aos elementos dos formulários. O código anterior supõe que o objecto recebido como parâmetro pela acção associada ao formulário onde o checkbox foi inserido possua uma propriedade chamada Aceito. Essa propriedade pode não existir. MS
- 50. HTML Helpers Strongly Typed Views Para evitar esse tipo de problema, podemos utilizar a seguinte sintaxe em telas fortemente tipadas: Com essa sintaxe, o compilador tem condições de verificar a existência das propriedades. Sendo assim, ele produzirá um erro de compilação se uma propriedade inexistente for utilizada. MS
- 56. HTML Helpers DropDownList Helper Considere uma aplicação para cadastrar livros de uma biblioteca. Quando um livro é cadastro, o usuário podem escolher a editora desse livro. A editora pode ser selecionada através de um drop down list Para criar um drop down list, podemos utilizar o HTML Helper DropDownList.cshtml O primeiro passo para utilizar o helper DropDownList é criar uma SelectList na camada de controle com as opções que o usuário poderá selecionar. MS
- 57. HTML Helpers DropDownList Helper O segundo passo é adicionar o helper DropDownList na camada de apresentação MS
- 58. HTML Helpers EditorFor MS Considere a seguinte entidade.
- 59. HTML Helpers EditorFor Para editar os dados de uma editora, temos uma página conforme o exemplo abaixo MS
- 60. HTML Helpers EditorFor Para cada propriedade da entidade Editora, utilizamos um helper para gerar o código HTML necessário para a entrada de dados. Por exemplo, no caso das propriedades Nome e Email, utilizamos o Helper TextBox. Para a propriedade booleana IsAtivo, utilizamos o helper CheckBox. No caso so das propriedades Nome e Email, utilizamos o Helper TextBox. Para a propriedade booleana IsAtivo, utilizamos o helper CheckBox. O MS
- 62. HTML Helpers EditorFor Para personalizar o funcionamento do helper EditorFor, podemos utilizar algumas anotações na entidade Editora. Nesse caso, podemos aplicar a anotação MultilineText na propriedade Descricao. MS
- 64. HTML Helpers EditorForModel Também temos o helper EditorForModel para construir um formulário completo com base nas propriedades de uma entidade. Esse helper seguirá a mesma abordagem do EditorFor. Ou seja, para cada propriedade do Model, ele utilizará o helper apropriado. MS
- 65. HTML Helpers TPC Implemente a estrutura abaixo: 04 Views: Home: Com 03 links, que levam a 3 páginas, onde cada página tem uma implementação do formulário em anexo: ➢ Usando HTML Simples, htmlHelpers e Strongly Typed Views. MS
- 66. HTML Helpers MS
- 67. MS
- 68. HTML Helpers TPC Preencha os dados do formulário através das informações atribuídas ao objecto estudante. Para o cenário 1 (HtmlSimples), as informações devem ser passadas através da propriedade ViewBag. MS
- 69. HTML Helpers MS