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

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

Tutorial

Por menos de U$3/mês você pode ter sua aplicação ASP.NET Core MVC 2.2 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) , ou também a versão comunitária do Visual Studio 2019, também grátis,  você consegue instalar sua aplicação ASP.NET Core 2.2 MVC 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.2 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.

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.


Clique em Create new profile:


Clique em Import Profile e dê OK


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

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

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.

Modificando e ampliando o Gerenciamento de Identidades do ASP.NET Core 2.2 e implementar Componentes Synfusion

Modificando e ampliando o Gerenciamento de Identidades do ASP.NET Core 2.2 e implementar Componentes Synfusion

 Vimos no artigo “Como instalar Identidade e Autorização da Microsoft criar um projeto novo com o Syncfusion“, com todos componentes que deseja usar –  e depois como acrescentar Autenticação e Identidade da Microsoft.

Neste artigo veremos como modificar e ampliar o arquivo de “usuários” (“AspNetUsers”) – personalizando-o para ter mais campos e também para usar uma identidade (ID) que seja numérica – e não string.

Passo 1: Instale a sua aplicação Core MVC 2.2

Estou Assumindo que você já tenha um aplicativo da Web com a autenticação do usuário ativada, montada pelo próprio template do Visual Studio 2017 ou 2019. Na geração da aplicação você pode configurá-lo selecionando “Contas de usuário individuais” como o tipo de autenticação ao criar seu projeto.

Ou você pode adicioná-lo manualmente a um aplicativo seguindo as instruções do artigo:

Como instalar Identidade e Autorização da Microsoft criar um projeto novo com o Syncfusion

 

Passo 2: O que pode ser alterado no arquivo de Identidade?

Há duas coisas que não gosto quando a Microsoft instala seu Microsoft Identity Manager – mas devo reconhecer que essa funcionalidade torna realmente fácil adicionar usuários ao seu site ASP.NET Core.

Há sempre duas coisas que quero sempre mudar imediatamente.

