Escolha uma Página
Como hospedar sua aplicação Asp.Net Core MVC (inclusive 2.0) fora do Azure

Como hospedar sua aplicação Asp.Net Core MVC (inclusive 2.0) fora do Azure

Por menos de U$3/mês você pode ter sua aplicação ASP.NET Core MVC 2.0 rodando num provedor realmente especializado em ASP.NET, com direito a e-mail, banco de dados MS SQL e um infinidade de recursos.

Usando Visual Studio 2017 versão comunitária (grátis) você consegue instalar sua aplicação ASP.NET Core 2.0 MVC 6  num provedor especializado e com alta velocidade – e com um custo muito baixo. Esqueça Godaddy, LOCAWEB, e mesmo Azure (que acaba custando uma tinta quanto mais você usa).

Depois de muito pesquisar e apanhar, acabei descobrindo o provedor SmarterASP.NET..Em menos de uma hora, estava com minha aplicação Core 2.0 rodando. Aqui vai um passo a passo com dicas importantes. Detalhe importante: se você duvidar, pode ter 60 dias de uso grátis!!! Ou seja, você pode comprovar tudo o que estou falando aqui sem gastar um único centavo. Se escolher um plano pago você pode usar qualquer cartão de crédito (ou pagar com PAY-PAL). Se não gostar eles devolvem seu dinheiro.

Passo 1 – Incrição

Vá em SmarterASP.NET. NÃO se preocupe, este é o único formulário em inglês. Todo seu painel pode ser usado em português.

Escolha o plano 60 dias grátis, se não quiser pagar nada agora, Em segundos você recebe um e-mail de confirmação, podendo já acessar e publicar sua aplicação CORE MVC.

A primeira grata surpresa: você ganha um domínio prontinho, seu, para testar sua aplicação na WEB (depois você aponta um domínio seu, não se preocupe agora).

Passo 2 – Acesso

Clique no link recebido por e-mail enviado pela SmarterASP.NET. . Você já pode acessar seu painel. Escilha Português se não quiser inglês. Ao acessar, se o sistema perguntar onde quer seu servidor (USA ou Europa), defina onde quer. Eu defini USA e roda rapisíssimo, fiquei impressionado! Você vai ter de cara um domínio tipo seunomedeusuario-001-site1.htempurl.com


Passo 3 – Pegue os dados de Deploy para seu Visual Studio

Você não vai precisar usar FTP. Vai subir sua aplicação via Visual Studio e comprovar que é rapidíssimo comparada a qualquer subida via FTP. Clique em Sites e depois em Mostrar Informações Web Deploy. Não se preocupe em copiar nada.dados para visual studio

Clicando e Mostrar informações abre um painel abaixo:

Deixe VS Estado como ON (verde). Clique no botão “Se quiser publicar configuração”. Os lugares que risquei em amarelo vao ter seu nome de usuário.

Salve em seu disco local o arquivo Site1. Este é um arquivo com extensão .PubblishSettings, próprio para o Visual Studio. Seu conteúdo é este:

Passo 4 – Abra sua aplicação no Visual Studio e instale o arquivo para PublishSettings

Clique no Solution Explorer do Visual Studio, no lado direito, no nome do seu projeto (com o botão direito). Escolha a opção Publishing.

PUBLISH


Clique em Create new profile:

create new profile


Clique em Import Profile e dê OK

import profile


Escolha o Arquivo Site1 que foi gravado no seu disco local:

arquivo site1

Clique no botão Publish. O Visual Studio iniciará a subida da sua aplicação, que você notará que é bem rápida.

publish

Uma dica importante: na primeira vez, ANTES de clicar no botão PUBLISH NO VISUAL STUDIO, CLIQUE EM settings, que fica no lado direito do painel de publicação (as vez fica meio escondido na tela). Clique em VALIDAR CONEXÃO (validate connection). Se o sistema reclamar alguma coisa de certificado, diz que sim, que aceita o certificado e pronto. Clique em SALVAR (save) e agora sim, pode publicar.

As vezes o Visual Studio “esquece” que você já fez isso e começa a dar erro na publicação do site. É só repetir a operação acima e tudo volta ao normal. A partir da segunda vez que você publica a atualização é rapidíssima! É a vantagem desse provedor permitir WEB DEPLOY, que só atualiza os arquivos que efetivamente mudaram… Se for fazer pelo FTP do Visual Studio, que é burrinho, pode sair e voltar um bom tempo depois (pois ele sobe todos os arquivos de novo, sempre). É melhor – neste caso, publicar num diretório e subir com o Filezilla, parametrizando-o para só enviar arquivos com novas datas. Mas certamente você vai esquecer que existe FTP usando o WEBDEPLOY…

Outras vantagens:

Você pode criar um número ilimitado de bancos de dados, inclusive SQL. Não paga nada a mais por isso. Para as minhas aplicações isso é muito bom. O desempenho dos servidores é ótimo.

Se tiver algum problema:

  • O provedor tem uma base de conhecimento com uma série de bons artigos explicativos, agrupados por tópicos. Tem tudo ali que em geral os clientes podem ter dúvidas;
  • Escreva para o suporte. Testei e me responderam rapidinho (nem acreditei, estou acostumado com o padrão 24 horas da Locaweb). O suporte é mesmo 24 x 7! Basta abrir um tíquete de suporte na Central de Ajuda.

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.

Você quer ter uma franquia de hospedagem com tudo para marketing digital e faturamento recorrente?

franquia builderall business

Adicionando um modelo (model) a um aplicativo ASP.NET Core MVC com o Visual Studio 2017

Adicionando um modelo (model) a um aplicativo ASP.NET Core MVC com o Visual Studio 2017

Neste artigo veremos a parte M, “Modelo”, do aplicativo MVC. O exemplos mostrará como gerenciar filmes em um banco de dados.

Criando Modelos (Models)

Esta é a parte mais complexa do modelo MVC. Ao menos para quem está iniciando. É que os modelos são classes que utilizam o chamado Entity Framework Core (EF Core) para se conectar “fisicamente” com o banco de dados (database). O EF Core é que literalmente acessa as bases de dados. O EF Core é uma estrutura de mapeamento objeto-relacional (ORM – object-relational mapping) que simplifica o código de acesso a dados que você precisa escrever. O EF Core suporta muitos mecanismos de banco de dados. Mas note, são bancos de dados relacionais (como MS SQL, MYSQL e outros SQLs – Structured Query Languages). Não tem nada a ver com NoSQL, Voldemort, MongoDB, Tokyo Tyrant e CouchDB, que são bancos de dados não-relacionais).

Se você gosta de aprender escrevendo código, a Microsoft recomenda um de seus guias de Introdução para que você comece a aprender bem o que é o EF Core (prepare-se, são 101 artigos em inglês!).