A primeira é pedir o nome de um usuário (para inclusive poder usá-lo depois na barra de navegação com um “Olá NOME DE USUÁRIO” (no lugar de “Ola EMAIL DO USUÁRIO”. A segunda é alterar aquela detestável chave primária do usuário em “string”, substituindo-a por valores “inteiros”. – tornando muito mais fácil integrar a tabela de usuários (“ASPNETUSERS”) com as demais tabelas da aplicação. Nos próximos passos deste artigo vamos ver como fazer isso.

No exemplo, ao registra um usuário vou perguntar seu NOME COMPLETO. Na sua implementação você pode optar por perguntar separadamente o nome e sobrenome (e criar, no modelo, um campo só de leitura que junta o nome com o sobrenome, criando o nome completo automaticamente (a vantagem de fazer isso é que a pessoa é sempre obrigada a digitar os 2 campos… Quando você pede somente o nome completo, ela pode desconsiderar e digitar somente o primeiro nome).

Você pode acrescentar quantos campos quiser no padrão de gerenciamento de identidade padrão da Microsoft, que por default utiliza apenas de endereços de e-mail.

Finalmente, como já falei,  gosto de mudar a chave primária de uma string para um inteiro para corresponder ao resto do meu modelo de dados. Costumo preferir números inteiros em GUIDs, e não strings, difíceis de conferir. O pressuposto aqui é que você já tenha um aplicativo da Web com a autenticação do usuário ativada. Ao criá-lo, você pode configurá-lo selecionando Contas de usuário individuais como sendo o tipo de autenticação do projeto. Ou você pode adicioná-lo manualmente a um aplicativo seguindo nossas instruções no artigo do Passo 1.

 

Passo 3: Adicionando novos modelos para Autorização / Identidade

Vamos começar adicionando dois novos modelos ao nosso aplicativo. Nas suas pastas Modelos (Models), crie uma nova classe chamada AppRole que estende o IdentityRole. Isso pode ser usado para atribuir funções especiais a usuários como “admin” e outras categorias de usuários, com papéis diferentes na sua aplicação.

Em seguida, adicione uma classe AppUser que amplia o IdentityUser para que possamos coletar mais dados sobre eles (você pode acrescentar mais campos se quiser). Note que o nome completo é montado a partir de nome sobrenome, neste exemplo.

Note que as duas classes são marcadas com <int>.

Isso informa ao Gerenciamento de Identidades que queremos usar chaves primárias baseadas em números inteiros.

O AppUser marca suas propriedades com algumas anotações de dados padrão para tornar o primeiro e o último nome necessários com um comprimento máximo de 20 caracteres. Essas propriedades também são marcadas com PersonalData, ficando disponíveis automaticamente para download e exclusão.

Tornar os dados capazes de serem baixados e excluídos ajuda a atender aos requisitos GDPR. Também foi uma propriedade FullName para formatar de forma consistente o nome completo de um usuário em todo o aplicativo.

Passo 4 – Preparando o banco de dados

Muito provavelmente sua aplicação vai rodar em um servidor externo MYSQL ou MSSQL.

Crie o database em vazio (sem tabelas ainda) e pegue a definição da string de conexão. Exemplo:

“Data Source=EndereçoDoServidor;Initial Catalog=NomeDOBancoDeDados;User Id=NomeDoUsuario;Password=SenhaDoUsuario;”

No arquivo appsetings,json TROQUE a string de conexão gerada na criação do seu aplicativo pela sua string de conexão.

Passo 5 – Atualizando o Context Database (diretório Data, arquivo ApplicationDbContext.cs

O contexto do banco de dados estende IdentityDbContext, precisamos atualizá-lo para informá-lo sobre nossas novas classes e estratégia de chave primária.

 

Nós também queremos adicionar ou atualizar OnModelCreating para ignorar a propriedade FullName que adicionamos. É uma propriedade computada que não queremos armazenar no banco de dados.

Nossa classe de inicialização está fazendo referência à identidade padrão. Precisamos atualizá-lo para nossa identidade personalizada. Antes, no arquivo startup.cs:

Depois:

Passo 6 – Atualizando _loginPartial.cshtml

O controle de login na barra de ferramentas também possui referências que precisam ser atualizadas. (Não se esqueça de adicionar uma declaração usando à sua pasta de modelos aqui.)

 

Lembre-se não vamos mais mostrar ao usuário seu endereço de e-mail. Em vez disso, vamos mostrar seu nome.

Antes:

Depois:

Possível Problema com caracteres alienígenas

Se a linha do navegador apresentar caracteres internacionais com símbolos alienígena, é porque o Visual Studio salvou o arquivo _loginPartial.cshtml em ANSI – e não em UTF-8.

O artigo aqui explica isso. Abra o arquivo _loginPartial.cshtml  com o notepad++  (instale esse editor gratuito que é fantástico, dá de 100 a 0 no notepad da Microsoft). Salve o arquivo com ENCODING UTF-8 e rode a aplicação para ver como “sumiram os caracteres alienígenas”.

 

Passo 7 – Substituir páginas de identidade padrão (Default Identity Pages)

  1. Clique com o botão direito no nome do projeto.
  2. Selecione ADD> New Scaffolded Item.
  3. Selecione Identity (Identidade) no menu à esquerda.
  4. Selecione ADD.
  5. Escolha Account/Manage/Index e também a opção Account/Register.
  6. Selecione sua classe de contexto do banco de dados existente.

Isso criará novas páginas para o registro do usuário e a página do perfil do usuário, onde podemos solicitar o primeiro e o último nome.
Nota> se quiser usar o primeiro nome, o ultimo no ou ainda o nome completo, em outras páginas, escolha essas páginas já no item 5, acima,

 

Passo 8 – Arquivo _ValidationScriptsPartial.cshtml

Copie o HTML do seu arquivo atual, localizado na pasta Pages/Shared, para o novo na pasta Areas/Identity/Pages, para ter certeza de que são os mesmos.

 

Passo 9 – Arquivo Register.cshtml.cs

Adicione propriedades de primeiro e último nome à classe InputModel. Se não encontrar o arquivo, é porque se esqueceu de fazer o ADD NEW SCAFFOLDED do passo 7. Este arquivo Fica na pasta Areas;Identity/Pages/Account e dentro de Register.cshtml

 

Adicione esses valores de propriedade à declaração de variável do usuário em OnPostAsync

Passo 10 – Arquivo Register.cshtml

Adicione os campos de entrada para primeiro e último nome, logo abaixo do controle asp-validation-summary.

 

Passo 11 – Arquivo Index.cshtml.cs

Esta é uma classe de fica no folder Areas/Identity/Pages/Account/Manage

Adicione novamente as propriedade first e last name na classe InputModel.

Atualize a variável Input e OnGetAsync para popular essas propriedades.

Salve as propriedades em OnPostAsync que fica próxima ao final do método.

Passo 12 – Arquivo Index.cshtml

Adicione os campos de entrada para nome e sobrenome abaixo da entrada de e-mail e acima do número de telefone.

Passo 13 – Atualizando Migrações (Update Migrations)

O próximo passo lógico é atualizar migrações, para criar no banco de dados todas as tabelas de autorização e de identidade (ji usando números inteiros para o ID de pessoas (Users) e regras (Roles). 

Se o seu banco de dados está criado mas está vazio (sem tabelas)

Neste caso minha primeira recomendação é criar um template do seu projeto, para que você possa iniciar novas aplicações já a partir do estágio atingido no passo 12. Para criar o template:

  1. No menu superior dê um BUILD na solução para ter certeza de que não há nenhum erro ou file,
  2. Salve os arquivos todos.
  3. No menu superior, em Project, escolha Export Template. Deixe marcado Export Template e dê um NEXT. e um nome e uma descriçao para o seu temlate, que vai aparecer cada vez que você iniciar um novo projeto

Se eu banco de dados está criado, mas não está vazio (tem tabelas)

Isso significa que você já fez pelo menos alguma migração neste projeto. Se você tentar adicionar uma nova migração, ela falhará devido à alteração da chave primária.

Neste caso, o caminho mais fácil é:

  1. Excluir sua pasta de migração
  2. Excluir seu banco de dados ou recriá-lo (não esqueça de mudar a string de conexão em APPSETTINGS.
  3. Se você não quiser recriar o banco de dados, mas somente limpá-lo completamente, deixando-o sem tabelas, views e procedures, rode no sue MSSQL a rotina proposta abaixo. Abra uma janela de NEW QUERY, copie a rotina e execute.
  4. Depois de recriar ou limpar o banco de dados, você poderá adicionar sua “primeira migração”.
  5. No Console do Gerenciador de Pacotes PMC rode estes dois comandos, um após o outro:
    1. Add-Migration Initial -o Data\Migrations
    2. Update-Database

Agora execute seu aplicativo e você poderá registrar uma conta com nome e sobrenome, ver o nome do usuário na barra de navegação e atualizar o primeiro e último nome. Agora você pode usar a propriedade AppUser.Id em seus próprios modelos para referenciar o registro do usuário como faria com qualquer outro modelo.

 

Rodando o script acima, ele vai mostrar que apagou os índices e as tabelas:

Dropped FK Constraint: FK_AspNetRoleClaims_AspNetRoles_RoleId on AspNetRoleClaims
Dropped FK Constraint: FK_AspNetUserClaims_AspNetUsers_UserId on AspNetUserClaims
Dropped FK Constraint: FK_AspNetUserLogins_AspNetUsers_UserId on AspNetUserLogins
Dropped FK Constraint: FK_AspNetUserRoles_AspNetRoles_RoleId on AspNetUserRoles
Dropped FK Constraint: FK_AspNetUserRoles_AspNetUsers_UserId on AspNetUserRoles
Dropped FK Constraint: FK_AspNetUserTokens_AspNetUsers_UserId on AspNetUserTokens
Dropped PK Constraint: PK___EFMigrationsHistory on __EFMigrationsHistory
Dropped PK Constraint: PK_AspNetRoleClaims on AspNetRoleClaims
Dropped PK Constraint: PK_AspNetRoles on AspNetRoles
Dropped PK Constraint: PK_AspNetUserClaims on AspNetUserClaims
Dropped PK Constraint: PK_AspNetUserLogins on AspNetUserLogins
Dropped PK Constraint: PK_AspNetUserRoles on AspNetUserRoles
Dropped PK Constraint: PK_AspNetUsers on AspNetUsers
Dropped PK Constraint: PK_AspNetUserTokens on AspNetUserTokens
Dropped Table: __EFMigrationsHistory
Dropped Table: AspNetRoleClaims
Dropped Table: AspNetRoles
Dropped Table: AspNetUserClaims
Dropped Table: AspNetUserLogins
Dropped Table: AspNetUserRoles
Dropped Table: AspNetUsers
Dropped Table: AspNetUserTokens

Note, abaixo, que as tabelas foram geradas dom IDs com números inteiros!!!

Rodando a aplicação, a tela de entrada contendo à direita os campos de Login e Registro

Tela de Registro, com Nome e Sobrenome:

Tela Inicial, mostrando o nome no lugar do e-mail. E aparece o campo de Logout, no lugar de login.

Instalando o Syncfusion

Instalando os pacotes via NuGet Packages

O NuGet Package Manager pode ser usado para pesquisar e instalar pacotes do NuGet na solução ou no projeto do Visual Studio.

Passo 1 : Clique com o botão direito do mouse no projeto / solução na guia Solution Explorer e escolha Manage NuGet Packages…

 

Alternativamente, clique Tools, menu, NuGet Package Manager | Manage NuGet Packages for Solution…

Passo 2 : Selecione o NuGet.org na lista suspensa Fonte do pacote (Package source drop-down).

Passo 3 : Todos os Pacotes do Syncfusion NuGet estão listados e disponíveis. Pesquise e instale os pacotes necessários em seu aplicativo clicando no botão Instalar..

Os pacotes Syncfusion NuGet estão disponíveis publicamente em NuGet.org desde a versão v16.2.0.46 . Para instalar versões anteriores à 16.2.0.46 , configure Syncfusion URL fees privado.

Em nosso exemplo vamos instalar a versão CORE J2 17.2.0.34.

Os controles do ASP.NET Core UI são criados do zero para serem leves, responsivos, modulares e sensíveis ao toque. Inclui mais de 50 componentes, incluindo grade, gráfico, agendador e muito mais. Saiba mais: https://www.syncfusion.com/aspnet-core-ui-controls Características principais:

  • Suporta o TagHelper e o construtor fluente para inicialização de controle.
  • Suporte de anotação de dados.
  • Temas internos impressionantes, incluindo material, bootstrap, tecido, etc.
  • Conformidade com os padrões de acessibilidade – WCAG 2.0 e Seção 508.

Componentes e controles disponíveis:

GRIDS
DataGrid
Pivot Table
Tree Grid (Preview)
DATA VISUALIZATION
Charts
Stock Chart (Preview)
Circular Gauge
Diagram
Heatmap chart
Linear Gauge
Maps
Range Selector
Smith Chart
Sparkline Charts
TreeMap
EDITORS
Rich Text Editor
Word Processor
Chips (Preview)
CALENDARS
Scheduler
Calendar
DatePicker
DateRangePicker
DateTime Picker
TimePicker
BUTTONS
Button
ButtonGroup
Dropdown Menu
Progress Button
Split Button
DROPDOWNS
AutoComplete
ComboBox
Dropdown List
MultiSelect Dropdown
NAVIGATION
Accordion
Context Menu
Menu Bar
Sidebar
Tabs
Toolbar
TreeView
INPUTS
Form Validator
TextBox
Input Mask
Numeric Textbox
Radio Button
Checkbox
Color Picker
File Upload
Range Slider
Toggle Switch Button
LAYOUT
Avatar
Card
Dialog
ListView
Tooltip
Splitter (Preview)
NOTIFICATIONS
Badge
Toast
FORMS
In-place Editor (Preview)
Viewer
PdfViewer (Preview)

Passo 4: Ajustes Finais

Visual Studio 2017/2019

Abra o arquivo ~/Views/_ViewImports.cshtml e importe o pacote Syncfusion.EJ2. Acrescente:

@addTagHelper *, Syncfusion.EJ2

Adicione os recursos do lado do cliente por meio do CDN ou do pacote npm local no elemento <head> da página de layout ~/Views/Shared/_Layout.cshtml. Acrescente:

Adicione o Essential JS 2 Script Manager no final do elemento <body> na página de layout ~/Views/Shared/_Layout.cshtml.

Agora, adicione os componentes do Syncfusion Essential JS 2 em qualquer página da web (cshtml) na pasta Views.

Por exemplo, o componente de calendário é adicionado na página ~/Views /Home/Index.cshtml.

Execute o aplicativo. O componente de calendário do Essential JS 2 será renderizado no navegador da web.

Conclusão

Agora você pode salvar o template do projeto considerando o uso dos componentes e controles do Syncfusion. Basta ir in Projec->Export Template. Ao iniciar um novo projeto, poderá desfrutar de inicio de todas as mudanças. Eventualmente, terá de mudar a conexão ao banco de dados (em appsettings), apagar o diretórios migrations e fazer a primeira migração novamente. Mas isso é coisa que tomará ,initos – e não horas. Esperamos que tenha curtido este artigo e – se tiver sugestões ou dúvidas – é só nos enviar,

Syncfusion Core: como instalar Identidade e Autorização da Microsoft

Syncfusion Core: como instalar Identidade e Autorização da Microsoft

 Antigamente, ao definir um projeto novo em core MVC, você tinha que definir se o projeto teria ou não identificação/autorização. A partir do core 2.1 isso não é mais necessário. Você pode definir isso depois. Melhor ainda: você pode criar um projeto novo com o Syncfusion, com todos componentes que deseja usar –  e depois acrescentar Autenticação e Identidade da Microsoft

Passo 1: Instale o Gerenciador (Painel de Controle) da Syncfusion

Ao instalar, escolha ao menos a opção Syncfusion ASP.NET Core versão JS 2. Importante: pegue sua licença comunitária na Syncfusion antes… Ela serve para todos seus projetos.

Passo 2: Instale as extensões “Syncfusion Visual Studio extension”.

Você pode definir se quer as extensões para o Visual Studio 2017, 2019 ou ambas. Notar que na verdão 2017 as opções do Syncfusion estarão na barra superior, primeiro nível. Já no 2019. procure em Extesões -> Syncfusion. Veja aqui como fazer.

Passo 3: Gere sua aplicação inicial

Duas opções para gerar:

  1.  A partir do Visual Studio: procure o template CORE MVC com a marca da SYNCFUSION (deve ser o último da lista) e gere a aplicação.
  2. A partir do Painel de Controle da Syncfusion. Neste caso, você pode pré-selecionar todos os componentes que pretende usar em seus projetos.

Nos dois casos você pode escolher se quer arquivos auxiliares locais ou em CDN (eu escolhi CDN) e o tipo de tema que vai querer usar (eu escolhi Bootstrap).

Uma vez que você criou o projeto, rode em debug para ver se está OK na máquina local.

Passo 4: Instale a Identidade/Autorização da Microsoft

  • Clique (com o botão da direita) no nome de seu  projeto no Solution Explorer do Visual Studio. Você deverá rodar o Identity Scafolder;  Add > New Scaffolded Item.
  • No painel esquerdo do diálogo Add Scafold,  selecione  Identity > ADD;
  • No Add Identity, selecione as opções que você vai querer usar (tipo págias de deleção, de troca de senha, de confirmação de e-mail, etc – além da página de login);
    • Selecione a página de layout que você já possui (_layout.cshtm, normalmente em Views/Shared). Do contrário, seu arquivo de layout será escrito com códigos incorretos. Por exemplo , escolha ~/Pages/Shared/_Layout.cshtml  se você tiver páginas Razor. Ou <~/Views/Shared/_Layout.cshtml para projetos MVC (seu caso deve ser este)
    • Selecione o botá + para criar uma Classe de Contexto de Dados (Data context class) . O sistema vai sugerir um, use esse. Se não sugerir, defina um,
  • Selecione ADD.

Passo 5: Acertando o arquivo de Layout (_layout.cshtm)

Para poder “ver” os dados de login assim que rodar a aplicação, é fundamental adicionar no seu arquivo  Views/Shared/_Layout.cshtml o login parcial ( (_loginPartial). Para isso terá que inserir <partial name=“_LoginPartial” />. Como a aplicação usa cookies, também terá de inserir <partial name=”_CookieConsentPartial” />. Veja no arquido de exemplo abaixo onde  deve inserir esses comandos. No SEU próprio arquivo, nã mude MAIS NADA a não ser incluir essas duas linha. Veja um exemplo abaixo (não copie todas as linhas para o seu arquivo  Views/Shared/_Layout.cshtml.

Você tem muitas outras opções de incluir ou alterar a identidade. Basta conferir no artigo “Scaffold Identity in ASP.NET Core projects” da Microsoft.

Passo 6 – Preparando o banco de dados

Muito provavelmente sua aplicação vai rodar em um servidor externo MYSQL ou MSSQL.

Crie o database em vazio (sem tabelas ainda) e pegue a definição da string de conexão. Exemplo:

“Data Source=EndereçoDoServidor;Initial Catalog=NomeDOBancoDeDados;User Id=NomeDoUsuario;Password=SenhaDoUsuario;”

No arquivo appsetings,json TROQUE a string de conexão gerada na criação do seu aplicativo pela sua string de conexão.

Passo 7 – Fazendo o Scafolding acertar seu banco de dados, criando as tabelas para identificação e autorização

A identidade é essencialmente configurada em Areas/Identity/IdentityHostingStartup.cs. Para mais informações, consulte IHostingStartup.

As tabelas do banco de dados para Identidade e Autorização requerem o uso do Entity Framework Core Migrations. Será necessário fazer uma migração e autulizar o banco de dados. Isso pode ser feito em Tools->NudgePackageManager->PacketManagerConsole (usuamente chamada de PMC). Rode os seguintes comando:

 

O parâmetro “CreateIdentitySchema” psrs o comando Add-Migration descreve no nome da migração. Ele é opcional, mas é sempre últil dar um nome para você lembrar depois o que essa migração fez (criou nova tabela, modificou uma tabela, acrescentou um campo, eliminou um campo, etc.

No arquivo startup.cs é fundamental ter certeza que estão as seguintes linhas de configuração da aplicação:

app.UseStaticFiles();

app.UseAuthentication();

A segunda linha é fundamental. Veja abaixo onde encaixar essas 2 linhas:

Agora você pode rodar sua aplicação localmente e fazer os ajustes que quiser. Os 2 artigos da referência dão muitas dicas, inclusive para implementar o serviço de e-mail e alterar páginas Razor.

Integrando o MailingBoss a uma aplicação ASP.NET Core MVC com o Visual Studio 2017

Integrando o MailingBoss a uma aplicação ASP.NET Core MVC com o Visual Studio 2017

Tutorial

Neste artigo veremos como é possível cadastrar um usuário no seu database e, ao mesmo tempo, inserir esse usuário numa lista do MailingBoss, onde é possível automatizar uma sequência de ações de marketing via E-mails. Ou seja, você põe um “robô” digital para interagir com seus leads até conseguir efetuar uma venda… ou o que você imaginar.

O problema

Usando o MailingBoss, que é a ferramenta de e-mail marketing da BuilderAll, é possível trabalhar com Funis de Venda, capturando Leads para uma determinada lista. O fantástico dessa ferramenta é que ela permite montar WORKFLOWS com ações a serem tomadas DEPOIS que o lead se inscreve na lista. Tipicamente essas ações são envios de novos e-mails, contendo conteúdos diferentes e levando o lead a tomar uma decisão de compra. Esses e-mais são programáveis no tempo. E mais: se a pessoa clicar no link de um e-mail, o WORKFLOW permite transferir o lead de uma lista original – onde o e-mail entrou pela primeira vez – para qualquer outra lista (retirando-o, se você quiser, da lista original).

Essencialmente, toda lista é associada a um único formulário que tem em geral poucos campos. O mínimo que pode ter é o campo de e-mail, que é obrigatório. O típico pede um nome e o e-mail. O problema: assim que a pessoa submete o formulário, clicando no botão de submit, é muito complicado passar esses dados para uma outra aplicação e – até o momento em que escrevo este post – o jeito que eles recomendam fazer isso não funcionou e é ainda impraticável passar dados “hidden”, embora isso seja teoricamente possível.  

A solução

Bem, se Maomé não vai à montanha, a montanha vai a Maomé. O jeito que encontrei é cadastrar o lead na minha própria aplicação CORE MVC, num formulário simples que simplesmente injeta o LEAD no database da minha aplicação. Ao completar essa operação, eu emulo um submit para o MailingBoss, como se os dados tivessem saído de um formulário deles – e não da minha aplicação. Assim que o MailingBoss “engole” os dados, ele mesmo dispara e-mail pedindo confirmação de e-mail (se a lista é double opt in) ou um e-mail de confirmação do cadastramento.

Funciona. Se você quiser fazer um teste, pode se inscrever para ter 7 dias de acesso gratuíto ao MailingBoss e mais 17 ferramentas de marketing digital – além de diversos treinamentos sobre tudo quanto é assunto para fazer marketing na WEB.

 

A aplicação em ASP.NET CORE MVC

A ideia é ter uma aplicação muito simples que permitirá fazer um cadastro de pessoas interessadas em fazer um teste, na WEB, sem custos, do seu grau de empreendedorismo.

Assim que a pessoa se cadastra, a aplicação manda um e-mail para o e-mail cadastrado, solicitando a CONFIRMAÇÃO (da veracidade) do mesmo. PAra não complicar a programação do aplicativo, vamos deixar por conta do MailingBoss o envio do e-mail pedindo a Confirmação.

Assim que a pessoa cadastrada clica no link desse e-mail de confirmação, ocorrem duas coisas:

  • Ela é remetida para uma página tipo parabéns, está tudo certo, ‘clique no link abaixo para fazer o teste‘;
  • O sistema muda o status do cadastrado para confirmado;
  • O MailingBoss envia um e-mail de agradecimento.

Modelo de Dados

Crie uma classe de dados no diretório model, tendo como chave o e-mail (para evitar e-mails duplicados).

MODEL->Empreendedor.cs

Gerando a tabela no banco de dados – Contexto

Uma vez que seu modelo já está gravado com Empreendedor.cs, você precisa precisa acrescentar essa tabela na lista de tabelas – que no meu caso está no arquivo ContextoPrimario.cs, dentro da pasta models. Se você não tem ainda na aplicação nenhuma especificação de contexto, crie uma ContextoPrimario.cs na pasta de models e insira o seguinte conteúdo

Se você já tem seu arquivo de Contexto, por ter criado o banco de dados anteriormente (ou por estar aproveitando uma solução de teste criada anteriormente, e somente quer ter a tabela do modelo empreendedor lá dentro), simplesmente acrescente à relação de arquivos já existentes a seguinte linha (dentro de public partial class ContextoPrimario : DbContext:):

public virtual DbSet<Empreendedor> Empreendedores { get; set; } // banco de Empreendedores

Feito isso, vá no menu superior e rode BUILD->BUILD SOLUTION. Tem que dar zero erros, se não der acerte o que estiver errado, até rodar e dar zero erros.

Feito isso, precisamos agora gerar o arquivo que vai de fato implementar a tabela de EMpreendedores na sua aplicação. Na janela do Package Manager Console, embaixo, temos de adicionar essa primeira migração. Digite, trocando [nomedamigracao] por qualquer nome, como PrimeiraMigracao:

//PM> Add-Migration [nomedamigracao] -Context ContextoPrimario:

Add-Migration [nomedamigracao] -Context ContextoPrimario 

Se rodar certinho, ele vai gerar um arquivo com um númerogrande_nomedasuamigracao. No meu caso, 20190131213948_Empreendedor3

Agora temos de rodar a Migração, gerando a tabela de Empreendedores no seu banco de dados.Novamente na janela de Package Management Console (PM, embaixo), rode o seguinte comando (troque ContextoPrimario pelo nome do seu contexto, se tiver um outro):

update-database -context ContextoPrimario

Entre no seu gerenciador de banco de dados, você vai ver que a tabela está lá. No meu caso, como uso SQL, entro no MIcrosoft SQL Server Management Studio (MSSMS). Coloco a tabela no modo de edição e vejo o seguinte:

tabela empreendedores

Nada é perfeito, suspirou a raposa. Na migração a tabela foi criada mas, a despeito de ter definido no modelo valores default para idConsultoria (4), flagEmailConfirmado (0) e quantidadeDeAvaliadores (0), estes valores não estão no Binding da tabela, quando todos os campos estão definidos como “não permitindo nulos”. Isso significa que, se deixar assim, vou ter de especificar todos esses valores no meu form, como hidden. Até aí tudo bem. Ocorre que algumas vezes uso procedures e gosto de ter a certeza que se eu não enviar algum desses campos, eles vão assumir valores padrão.

Assim, ajusto o o DEFAULT VALUE OR BINDING para os valores padrão que quero e salvo a tabela (que ainda está vazia).

Gerando o Controller as as Views, com Scaffolding

Agora precisamos criar o controlador (controller) e os formulários (views). Clicks sobre o nome do seu projeto e com o botão da direita escolha ADD-> NEW SCAFFOLDED ITEM. Escolha o template MVC COntroller with Views, using Entity Framework. Click em ADD.

Em Model Class, escolha Empreendedor. Em Data Context Class, escolha  ContextoPrimario (ou o nome do seu contexto). Deixe clicado: Generate Views, Reference Script Libraries e Use a lay-out page. Em Controller name, mude o nome de EmpreendedorsController para EmpreendedoresController. Click em ADD.

Legal. Vamos fazer um check básico. No menu superior clique em IIS EXpress. Sua aplicação vai ter um endereço básico de entrada, definido em startup;cs. No meu caso é http://localhost:50628/.

No NAVEGADOR, altere para o seu endereço localhost + Empreendedores/Create.

No meu caso fica assim: http://localhost:50628/Empreendedores/Create

Que chato, Fernandinho. O formulário fica pedindo coisas que não deveriam e.se tento gravar, dá um monte de erros, E, pior que tudo, não tem o e-mail que considero chave:

 

 

 

 

É necessário que os campos idConsultoria, quantidadeDeAvaliadores e flagEmailConfirmado fiquem em hidden e com valores pré determinados. Além disso:

  • vou mudar a cor do botão para vermelho usando “btn-danger” no lugar de “btn-default”;
  • tirar o link “Back to List”;
  • No títutlo, colocar um texto promocional com a classe “jumbotron” do bootstrap (que é usado na minha aplicação);
  • acrescentar o campo de e-mail que, por ser chave, o CORE assumiu que não precisaria ter porque seria gerado automaticamente – o que não é o nosso caso.

 

Rodando a aplicação no localhost, nossa telinha de entrada fica assim:

Fazendo um cadastramento o sistema manda para a página Index ferada pelo Core MVC:

Ou conferindo na base de dadosse está tudo OK:

 

Agora vamos criar um espelho dessa tabela no MailingBoss. Se você não tem uma conta na BuilderAll, crie uma conta de 7 dias grátis.

Entre no MailingBoss Autoresponder->Acessar MailingBoss e preencha os dados em CRIAR NOVA LISTA DE CONTATOS. Dê o nome à lista de EMPREENDEDOR DIGITAL. No topo, clique em LISTAS e clique na engrenagem da Lista de Empreendedor Digital Abra o seletor LINKS RÁPIDOS e escolha a opção VER CAMPOS CUSTOMIZADOS.

Aqui vamos inserir os campos que nos interessam, todos como texto, além do e-mail: senha, nome, idconsultoria e telefone (que chamei de whatsap):

Não esqueça de salvar. Depois selecione em LINKS RÁPIDOS -> formulários de interação. Copie todo contéudo numa janela de texto, para podermos retirar dela as informações que nos interessam para o controlador do core mvc,

 

Podemos ver que a lista esta vazia:

Precisamos alterar o controlador para além de submeter ao database, também “”emular” o submit para o MailingBoss.

Vejamos o código original do POST do CREATE do CORE MVC:

Acrescente ao controlador:

using System.Net.Http;
using System.Net.Http.Headers;

e altere seu código post conforme abaixo. Não se esqueça de incluir a rotina privada para inserir os pares de valores do form e de trocar – no post – o código para o código de sua lista que você guardou no arquivo texto (no meu caso, o código zw93898d6db44 (que é o “cpf” da lista).

Testando a aplicação

No formulário original aparecia o campo MBOSSLASTCLICKS, que não documentado em lugar algum. Simplesmente pedi sua inserção com valor 1:

new KeyValuePair<string, string>(“MBOSSLASTCLICKS”,”1″)

Solicitei o cadastramento com email alcides2@mailinator.com.

O email entrou:

Listando os contatos do MailingBoss, cuja lista estava vazia:

Observe que ele entrou como não confirmado, o que significa que a aplicação funcionou direitinho, emulando o post para o MailingBoss. Vendo os detalhes do contato:

Olhando no Mailinator. vemos que foi remetido um e-mail de confirmação:

Abrindo e e-mail e clicando no link de confirmação:

A confirmação leva para uma tela de confirmação no MailingBoss. Não é o que queremos, mas vamos refinar isso mais adiante:

Voltando aos contatos do MailingBoss, vemos que agora o e-mail está com status confirmado.

No MailingBoss você pode ajeitar o e-mail de confirmação de inscrição, colocando sua arca e acertado oo texto. No meu caso:

Se o usuário clicar no link, vai cair na página de inscrição confirmada do MailingBoss. Como eu quero que ele caiana minha aplicação, tenho de configurar isso clicando no AVANÇADO.

Aí eu defino para onde quero remeter o usuário na minha aplicação e o tempo que isso demora. Deixei com zero segundos.

Não esqueça de clicar em Salvar e próximo. Volto para a aplicação e registro um novo e-mail (alcides3@mailinator.com), vou nos e-mails recebidos (mailinator.com) e clico no link de confirmação. Imediatamente vai para a MINHA tela de confirmação:

Agora é embelezar a tela e mudar o FlagEmailConfirmado na minha aplicação, alterando o valor de 0 para 1. Outra coisa a fazer, uma vez que sei que o e-mail é quente, é inserir o usuário na aplicação de testes, para que ele possa fazer o teste prometido usando os mesmos dados com que se cadastrou na minha lista,

Nova tela de Detalhes

Observe que já passo os parâmetros no link para evitar que o usuário tenha de redigitar o que acabou de cadastrar. O que é bem chato especialmente em celular,

 

Acertando o Controlador

Assim que o usuário vê a tela de detalhes o controlador atualiza o flag de confirmação e chama uma procedure para inserir a pessoa confirmada no sistema de Avaliação e cria uma autoavaliação para ela preencher.

Esta é uma ISCA DIGITAL gratuíta e dá para o interessado, sem custos, sua autoavaliação como empreendedor. Ela poderá ver os resultados em tela, na forma gráfica e em tabelas.

Se ela gostar e quiser que outras pessoas a avaliem (amigos, parentes, pessoal de networking, etc), ela poderá comprar avaliações adicionais por um preço módico. Este seria um UP SELL . Se o resultado dela for muito bom, já na autoavaliação, no MailingBoss, vou colocá-la num FUNIL para ela juntar-se à CAMPANHA DE UM MILHÃO DE EMPREENDEDORES 

 

Ajustes Finais

Quando o usuário se cadastra, o sistema está ainda mandando o usuário para a página Index, que dá a relação de todos os cadastrado Não é isso que queremos: precisamos remetê-lo a uma página dizendo “Que legal, estamos quase lá, Por favor confirme sua inscrição clicando no link recebido por e-mail (veja se não caiu no SPAM”. Assim, o controlador no final do POST do create tem de redirecionar não para Index, e sim para uma pagina diferente. Vamos nos basear na própria página de details.cshtml, criando uma chamada details_confirma_email.cshtml.

Logo após cadastrar um novo e-mail (alcides6@mailinator.com) , aparece a tela do “estamos quase lá”.

O e-mail foi enviado para o Mailinator.com

Depois de clicar no link de confirmação do E-mail, a tela para pré-acessar o teste.

Clicando no botão “Vai para o teste”, a tela já é pré-preenchida

Clicando em entrar a pessoa já pode responder o questionário (no caso sobre seu grau de empreendedorismo).

Todos e-mails ficaram registrados no MailingBoss e com status confirmados.

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.

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

Tutorial

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.

 

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).

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

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.

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

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

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

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…

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.

  • 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).

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:

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.

Adicionando um modelo (model) 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

Tutorial

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

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:

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:

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.

 

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).

 

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.

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.