Muito bem, os modelos que criamos na verdade são classes. Eles apenas definem as propriedades dos dados que serão armazenados no banco de dados. As classes que escrevemos são nossos modelo, também conhecidos como modelos POCO, que usam – no caso do Core MVC – o Entity Framework Core para fazer 3 grandes trabalhos:

  • Você pode não ter banco de dados algum e resolve escrever todas as classes do seu modelo de negócio primeiro. A partir dessa classe, em puro texto, o EF Core ajuda a construir o database, tabela por tabela, índice por índice, sem que você tenha de fazer isso…
  • Você já tem o database prontinho antes de começar a escrever sua aplicação (populado ou não com dados). O EF Core consegue ler essas tabelas e escrever para nós todas as classes POCO… Ou seja, gera todos os modelos a partir do database.
  • Se, durante o desenvolvimento da sua aplicação você for alterando as classes (acrescentado, eliminando ou alterando campos de suas tabelas relacionais, ou criando novas relações, o EF Core permite manter a integridade entre suas classes alteradas e o banco de dados físico. Ou seja, o database é sempre um espelho das suas classes dentro da aplicação.

Parece um pouco mágico, mas é isso mesmo. Quem odeia banco de dados, começa pelas classes. É o jeito chamado “Classes Primeiro” (classes first). Quem gosta de banco de dados, em geral começa pelo database e depois o acopla à aplicação (“Database First“).

Neste tutorial escreveremos primeiro as classes do modelo e o EF Core criará o banco de dados para nós. ASP.NET Core – Banco de Dados Existente.

POCO (de "plain-old CLR Objects).

 

Adicionando uma classe de modelo de dados

Nota: Os modelos ASP.NET Core 2.0 já implementam a pasta Models (Modelos). No Solution Explorer, clique com o botão direito do mouse no projeto MvcMovie> Add > New Folder. Nomeie a nova pasta  como Models.

Clique com o botão direito na pasta Models. Escolha > Add > Class. Nomeie a classe como Movie e adicione as seguintes propriedades:

 

O campo ID é requerido pelo banco de dados para a chave primária. Sempre que você usa ID, o EF Core interpreta que esse campo é chave e você não se preocupa em definir isso.

DICA: se você quando estiver modelando for usar uma chave com um nome diferente de ID, você pode forçar a barra e definir que o campo é chave, colocando, antes de sua linha, a expressão [Key] (sim, entre colchetes e com K maiúsculo. Nesse caso, é preciso incluir using System.ComponentModel.DataAnnotations;. Se você esquecer, o Visual Studio vai lhe sugerir rapidinho. Veja como ficaria:

DICA: Note que todos os nomes de campos começam com letra maiúscula. Essa é uma convenção no Core MVC. Acostume-se a seguir essa convenção e você evitará avisos de “warning” (alerta) quando compilar a aplicação…

DICA 2: Sempre que criar ou alterar qualquer modelo. logo em seguida clique em Build > Solution ou em Build > NomeDoSeuProjeto. Primeiro, isso ajuda a verificar se o projeto está sem erros. Segundo, será impossível continuar e gerar o banco de dados sem fazer o Build primeiro (muita gente se atrapalha com isso).

DICA 3: É possível (além do menu te topo), ir na janela do Solution Explorer, clicar com o botão direito no Nome do Projeto e escolher o opção Build.

Pronto. Temos nosso primeiro Modelo da nossa aplicação MVC;

clique com o botão direito do mouse na pasta Controladores> Adicionar> Controlador.

Scaffolding um Controlador (ou seja, gerando um arquivo tipo controler)

Não tenho uma palavra para Scaffolding ´então prefiro deixar a palavra em inglês mesmo. O Scaffold faz uma varredura no arquivo da classe de um modelo que você escolhe e permite gerar o arquivo controlador (controller).

Depois que você fez o Build assim que definiu o modelo, no próprio Solution Explorer clique no folder Controllers (que normalmente é instalado pelo template do Visual Studio), clique com o botão direito do mouse e escolha Add > Controller (esqueça outras opções por enquanto).

add controller

Na janela que vai aparecer, (Add MVC Dependencies), selecione Minimal Dependencies e clique em Add.

add mvc dependencies

Quando você implementa os modelos, o Visual Studio precisa que você adiciona as dependências necessárias para implementar um controlador (que são necessárias para o Scaffold). Senão o controlador não é criado, digamos, “automaticamente”.

Por isso é preciso a clicar na pasta de controladores (Controllers) e escolher Add > Controller.

No nosso caso, depois de definir Minimal Dependencies, como estamos iniciando a solução, o Visual Studio implementa as dependências na primeira vez que você pede para adicionar um controlador.

A mancada é que é preciso pedir de novo, pois agora ele tem as dependências e não vai mostrar a janelinha de Add MVC Dependencias.

Volte para o Solution Explorer, clique na pasta Controllers e com o botão direito do mouse escolha Add > Controller.

add controller

Na janela Add Scaffold, escolha a opção MVC Controller with Views, using Entity Framework e depois clique em Add.

add scaffold

DICA: Tem muita gente que se perde e não acha o tal Add… De fato o Add desaparece se você está “debugando” a aplicação. Saia do modo debug e tudo aparece novamente… O Visual Studio é bem espertinho e nas versões mais recentes não permite nem que você edite a página aberta de um arquivo Model ou de um arquivo Controller. A única coisa em que pode editar durante o debug são páginas de Views, pois aí não é necessário recompilar e você pode ver de imediato no navegador as alterações nas páginas .cshtml simplesmente dando um refresh (F5 ou CTRL+F5) no navegador. Nas páginas com .cs, nem sonhar editar em modo debug.

Aparecendo a janela Add Controller:

  • Model Class (classe do modelo): defina Movie no select (MvcMovie.Models)
  • Data context class: selecione o ícone de + e adicione o default (padrão) MvcMovie.Models.MvcMovieContext

add controller window

  • Views: fique com o default (padrão) de cada opção selecionada
  • Controller name: dique com o default (padrão) MoviesController
  • Clique em Add.

add controller

O Visual Studio cria:

  • Uma classe de contexto do banco de dados Entity Framework Core (Data/MvcMovieContext.cs)
  • Um controlador para Movies (Controllers/MoviesController.cs)
  • As páginas de visualização (Views Razor)  para Create, Edit,Delete, Detais e Index (Criar, Excluir, Detalhes, Editar e Índice). Esses arquivos podem ser visualizados no Diretório Views na pasta MOvies (que também foi criado pelo Scafold): View/Movies/*.cshtml.

O processo de scaffolding também gerou o arquivo controlador (controller) e, dentro dele, todas as ações (Actions) para fazer o chamado CRUD (create, read, update, e delete). Aliás, o CRUD do Visual Studio é mais “amplo”, pois inclui a página índice (Index) e um método simples para testar se existe ou não algum dado no banco de dados na tabela referente a esse modelo que originou o controlador (controller).

Em breve teremos uma aplicação web totalmente funcional que permite gerenciar uma base de dados de filmes. Nesse momento, se você executar o aplicativo e clicar no link MvcMovie, você receberá um erro semelhante ao seguinte:

É que  começamos este projeto no modo “odigo primeiro, banco de dados depois”. Ainda não existe, fisicamente, o database.

Para gerarmos o database, usaremos um recurso poderoso do EF Core, chamado Migrations.

Migrations, entre outras coisas, permite que você crie um banco de dados que corresponda ao seu modelo de dados. E que também atualize o esquema do banco de dados sempre que seu modelo de dados mudar. Ou seja, ao alterar uma classe de um modelo existente ou ao acrescentar uma nova classe, você roda o Migrations (Migrações) e literalmente ele migra as mudanças para o banco de dados (database). Essa sincronização que é feita pelo Migrations permite espelhar todas as mudanças que você efetivar, mantendo a integridade entre  a aplicação e a base de dados. Inclusive se você fizer uma mudança que não deveria ter feito, é possível migrar para trás, ou seja, voltar a qualquer estado anterior… É poderoso.

DICA: Se você for curioso, vai ver que além de criar a pasta Data/Migrations dentro da sua aplicação, onde cada migração é guardada, a ferramenta Migrations também cria uma tabela Migrations no seu banco de dados, onde armazena dados e horários de todas as migrações realizadas.

Adicionando ferramentas de EF e executando a migração inicial

Pode ser que você já tenha instalado as ferramentas de EF Core na instalação do Visual Studio 2017. Mas não custa nada verificar.

Nesta seção, você usará o Package Manager Console (PMc – Console do Gerenciador de Pacotes) para:

  • Adicionar o pacote Entity Framework Core Tools. Este pacote é necessário para adicionar migrações e atualizar o banco de dados.
  • Depois, adicionar uma migração inicial.
  • Depois, atualizar o banco de dados com a migração inicial.

No menu Tools (Ferramentas), selecione NuGet Package Manager > Package Manager Console (Console do Gerenciador de Pacotes).

Vai aparecer uma janela (em geral na parte de baixo do Visual Studio) com o nome de PMC. Nesta janela você vai fazer as 3 ações acima, cada linha mostrada abaixo corresponde a uma ação acima.

DICA: se você não achar o PMC no menu de Tools (Ferramentas), é muito provável que esteja em DEBUG… Saia do modo DEBUG e o PMC irá reaparecer. O VIsual Studio não permite instalar pacotes no modo DEBUG…

pmc

Digite exatamente como aparece no exemplo abaixo:

Nota: veja CLI approach (abordagem) se você tiver problemas com o PMC.

O comando Add-Migration cria um código para criar o esquema inicial do banco de dados.

O esquema é baseado no modelo especificado no DbContext (no arquivo *Data/MvcMovieContext.cs).

O argumento Initial (inicial) é usado para nomear as migrações. Você pode usar qualquer nome, mas, por convenção, você escolhe um nome que descreve a nova migração que estiver fazendo. Consulte Introdução às migrações para obter mais informações.

O comando Update-Database executa o método Up no arquivo Migrations /<time-stamp>_InitialCreate.cs, que cria o banco de dados.

Você também pode executar os passos anteriores usando a interface de linha de comando (CLI) em vez do PMC: Para isso é necessário:

  • Adicione  EF Core tooling (ferramentas do EF Core) ao arquivo .csproj.
    DICA: Para fazer a edição do arquivo, vá em Solutions Explorer, clique no nome do Projeto e com o botão direito do mouse escolha a opção Edit .cspoj. Eu já fiquei procurando esse arquivo, mas ele não fica visível no diretório raiz dentro do Visual Studio.
  • Execute os seguintes comandos do console (no diretório do projeto), depois que instalar a ferramenta:

Testando a App

  • Execute o aplicativo e clique no link MvcMovie.
  • Clique no link Create (Criar) e crie novo um filme.

movies

  • Você pode não conseguir inserir pontos decimais ou vírgulas no campo Price (Preço). Para suportar a validação jQuery para locais que não são ingleses e que usam uma vírgula (“,”) no lugar de um ponto decimal, ou para usar formatos de data diferentes do que se usa nos EUA-Inglaterra, você deverá tomar algumas medidas para globalizar seu aplicativo. Consulte Recursos Adicionais para obter mais informações. Por enquanto, basta inserir números inteiros como 10.
  • Em algumas localidades você precisa especificar o formato da data. É possível fazer isso no próprio arquivo do modelo. Veja o código destacado abaixo.

(Vamos falar sobre DataAnnotations mais tarde no tutorial).

Ao clicar  em Create, preencher os dados e enviar,fizemos o form (formulário) ser postado para o servidor, onde as informações do filme foram salvas no banco de dados. O aplicativo redireciona para a URL /Movies, onde as informações do filme recém-criadas são exibidas (na verdade, este é o Arquivo Index.cshtml).

movies

Crie mais algumas entradas de filmes. Experimente os links Edit, Detais e Delete (Editar, Detalhes e Apagar), que são todos funcionais.

Injeção de dependência (Dependency Injection)

No diretório raiz do projeto, abra o arquivo Startup.cs e examine o método ConfigureServices:

O contexto do banco de dados é usado em todos os métodos CRUD dentro do controler, usando a variável _context. O formato em geral é:

_context.NomeDoModelo.AlgumaCoisaASerFeita... (pegar todos dados, pegar o primeiro item da tabela, o último, filtrar alguns dados, etc)

Note que em nenhum momento foi feito um chamado para conexão ao bando de dados e menos ainda para abrir ou fechar uma conexão. Isso faz parte dos serviços implantados no arquivo Startup.cs aonde, além do contexto ser definido, pode-se passar os parâmetros de conexão ao servidor. A vantagem é que na programação você se esquece do mundo físico e, através dos contextos, apenas acessa os dados da tabela que quiser, sem se preocupar e nem escrever uma única linha sobre conexões. Uma vez que seu database é injetado na aplicação, fica disponível para qualquer controlador. (Controller).

Contextdestacado acima mostra o contexto do banco de dados do filme que está sendo adicionado ao contêiner de Injeção de Dependência. A linha que segue os serviços.AddDbContext <MvcMovieContext> (opções => não é mostrada (veja seu código). Especifica o banco de dados a ser usado e a seqüência de conexão. => É um operador lambda. Abra o arquivo Controllers / MoviesController.cs e examine O construtor:

Passando dados dos Controladores (Controllers) para os Visualizadores (Views)

Existem três maneiras de passar informações de um controlador  (Controller) para um visualizador (View) em ASP.NET:

  • Como um modelo de modelo fortemente digitado (os dados são empacotados de acordo com a definição do modelo e seus relacionamentos;
  • Como um tipo dinâmico (usando @model dynamic);
  • Usando o ViewBag ou ViewData (ambos são dinâmicos também).

Vamos nos concentrar na primeira opção.

Modelos fortemente digitados e a palavra-chave @model

No início deste tutorial, você viu como um controlador pode passar dados ou objetos para uma visualização usando o dicionário ViewData.

O dicionário ViewData é um objeto dinâmico que fornece uma forma conveniente para transmitir informações a uma visualização. O MVC também fornece a capacidade de passar objetos de modelo fortemente digitados para uma visualização. Esta abordagem fortemente digitada permite uma melhor verificação de tempo de compilação do seu código. O mecanismo de “scaffolding” usou essa abordagem (ou seja, passando um modelo fortemente digitado). Pegando a classe MoviesController, criou os métodos (Acttions dos Controllers)  e os visualizadores (as Views). Olhando o método da ação Details, gerado no arquivo Controllers/MoviesController.cs, encontramos:

Passando dados para Controladores (Controllers) através de Rotas (Routes)

O parâmetro id é geralmente passado para o controlador junto com dados de rota (podem ser passados vários parâmetros no formato rota/parâmetro 1/parâmetro 2/parâmetro n…).

Por exemplo, http://localhost:1234/movies/details/1 define:

  • O controlador, no caso Movies. O controlador é sempre o primeiro segmento da rota (route). Observe que não é preciso passar o nome completo do arquivo controlador, que é MoviesController.cs. O MVC é espertinho e ele mesmo acrescenta Controller.cs ao primeiro nome da rota.
  • A ação (Action), que neste caso é Details (a ação é sempre o segundo segmento da rota).
  • O id que neste caso é 1 (o último segmento da rota – ou URL). Os parâmetros sempre são a última parte da rota.

Também podemos passar o id com uma seqüência de consulta, tipo GET, que tão bem conhecemos:

http://localhost:1234/movies/details?id=1

Nem sempre precisamos passar um parâmetro para uma página e há casos em que eles são opcionais. Passamos o parâmetro quando queremos filtrar, de alguma forma, os dados da visualização. E não passados quando queremos ver ou poder consultar todos os dados do modelo.

Nestes casos, o parâmetro id é definido como um tipo nullable (valor que pode ser nulo). Por isso é que no método da ação Details, acima,  (int? id). Na prática isso é uma abreviação: int?  significa que se a Ação (action) não receber um inteiro, vai ter valor nulo (null).

No nosso exemplo, ao Clicar em Details na View Index.html (que lista todos os filmes). queremos ver os detalhes de um (apenas um) filme específico.

A URL que vai ser entregue para o controlador terá o seguinte formato:

http://localhost:1234/movies/details/<IdDoFIlmeQueEscolhemos>

Clicando a View, o MVC escolhe o controlador (Controller), escolhe a ação (Action) e entrega o parâmetro id. Agora quem tem de trabalhar é o controlador. Observe o código abaixo:

O controlado precisar ir buscar esses dados no nosso modelo: _context.Movie diz aonde estão os dados que deve pegar.

Esta id – em tese – deve corresponder a um único filme, uma vez que id é campo chave (Key) e não tem repetição.

.SingleOrDefaulAsync() diz mais ou menos o seguinte: procure o primeiro “registro” onde encontrar  a id e pare por aí (como se fosse um “Select Top(1) from Movies). E se não achar nada? Então retorne um valor nulo (null) como padrão (Default).

E onde está o Where? Está na expressão que usa o lambda =>: (m => m.ID = id). Que ajuda a completar o select, que seria assim: “Select Top(1) from Movies as m Where m.ID = id” .

As leituras feitas pelo controlador podem ser síncronas ou assíncronas. O scaffolding, na montagem do controller, sempre que possível, define leituras assíncronas. Assim a execução do program não empaca na linha que pede os dados, até que o servidor os retorne, pois pode seguir adiantante. Por isso a palavra await antes de _context.Movie. É uma ordem tipo vai buscar esses dados e me devolva assim que puder). Por isso, ao pedir um único registro, a expressão .SingleOrDefaultAsync().  Então, se usar awat (algo como reserva aí!) o tipo de solicitação sempre tem Async como pós-fixo.

Note, também, que a própria ação (Action), na definição de Detail, contém public async Task…

Devolvendo os dados para o Visualizador (View)

A variável movie, no código acima, é que acaba guardando uma instância do modelo Movie. Essa instância, com os dados já lidos, é passada como um  modelo completo para o visualizador (View) Details:

Examine o conteúdo do arquivo Views/Movies/Details.cshtml :

Ao incluir a instrução @model logo no topo do arquivo de exibição, você pode especificar o tipo de objeto que o visualizador (View) espera e deve receber. Assim como criou o controlador (Controller) de filmes (MoviesController.cs), o Visual Studio incluiu automaticamente a instrução @model na parte superior dos arquivos de visualização (Views) que gerou. No caso, em Details.cshtml:

Esta diretiva @model permite que você acesse o filme que o controlador devolveu para o visualizador (View) usando um objeto de modelo “fortemente digitado”.

Por exemplo, no visualizador Details.cshtml, o código passa cada campo de do modelo de Movie (filme) para o DisplayNameFor e o DisplayFor, que são na verdade HTML Helpers que podem trabalhar, diretamente, com os nome dos campos do modelo “fortemente digitado”. basta usar,dentro dos parênteses de cada Helper,  a expressão model => model.NomeDoCampoFortmenteDigitado.

Os métodos e visualizações Create (Criar) e Edit (Editar) também passam um objeto do modelo Movie (Filme) .

Se você examinar o visualizador Index, arquivo Index.cshtml, notará algumas diferenças. O objetivo da página Index é apresentar a lista de Filmes que já foram registrados. Logo, o controlador Movies, na ação (Action) Index, tem de buscar no seu database uma LISTA de filmes – e não apenas um único filme, como nos casos de Details (Detalhes) e Edit (Edição).

O código passa esta lista de Filmes do método da ação (Action) Index para o visualizador (VIew) Index:

O controlador recebe uma solicitação na ação (Action) Index sem nenhum parâmetro. Obviamente, se sua base de dados estiver populada, haverá um conjunto de filmes. O comando acima devolve, de forma assíncrona, em formato de Lista, todos os itens encontrados (pois não foi estabelecida nenhuma cláusula tipo Where ou tipo Top(X)).

Repare que no visualizador (View) Index, o scaffolding incluiu no topo a expressão IENumerable. Ou seja, o visualizador espera receber um modelo que é uma listae não um único elemento para editar ou mostrar detalhes.

 

Esta diretiva @model IENumerable permite que você transfira a lista de filmes que o controlador (Controller) passou para o visualizador (View), usando um modelo de objeto “fortemente digitado”. Portanto, é possível usar HTML Helpers tendo diretamente o nome dos campos do modelo, como já vimos acima: (model => model.NomeDoCampoDesejado).

O segundo ponto: o visualizador não sabe quantos itens virão na lista entregue pelo controlador. Por isso, o código em Index.cshtml deve percorrer o modelo recebido – capturando os filmes. Isso é feito com a instrução foreach – que também usa os nomes dos campo de nosso modelo fortemente digitado. O foreach, no caso do Index.cshtml abaixo, pega cada item recebido, guarda numa variável local chamada item e permite apresentar os dados dentro de um “loop” que acaba quando for mostrado o último item da lista.

Como o nosso Modelo é um objeto “fortemente digitado” (como um objeto IEnumerable<Movie>), cada item no “loop” é digitado como Movie. Entre outros benefícios, isso significa que você obtém ganha tempo na geração e compilação código. Você tem auxílio do Visual Studio para lembrar o nome de todos os campos do seu modelo:

auxilio Visual Studio páginas cshtml

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.

Você quer ter uma franquia de hospedagem com tudo para marketing digital e faturamento recorrente?

franquia builderall business

Adicionando um visualizador (view) a um aplicativo ASP.NET Core MVC com o Visual Studio 2017

Adicionando um visualizador (view) a um aplicativo ASP.NET Core MVC com o Visual Studio 2017

Aqui veremos conceitos básicos para montar arquivos de visualização. Os aquivos de visualização usam o chamado Razor, que permite colocar informações dinâmicas nas páginas HTML. Esse recurso é fascinante,  pois torna todas as páginas HTML dinâmicas – e não estáticas.

Criando uma View (visualização)

Seguido nosso tutorial, veremos como modificar a classe HelloWorldController para usar os arquivos de modelo de uma View, utilizando Razor.

O que queremos? Queremos gerar respostas HTML a um cliente.

Para isso é preciso criar um arquivo que seja um modelo de exibição. O Razor serve para isso.

Os modelos de exibição baseados em Razor sempre possuem uma extensão de arquivo .cshtml. E, em geral, estão localizados no diretório Views.

Os arquivos .cshtml  fornecem uma maneira elegante de criar saídas HTML usando C #.

Atualmente, no nosso exemplo, o método Index retorna uma seqüência de caracteres com uma mensagem que está codificada na classe do controlador.

Na classe HelloWorldController, substitua o método Index pelo seguinte código:

 

O código anterior retorna um objeto View (visualizador). Ele usa um modelo de exibição para gerar uma resposta HTML para o navegador. Os métodos do controlador (também conhecidos como métodos de ação, ou Actions), como o método de índice acima, geralmente retornam um IActionResult (ou uma classe derivada de ActionResult). Não tipos primitivos, como strings simples.

  • Clique no diretório Views e, em seguida, Add > New Folder e nome do folder (pasta) HelloWorld.
  • Com o botão direito do mouse, clique em Views/HelloWorld Add>new Item;
  • No diálogo Add New – MvcMovie:
    • No box de pesquisa , no topo do lado direito, entre com View;
    • Clique MVC View Page;
    • No nome do box, troque o nome se for necessário. Neste caso, utilize (se precisar) Index.cshtml
    • Clique em Add

adiciona view MVC

Substitua o conteúdo do arquivo de exibição Views/HelloWorld/Index.cshtml (Razor) pelo seguinte código:

Navegue até http://localhost: xxxx/HelloWorld.

O método Index no HelloWorldController não trabalhou muito.Ele apenas executou a declaração return View () .

Isso quer dizer, em outras palavras: escuta, mostra, no arquivo de exibição (View), dados que estão no modelo (model); E ponto final.

Por outro lado, no arquivo de exibição, tem uma diretiva @model, que diz qual é o modelo que será exibido.

Definido isso, o arquivo de exibição pode mostrar qualquer dado do modelo, uma vez que o controlador já disse que ele pode fazer isso.

Quando o controlador (controller) simplesmente disser View(), sem dar um nome específic de uma página visualizadora, o Core MVC assumirá que se trata de uma página tipo Index.cshtml. E, no caso do nosso exemplo, irá procurar em /Views/HelloWorld essa página index. A imagem abaixo mostra o que ocorre quando o MVC encontra essa página Index.cshtml:

página index core mvc

Se a janela do seu navegador for pequena (por exemplo, em um dispositivo móvel), você precisará alternar (toqar) no botão de navegação do Bootstrap, no canto superior direito, para ver os links Home, About e Contac:

vizualidor core mvc

Alterando Visualizadores  (views) e páginas de layout

Clique nos links do menu (MvcMovie, Home, About).

Note que cada página mostra o mesmo layout de menu.

O layout  padrão do menu é implementado no arquivo Views/Shared /Layout.cshtml.

Abra o arquivo Views/Shared/ Layout.cshtml para entender o que acontece. Este arquivo funciona como um template básico de um “container”. Tudo o que suas páginas HTML vierem a apresentar estará contido CONTIDO por este arquivo. É um recurso fascinante, pois você, nas suas outras visualizações, não precisa definir nada. Se preocupa somente com o conteúdo da página, A parte HTML que fica entre <body> e </body>.

Você pode ter diferentes layouts na sua aplicação se isso for necessário . Todas as inclusões de CSSs ficam a cargo da página de layout. Por exemplo, você pode ter um layout para uso antes do usuário fazer login e outro layout para uso depois que o usuário fizer login.

Note que nesse arquivo de layout temos @RenderBody(). RenderBody é um espaço reservado onde todas as páginas específicas de exibição que você cria aparecem, contidas pela página de layout. Por exemplo, se você selecionar o link About, a exibição de Views/Home/About.cshtml será incluída dentro do renderizador @RenderBody().

Altere o título e o link do menu no arquivo de layout

Altere o conteúdo do elemento título. Mude o texto de âncora no modelo de layout para “Movie APP” e o controlador de Home para Movies, como é mostrado abaixo:

Nota: A versão do ASP.NET Core 2.0 é ligeiramente diferente das anteriores. Não contém @inject ApplicationInsights e @ Html.Raw (JavaScriptSnippet.FullScript).

Atenção: Nós ainda não implementamos o controlador de Movies (filmes), então, se você clicar nesse link, você receberá um erro 404 (página não encontrada).

Salve suas alterações e clique no link About . Observe como o título na guia do navegador agora exibe About – Movie App em vez de About – Mvc Movie. Clique no link Contat e observe que ele também exibe Movie App. Fizemos a alteração uma única  vez no modelo de layout e passamos a ter todas as páginas no site refletindo o novo texto do link e o novo título. Examine o arquivo Views/_ViewStart.cshtml:

O arquivo Views/_ViewStart.cshtml traz o arquivo Views/Shared _Layout.cshtml para cada visualizador (View). Você pode usar a propriedade Layout para definir uma exibição de layout diferente ou configurá-la como nula para que nenhum arquivo de layout seja usado.

Altere o título da do visualizador (View) Index.

Abra Views/HelloWorld/Index.cshtml. Há dois lugares para fazer uma alteração:

  • O texto que aparece no título do navegador;
  • O cabeçalho (header) secundário (elemento <h2>).

Você os tornará um pouco diferentes para que você possa entender qual trecho de código muda o que no aplicativo.

ViewData [“Títtle”] = “Movie List”; no código acima, define a propriedade Title do dicionário ViewData como “Movie List“. A propriedade Title é usada no elemento HTML <title> na página de layout:

Salve suas alterações e navegue para http://localhost: xxxx/HelloWorld.

Observe que o título do navegador, o título principal e os títulos secundários mudaram (se você não visualizar mudanças no navegador, você pode estar visualizando conteúdo em cache. Pressione Ctrl + F5 no seu navegador para forçar a resposta do servidor a ser recarregada).

O título do navegador é criado com ViewData [“Title”] que definimos no visualizador (View) Index.cshtml e o “– Movie App” foi acrescentado seguindo a mudança que fizemos no no arquivo de layout.

Observe também como o conteúdo do modelo de Index.cshtml foi mesclado com o template de visualização Views/Shared/_Layout.cshtml, gerando uma única resposta HTML que foi enviada para o navegador. Os template (modelos) de layout tornam muito fácil fazer alterações que se aplicam  a todas as páginas do seu aplicativo.

alterando views

 

Nosso pequeno número de “dados” (neste caso, a mensagem “Hello from our View Template!!”) está até demasiadamente codificado. O aplicativo MVC tem um “V” (visualização) e agora tem um “C” (controlador), mas ainda não temos um “M” (modelo).

Passando dados do Controlador (controller) para as ações do Visualizador (View)

As ações (Actions) do controlador (Controller) são chamadas em resposta a uma solicitação de URL recebida.

Uma classe de controlador é o espaço onde você escreve o código que lida com os pedidos de navegador são recebidos.

O controlador recupera dados de uma base de dados, decide qual o tipo de resposta deve dar – e a envia de volta para o navegador, através do visualizador (View).

altera view

 

Os templates (modelos de exibição) podem ser usados ​​a partir de um controlador para gerar e formatar uma resposta em HTML para o navegador.

Os controladores (Controllers) são responsáveis ​​por fornecer os dados necessários para que um modelo de exibição dê uma resposta.

Uma boa prática recomendada: os templates (modelos de exibição) não devem executar a lógica comercial ou interagir diretamente com um banco de dados. O ideal é que um modelo de visualização sempre funcione apenas com os dados fornecidos pelo controlador (Controller).

Manter essa “separação de preocupações” ajuda a manter seu código limpo, testável e sustentável.

No nosso exemplo simples, o método de boas-vindas na classe HelloWorldController leva um nome e um parâmetro ID e, em seguida, exibe os valores diretamente para o navegador. Em vez de fazer o controlador renderizar essa resposta como uma string (texto), vamos mudar o controlador para usar um modelo de exibição (View).

O modelo de exibição irá gerar uma resposta dinâmica, o que significa que você precisa passar bits de dados apropriados do controlador (Controller) para a exibição (View) para gerar a resposta no navegador.

Você pode fazer isso fazendo com que o controlador coloque os dados dinâmicos (parâmetros) que o modelo de exibição precisa em um dicionário ViewData, que poderá ser acessado pelo modelo de exibição (View).

Retorne ao arquivo HelloWorldController.cs e altere o método Welcome (boas-vindas) para adicionar um valor de Message (Mensagem) e NumTimes  (número de vezes) ao dicionário ViewData. O dicionário ViewData é um objeto dinâmico, o que significa que você pode colocar nele o que quiser; O objeto ViewData não possui propriedades definidas até você colocar algo dentro dele. Ele “”assume” as propriedades do objeto que for guardado nele. O sistema de ligação (binding) do modelo MVC mapeia automaticamente os parâmetros nomeados (como name e numTimes, no nosso caso) usando dados da própria barra de endereços, que “carrega” os parâmetros o método da Ação (Action) do controlador (Controller). O arquivo completo do HelloWorldController.cs ficará assim:

O objeto do dicionário ViewData contém dados que serão passados para a exibição (View).

Crie um modelo de exibição de boas-vindas chamado Views/HelloWorld/Welcome.cshtml.

Você criará um “loop” no modelo de exibição Welcome.cshtml que irá exibir “Hello” NumTimes. Substitua o conteúdo de Views/HelloWorld/Welcome.cshtml com o seguinte código:

Salve suas alterações e navegue para o seguinte URL:

http://localhost:xxxx/HelloWorld/Welcome?Name = Rick&numtimes = 4

Os dados dos parâmetros são retirados do URL e passados para o controlador usando o encadernador (Binder) do modelo MVC. O controlador (Controller) embala os dados em um dicionário ViewData e passa esse objeto para o visualizador (View). O visualizador (View) renderiza os dados como HTML para o navegador.alteração de view

Na amostra acima, usamos o dicionário ViewData para passar dados do controlador (Controller) para uma exibição no visualizador (View).

Mais tarde, no tutorial, usaremos um modelo (Model)  para passar dados de um controlador (controller) o visualizador (View). A abordagem do “modelo de visão” (Model) para passar dados geralmente é muito preferida sobre a abordagem do dicionário ViewData (e mais poderosa).

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.

Você quer ter uma franquia de hospedagem com tudo para marketing digital e faturamento recorrente?

franquia builderall business

Adicionando um controlador a um aplicativo ASP.NET Core MVC com o Visual Studio 2017

Adicionando um controlador a um aplicativo ASP.NET Core MVC com o Visual Studio 2017

Aqui veremos conceitos básicos sobre a arquitetura MVC (Model-View-Controller). ou seja, um modelo que  separa um aplicativo em três componentes principais: Modelo, Visualizador e Controlador.

Conceito e Benefícios do Modelo MVC (Model-View-Controller)

A arquitetura Model-View-Controller (MVC) separa um aplicativo em três componentes principais: Modelo, Visualizador e Controlador. O padrão MVC ajuda você a criar aplicativos que são mais testáveis e mais fáceis de atualizar do que os aplicativos monolíticos tradicionais. Os aplicativos baseados em MVC contêm:

Modelos: Classes que representam os dados do aplicativo. As classes modelo usam a lógica de validação para impor regras de negócios para esses dados. Normalmente, os objetos do modelo recuperam e armazenam o estado do modelo em um banco de dados. Neste tutorial, um modelo de filme (Movie) recupera dados de filmes de um banco de dados, fornece-o para a visualização ou para atualização. Os dados atualizados são gravados em um banco de dados. Os Modelos ficam normalmente armazenados numa pasta Models, em arquivos com NomeDoModelo.cs. Os modelos, além de descreverem os dados da aplicação, podem incorporar várias regras de negócio. Para cada “campo” você pode definir um nome padrão, se é requerido, seu intervalo, se é chave, o tipo de mensagem de erro, a format\ção numérica ou de data e assim por diante. Toda vez que você usar o campo, na aplicação, ele assumirá essas regras por definição. Ou seja, você define isso uma única vez e esquece no restante do código).

Visualizadores: são os componentes que exibem a interface do usuário (UI) do aplicativo. Geralmente, essas UIs (user interfaces) exibem os dados do modelo (do banco de dados). Os visualizadores (Views) ficar normalmente armazenados numa pasta Views, em arquivos NomeDoVisualizador.cshtml (equivalem às páginas HTML que conhecemos bem, só que permitem acessos diretos a dados manipulados nos controladores, tornando-se dinâmicas e não estáticas. Além disso, permitem uso de lógicas bem interessantes tipo mostre isso se… ou mostre aquilo se…. Outro benefício é que usam auxiliadores de tags (Tag Helpers), que ajudam a escrever a página com pouquíssimo código. Quando ela é compilada, o código se expande e se torna completo para ser interpretado corretamente pelos navegadores HTML5. O Core tem uma fantástica biblioteca de Tags e, se isso não bastar, você pode criar suas próprias Tags, indo muito além do HTML5.

Controladores: são classes que manipulam solicitações do navegador. Eles recuperam os dados do modelo e chamam os modelos de exibição (visualizadores ou Views) que retornam uma resposta. Também são os controladores, em geral (se você não interferir com programas em Javascript ou Jquery) que, cada vez que o usuário clica em alguma coisa, captam esse clique e executam uma ação correspondente. Em um aplicativo MVC, em geral a o visualizador apenas exibe informações e fica aguardando uma ação do usuário. Assim que o usuário clica em algo é o controlador faz alguma coisa, devolvendo ao visualizador(View) o que deve ser mostrado ao usuário. Se o usuário clicou por exemplo num item de menu, é o controlador que manipula dados, procurando a rota de navegação e, se forem passados parâmetros nesse link, ele processa os dados com esses parâmetros (no banco de dados), faz cálculos se necessários e devolve para o visualizador (View)o que deve ser mostrado na tela (no caso, outra página, com os dados de consulta solicitados pelo usuário). É sempre o Controlador (Controller) que interage com o banco de dados, e sempre seguindo as regras e definições dos Modelos (Models). Por exemplo (rodando no modo local, em localhost), se o usuário clica num item de que tem http://localhost:1234/Home/About, o controlador sabe que a rota é Home (em geral um subdiretório do diretório Views), onde vai buscar o arquivo About.cshtml. Só que, antes de mostrar o arquivo de visualização, ele consulta uma ação, também definida dentro dele (controlador Home.cs). Essa ação pode ser a mais simples possível, tipo “apenas mostre a página Home.cshtml) (na prática, o código é return View(), ou seja mostre a página e ponto final). Se a página About vai ter que mostrar algum dado do seu banco de dados, o controlador manda ler esses dados, conforme o seu modelo diz que tem que ser, e os entrega para a página de visualização. Nisso, em geral, ele faz o trabalho ompleto: entrega para a página About tudo o que está no seu modelo. Pode ser que os dados da sua empresa tenham CNPJ, Endereço de Entrega, Nome da Empresa, E-mail de Contato. O que vai aparecer na página About? Somente o que você definir que tem que aparecer. Poder só Nome da Empresa, Telefone e E-mail de Contato. Veja a sequência na figura abaixo:

MOdelo COre MVC

 

O Padrão MVC – Adicionando um Controller

O padrão MVC ajuda você a criar aplicativos que separam os diferentes aspectos do aplicativo (lógica de entrada, lógica de negócios e lógica de UI (user interface ou interface de usuário).

Ao mesmo tempo, proporcionam um acoplamento livre entre esses elementos. O padrão especifica onde cada tipo de lógica deve estar localizada na aplicação: a lógica da UI pertence ao Visualizador. A lógica de tratamento dos dados de entrada pertencem ao controlador. A lógica de negócios (e, em geral, de apresentação) pertence ao modelo.

Essa separação ajuda você a gerenciar a complexidade na criação de um aplicativo. Porque você trabalhar em um aspecto da implementação sem afetar o código de outro aspecto. Por exemplo, você pode trabalhar no código de exibição (que ficam no Visualizador ou View), sem se preocupar com as lógicas de aquisição e processamento dos dados (que ficam no Controlador ou Controller)  ou de apresentação dos dados (que ficam no Modelo. ou Model). Veremos todos estes conceitos nesta série de artigos deste tutorial e mostraremos como usá-los para criar um aplicativo, no nosso exemplo, de filmes.

Um projeto MVC contém pastas específicas para controladores, modelos e visualizadores, como já mencionamos. Para adicionar um controlador:

  • Em Solutions Explorer, clique com o botão direito do mouse em Controllers> Add> New Item

ADICIONA CONTROLLER mvc

 

  • Selecione MVC Controller Class
  • No diálogo Add New Item, entre com HelloWorldController

adiciona controller MVC

 

Troque o conteúdo de Controllers/HelloWorldController.cs com o seguinte código

Todo método público (public) em um controlador é “chamável” como um endereço HTTP.

Na exemplo acima, os dois métodos retornam uma “string” (texto). Observe os comentários que precedem cada método.

Um ponto final (endpoint) HTTP é um URL endereçável pelo aplicativo da Web, assim como http://localhost:1234/HelloWorld. E combina o protocolo usado: HTTP, a localização na rede do servidor web (incluindo a Porta TCP, no caso da depuração local localhost:1234 e o arquivo de visualização alvo, no caso, HelloWorld.

Note que é feita uma chamada tipo GET. Ou seja ,é preciso pegar alguma coisa para mostrar. Por isso é um método HTTP GET, chamado pela adição de “/HelloWorld /” na URL base.

O segundo comentário também mostra um método HTTP GET, que é chamado pela adição de “/HelloWorld/Welcome/” à URL. Mais tarde, neste tutorial, você usará o mecanismo de “scaffolding” para gerar métodos HTTP POST (ou seja, que vão devolver dados para os visualizadores).

Execute o aplicativo em modo não depurado e acrescente “HelloWorld” ao caminho, na barra de endereços. O método Index retornará uma string (um texto).

controlador retorno MVC

O MVC invoca as classes do controlador (e os métodos de ação dentro delas) dependendo da URL recebida. A lógica de roteamento de URL padrão usada pelo MVC usa um formato como esse para determinar o código a ser invocado:

/[Controller]/[ActionName]/[Parameters]

Você é quem configura o formato de roteamento no arquivo Startup.cs.

Quando você executa o aplicativo e não fornece nenhum segmento de URL, o padrão para o controlador segue o que está definido no padrão acima – no caso “Home” e com o  método “Index“.

A “primeira” parte da URL determina a classe do controlador a ser executada. A segunda parte do segmento de URL determina o método de ação (Acction) dwntro da classe.

Por exemplo, localhost:xxxx/HelloWorld/15 mapeia para a classe HelloWorldController (arquivo HelloWorldController.cs) .  Observe que você só teve que navegar para localhost: xxxx/HelloWorld.

Isso ocorre porque o Index é o método padrão (default)  que será chamado em um controlador se um nome de método não for DIRETAMENTE especificado.

A terceira parte do segmento de URL (em geral é uma id) é para dados de rota. Ou seja, é a passagem de um parâmetros, como estamos acostumados em chamadas do tipo htttp:minhauerl.com.br?id=15.  Veremos dados de parâmetros nas rotas mais tarde neste tutorial.

Navegue até http://localhost: xxxx/HelloWorld. (xxx é definido no seu Visual Studio). Você verá a tela com as boas-vindas, que retorna a string “This is the Welcome method” (este é o método de boas vindas).  Para esta URL, o controlador é HelloWorld e Welcome é a ação (Action) do método. Neste exemplo simples, ainda não foram utilizados [Parâmetros] na URL.

controller MVC

Modifique o código, passando agora algum parâmetro na URL. Por exemplo, /HelloWorld/Welcome?name=Maria&numtimes=4. Mude o método Welcome para que ele aceite (e opere) estes 2 parâmetros, de acordo com o seguinte código:

 

O código acima:

  • Usa o recurso C# de parâmetro opcional para indicar que o parâmetro numTimes  tem o valor padrão  = 1 se nenhum valor for passado para esse parâmetro;
  • Utiliza UsesHtmlEncoder.Default.Encode para proteger a aplicação de entrada maliciosa (ou seja, entradas do tipo JavaScript);
  • Usa “Interpolated strings” (textos interpolados), que são acrescentados dentro dos {}.

Rode sua aplicação e navegue para:

http://localhost:xxx/HelloWorld/Welcome?name=Rick&numtimes=4

(Troque xxx pelo número da porta que seu Visual Studio definiu).

Você pode usarr diferentes valores para nomes e números na URL. O sistema de ligação (binding)  do modelo MVC mapeia automaticamente os parâmetros nomeados da cadeia de consulta na barra de endereços para os parâmetros dentro do seu método. mais tarde veremos com detalhes essa questão de ligação (binding).

controlador MVC

Na imagem acima. o segmento da URL (Parameters) não é usado dentro do padrão do Core MVC. Os parâmetros name e numTimes são passados como “query strings” (do jeito como estamos acostumados). É por isso que aparece o ? (interrogação) na URL, que é um separador, que tem os parâmetros depois dele. Como você sabe, o carácter & separa as strings de uma query.

Troque o método Welcome pelo seguinte código:

 

 

Rode a aplicação e entre com a seguinte URL (no seu navegador):

http://localhost/xxx/HelloWorld/Welcome/3?name=Rick

controller MVC

Desta vez, o terceiro segmento de URL corresponde ao id do parâmetro da rota. O método de Welcome contém um ID de parâmetro que corresponde ao modelo de URL no método MapRoute. A trilha? (em id?) Indica que o parâmetro id é um parâmetro opcional. (é bem importante lembrar disso).

Nestes exemplos, o controlador está fazendo a parte “VC” do MVC – isto é, a visão e o controlador é que trabalham de verdade. O controlador está retornando HTML diretamente. Geralmente você não quer que os controladores retornem o HTML diretamente, já que isso se torna muito pesado ao codificar e manter essa codificação. Em vez disso, você geralmente usa um arquivo de modelo de visualização (View). que é um arquivo tipo template (Razor), separado, para ajudar a gerar a resposta em HTML. Veremos isso no próximo tutorial.

No Visual Studio, no modo de não-depuração (Ctrl + F5), você não precisa criar o aplicativo depois de alterar o código. Basta salvar o arquivo, atualizar seu navegador e você pode ver as mudanças. Se estiver no mode de depuração simples. mudanças nos arquivos de visualização, se salvos, podem ser vistos sem a necessidade de recompilar a aplicação. Isso facilta muito, pois nasta dar um “refresh” na página do navegador.

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.

Você quer ter uma franquia de hospedagem com tudo para marketing digital e faturamento recorrente?

franquia builderall business

Começando com ASP.NET Core MVC e Visual Studio 2017

Começando com ASP.NET Core MVC e Visual Studio 2017

Aqui você verá conceitos básicos da construção de um aplicativo da Web ASP.NET Core MVC usando o Visual Studio 2017. Este tutorial ensina ASP.NET MVC Core com controladores e visualizadores.

Instale o Visual Studio e o .NET Core

Instale o seguinte:

  • .NET Core 2.0.0 SDK ou mais recente;
  • Visual Studio 2017 Visual Studio 2017 versão 15.3 ou posterior com ASP.NET e carga de trabalho de desenvolvimento web… Instale, pelo menos, os seguintes “workloads”:
    • ASP.NET and web development
    • .NET Core cross-platform development

Crie um aplicativo WEB

No Visual Studio, selecione File > New > Project

Instale novo projeto core mvc

 

 

Defina a opção em New Project:

  • No painel esquerdo, opte por .NET Core
  • No painel central escolha ASP.NET Core Web Applications (.NET Core)
  • Dê ao nome para o projeto teste “MVCMovie” (é importante dar esse nome se você copiar código daqui, pois o namespace será o mesmo)
  • OK

DICA: se você quiser começar um projeto do zero, sem nenhum template, escolha Empty Project.

começando core mvc

O Visual Studio usou um modelo padrão para o projeto MVC que você acabou de criar.

Você já possui um aplicativo de trabalho inserindo com o nome de projeto, que permite selecionar algumas opções. Este é um projeto inicial simples e é um bom lugar para começar. No Visual Studio, clique em F5 para executar o aplicativo no modo de depuração ou Ctrl-F5 no modo de não depuração.

começando core mvc

  • O Visual Studio inicia o IIS Express e executa o seu aplicativo. Observe que a barra de endereço mostra localhost: porta # e não algo como exemplo.com. Isso porque o localhost é o nome do host padrão para o seu computador local. Quando o Visual Studio cria um projeto da Web, uma porta aleatória é usada para o servidor web. Na imagem acima, o número da porta é 5000. Quando você executa o aplicativo, você verá um número de porta diferente.
  • Lançar o aplicativo com Ctrl + F5 (modo não depurado) permite que você faça alterações de código, guarde o arquivo, atualize o navegador e veja as alterações de código. Muitos desenvolvedores preferem usar o modo não depurado para iniciar rapidamente o aplicativo e visualizar as alterações.
  • Você pode iniciar o aplicativo em modo depuração ou não depuração a partir do item de menu Debug:
  • começando core mvc
  • Você pode depurar o aplicativo tocando no botão IIS Express

iis express

O modelo padrão terá os links Home, About e Contact. A imagem do seu navegador poderá não mostrar esses links. Dependendo do tamanho da janela do seu navegador, talvez seja necessário clicar no ícone de navegação para mostrá-los (no topo, à direita).

links e ícone de navegação

Se você estiver executando no modo de depuração, clique em Shift-F5 para parar a depuração.

Na próxima artigo deste tutorial, aprenderemos sobre MVC e como  começar  a escrever algum código.

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.

Você quer ter uma franquia de hospedagem com tudo para marketing digital e faturamento recorrente?

franquia builderall business

Listas DropDown em Cascata (Cascading) usando o Select Tag Helper no CORE MVC

Listas DropDown em Cascata (Cascading) usando o Select Tag Helper no CORE MVC

Neste artigo damos continuidade ao artigo de listas dropdown usando o tag helper SELECT. Fazer listas dropdown em cascata exige o uso de Jquery e chamadas Ajax.  Este artigo mostra como fazer isso, desde o setup do sistema até as rotinas do core MVC integradas ao javascript. Não é muito elementar. Mas funciona. Aqui vai o caminho das pedras.

Fazendo o setup do seu sistema CORE MVC no arquivo Startup.cs

Há muitos artigos na Internet que falam em Cascading (dropdown em cascata, um dependente do outro) – mas a maioria mostra o milagre mas não mostra o santo. Ao fazer uma chamada AJAX para o servidor, por questões de segurança, os navegadores modernos não permitem. Principalmente se a camada está em domínio diferente do domínio da sua aplicação. No meu caso, eu não conseguia acesso HTTP para a leitura de dados mesmo dentro do meu próprio ambiente de desenvolvimento. Não conseguia nem no LOCALHOST, resumindo.

Estudando os erros, vi que precisava autorizar a aplicação CORE MVC a ler o que eu queria, criando uma política de acesso para capturar dados de uma página fora da página que você está. Dei o nome de “MinhaPolitica” a essa autorização.

Então, minha primeira recomendação é preparar os serviços do Startup.cs para lerem o domínio – ou os domínios – que você quiser. Na parte de Configuração dos Serviços (ConfigureServices) inclua:

Configurando o serviço globalmente

Depois disso é preciso configurar o serviço. :

Configurando Ações (Actions) dos Controladores (Controllers)

Se quiser garantir o acesso no seu próprio controlador (Control), coloque ANTES da ação do seu Controle (controller) o EnableCors :

Configurações Diferentes para ambiente de Desenvolvimento e Produção

Pronto. Temos certeza agora que as chamadas GET, em Ajax, vão chegar. Lendo o artigo em referência, você verá que pode definir diferentes políticas, uma para ambiente de desenvolvimento, outra par ambiente de produção e, ao invés de liberar geral como fiz aqui, fazer liberações para localhost, seu domínio ou outros domínios, tendo mais de uma política. Exemplo:

Princípio Básico dos Selects em Cascata

Selects em cascata funcionam do seguinte modo. Há um select MESTRE e um select ESCRAVO. Quando um item é selecionado no Select MESTRE, todos os itens do Select ESCRAVO são filtrados por uma variável (tipo ID) da opção selecionada. Itens sem essa ID são desprezados e somente são mostrados no Select ESCRAVO os itens que apresentam o mesmo valor da ID selecionada.

Ao fazermos uma seleção no MESTRE, essa escolha pode ser monitorada pelo comando Jquerychange()“:

A rotina em Jquery para recarregar o Select ESCRAVO

Quando o  Jquerychange()” percebe uma mudança no select MESTRE (no exemplo pelo select com id=”SelectConsultoria”, a sequência de ações é a seguinte:

  1. Limpa o select escravo, cuja Id é “SelectCompetencia” (no modelo de dados, cada Consultoria opera um conjunto de Competências), com a função jquery empty(). Não use remove(), que apaga o select inteiro e não s opções…;
  2. Acrescenta uma única linha com a função append(), tipo “Selecione uma Competência”;
  3. Força um refresh (algumas versões de navegador ficam mortinhas). Você faz o append() e a tela não muda. Esse aqui é um truque, forçando o DOM a atualizar o elemento com id “SelectCompetencia”. Usa uma função local chamada “redraw”;
  4. Monta a URL usando @Context.Request.Host do CORE MVC. Muita gente usa @Url, comigo não funcionou. A Url já passa o parâmetro que foi escolhido no Select Mestre. O pulo do gato, aqui, é que esse endereço tem o CONTROLADOR (controller)e a AÇÃO (Action) que tem de ser chamada para devolver, em formato Json, os dados filtrados. Sim, ela vai buscar no controller do CORE MVC ;
  5. Faz a chamada Ajax com ‘GET’, para buscar os dados.;
  6. Com o sucesso da conexão, coloca os dados em ‘data’ e manda processar numa função à parte chamada callbackFunction;
  7. A função callbackFunction popula o Select ESCRAVO novamente, O pulo do gato, aqui, é que ela no final remove uma linha que ficaria em branco.
  8. Essas rotinas ficam no miolo do @section Scripts { }, no final da sua página .CSHTML. Não esqueça de colocar <script> e </script>, ficando @section Scripts { <script> //todas as suas rotinas </script> }

A Ação (Action) no Controlador (Controller)

Montei uma ação específica para o “GET” do Ajax, via Jquery. Antes da ação, defini que para um GET, com [HttpGet]. E também assinalei a política local [EnableCors)”MinhaPolitica”)], já mencionada.

Aqui é montada uma lista simples. Filtrada pela Id do Select mestre, passado via URL como parâmetro. Observe que todos os itens da lista são acrescentados com Selected = false, pois  o Select ESCRAVO ainda não tem nada selecionado (e foi o próprio Javascript que criou o primeiro elemento com “Selecione uma Competência” .

Se isso não tivesse sido feito lá, poderíamos fazer aqui logo depois de definir a nova lista, fazendo um Lista.Add de um único elemento ANTES de entrar no loop foreach.

Observe que o retorno é em formato Json. É isso. Tem muita coisa antiga e errada na internet. Não precisa acrescentar parâmetro nenhum. Funciona que é uma chupeta.

 

 

A View com os selects usando o Select Tag Helper

A view que foi montada tem 3 blocos:

  • Bloco 1: os selects MESTRE e ESCRAVO;
  • Bloco 2: uma seção informativa do resultado da seleção acima se o botão de filtrar é pressionado;
  • Bloco 3: um grid com o resultado da seleção.

DICA:

Habilitando Tag Helpers de forma genérica

Para que tag helpers funcionem em qualquer arquivo de visualização, a opção é habilitar no arquivo auxiliar de visualização que é sempre lido (o _ViewImports.cshtml) .

Assim, no arquivo  _ViewImports.cshtml, inclua:

Isso pode ser feito com outros tag helpers que você vier a construir (além dos padrões Microsoft já existentes no Visual Studio).

Bloco 1 – Selects Mestre e Escravo

cascading selects

O primeiro select é o MESTRE e o segundo é o ESCRAVO. O funcionamento com javascrpt já vimos. Ocorre que quando entramos na página, esses selects devem ser previamente populados.

Papa popular usamos ViewBags, seguindo a sintaxe basica do HTML TAG HELPER para selects:  os dados são carregados dinamicamente a partir de uma base de dados e no select são colocadas no tag asp-items, formato asp-items(“ViewBag.MeusDados)”. Par carregar as ViewBagas é preciso colocar  neles uma lista IEnumerable. A View, nesse ponto, é um simples formulário com dois selects com suas respectivas ViewBags.

Note que o form (formulário) é submetido para Index2, no controlador. Index captura a entrada (GET), Index2 captura o formulário quando é submetido (via POST).

Bloco 2 – Botão de Filtrar

O botão Filtra Perguntas, no código acima, é um simples botão de submit, que vai obedecer o encaminhamento para Index2, definida no topo do formulário (<form asp-action=”Index2″>).

O botão Limpa Escolhas é um link simples (<a>…</a>), não passa nenhum parâmetro. A ideia é essa, simplesmente recarregar a página sem nenhuma filtragem, mostrando as 10 últimas perguntas cadastradas sem qualquer filtragem.

cascading dropdown

Quando o botão Filtra Perguntas é clicado, na verdade ele passa para Index2 os dois Ids. Nenhum deles pode estar selecionado, somente um dos dois (ou um ou outro) ou os 2: temos 4 opções possíveis. A ação Index2 simplesmente pega as Ids do POST e “devolve a bola” para a ação Index, que alem de repopular os selects, também muda a mensagem sobre a filtragem e os contadores de Totais (de Consultorias, de Competências e de Perguntas). Além disso, filtra os dados da Grid que vai ser apresentada abaixo desse bloco, no bloco 3. Todas as informações são passadas via ViewBags que são instanciadas na Ação (action) Index do controlador.

O botão Cria Nova Pergunta leva para um formulário de inserção, já com os dois parâmetros escolhidos. Quando uma nova pergunta é gravada, o form (formulário) e perguntas cham novamente a página Index, mas já passando para ela os dois IDs que recebeu (de forma que se pode cadastrar várias perguntas de uma Consultoria, para uma mesma Competência, sem ter de ficar novamente fazendo Selects!!!).

Bloco 3 – Grid com  Listagem das últimas perguntas registrado (máximo de 10)

Aqui a coisa pegou, porque o formulário (form) uma um modelo simples (não é uma lista!) e o grid precisa de uma lista… Os arquivos de Views  não permitem, de modo direto, que você defina dois ou mais modelos no topo (cabeçalho). É um modelo somente e ponto. Ir por esse caminho implica em gerar um terceiro modelo que contenha, dentro dele, os modelos que você quer usar na View. Mas pesquisando aqui e ali, acabei descobrindo uma outra forma de fazer isso, que será mostrada mais adiante.

cascading - formulário resultante do dropdown cascading

O modelo das Perguntas é muito simples:

 

O modelo acima é definido no topo do arquivo da View:

@model Coaching.Models.PerguntasBancoGeral
@{
ViewData[“Title”] = “Banco de Perguntas – Coaching Adm”;
}

Só que, a Grid, me interessava listar o Nome da Consultoria e o Nome da Competência, que estão em outras tabelas. Montei um modelo FAKE, contendo também os nomes, para poder popular esse modelo “Lista” (IENUMERABLE) através da ação Index do controlador (controller).

E, dentro da View, na hora de LISTAR todas as perguntas, no comando foreach, chamei esse modelo fake com os nomes:
foreach (var item in ViewBag.Lista as IEnumerable<Coaching.Models.PerguntasBancoGeralComNome>)

Veja a seguir o modelo FAKE e o bloco de código HTML da VIew do bloco 3 (grid).

Populando as opções do Select através do Banco de Dados

Para fazer isso criei dois métodos PRIVADOS dentro do controlador (controller). Um para popular a ViewBag de Consultorias, outro para popular a ViewBag de Competências.

Note que o VIewBag é instanciado dentro do método PRIVADO. Outra coisa: atribui o valor zero (0) para o “Selecione uma Consultoria”, pois isso facilita muito saber se a pessoa não fez nenhuma opção no select. É melhor que trabalhar com ”nulls”.

Se houver um item selecionado, vem um valor diferente de zero, que é passado por TipoSelecionado. A linha, em dados, cuja Id “bater” com o valor de TipoSelecionado será marcada como verdadeira (Selected = true).  Assim, quando a ViewBag entregar essa lista para o Select, o mesmo estar´posicionado nesta opção. DO contrário fica na primeira opção (0), “Selecione uma Consultoria”.

Populando as Competências

O princípio desse método é exatamente igual ao do anterior. A diferença é que ele utiliza 2 parâmetros que podem ter 4 comninações possíveis:

  • os 2 não são passados (são zero), nenhum dos dois foi selecionado: mostra todas as opções existentes (todas as competências);
  • somente o Id da Competência foi passado: mostra exatamente essa competência;
  • somente o id da Consultoria foi passado: mostra todas as competências ligadas a essa consultoria
  • os 2 são passados (diferente de zero): mostra exatamente a competência específica (igual caso 2)

O resultado dessa lista é armazenado na ViewBag de Competências dentro do método privado.

A Ação (Action) Index do Controlador

Esta ação é o “coração” desta pequena aplicação. Quando se entra na pagina Index.cshtml, a ação Index é solicitada no controlador (controller) e ela executa 3 papéis importantes:

  • chama os dois métodos populadores, passando a eles os parâmetros escolhidos na View;
  • carrega uma lista para a grid do modelo fake, com as devidas filtragens dos parâmetros e a coloca também numa VIeBag;
  • calcula e define todas as demais ViewBags que serão mostradas no arquivo de visualização (View), considerando as 4 possíveis alternativas de passagem dos 2 parâmetros.

O código é mostrado a seguir.

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.

Você quer ter uma franquia de hospedagem com tudo para marketing digital e faturamento recorrente?

franquia builderall business