ASP.Net MVC - C# - Criando uma aplicação do Zero

e fala desenvolvedor beleza Acácio Neves aqui com vocês direto do canal programador Tec e nesse a gente vai aprender asp. net mvc a gente vai aprender a criar o nosso Primeiro site a nossa primeira página é isso mesmo você vai aprender a fazer de uma maneira fácil e simples o seu primeiro site aqui na plataforma dot net Então bora lá solta a vinheta 1 [Música] e antes que a gente coloca a mão aqui na massa comece a programar vamos entender um pouco aí do padrão mvc pó mas primeiramente pessoal eu peço que se você não é inscrito no canal já se inscreva no canal aciona o Sininho para você receber sempre notificações dos nossos vídeos compartilha com pessoal aí que quer aprender a programar e vamos fortalecer esse canal pessoal vamos lá antes de mais nada o que que é mvc mvc um padrão de projeto com arquitetura desenvolvimento principalmente utilizado ali nas aplicações web então independente da tecnologia se for PHP secharp Java ou outro tipo de tecnologia a maioria das arquiteturas que a gente utiliza para trabalhar com web a gente segue o padrão mvc Tá mas como funciona tu e o padrão mvc ele é quebrado em três camadas onde a primeira camada é o Model então o que que é Model Model simplesmente ela faz parte de um modelo de dados Ela Vai representar o modelo de dados da sua aplicação então a Model é o nosso modelo de dados aonde a gente vai tanto mapear um retorno de um banco de dados ou até mesmo enviar alguma coisa para o nosso banco de dados basicamente falando daqui a pouco a gente vai ver tudo isso na prática tá agora a gente tem uma outra aqui que a viu ele the model ver viu a viu a viu simplesmente é a página do nosso site então cada página do nosso site a gente considera como viu viu a nossas páginas nosso site Então pensa que eu tenho três páginas do meu site a página inicial a página de contato e a página de meus produtos por exemplo eu tenho três páginas mais ou menos eu tenho 3 vías basicamente navio é onde a gente vai ter todo aquele conteúdo HTML aquela programação dentro dela por fim a gente tem a última camada que a camada Controller que vem ali do MBC é a nossa controla o que que é uma controle controle a um controlador então através da controle a gente vai controlar toda a nossa aplicação e a controlá-la conversa tanto com a viu tanto com a Model tá legal então a nossa Controller Pensa como se fosse um controle remoto aonde a gente consegue controlar tudo através daquele controle Liga a TV desliga a TV aumenta o volume e assim por diante na programação aqui no mvc vai ser a mesma coisa a nossa controle ela vai ter um e a lide gerenciar todo o nosso Beck and tá legal E isso comunica com a viu e com a Model Beleza então uma Brasil bem rápido aqui do que é nbc tá então model-view-controller agora que eu já dei um overview aqui vamos ver isso na prática como funciona então bora lá não sai nesse vídeo não então beleza pessoal vamos abrir aqui nosso visual Studio no meu caso está aberto a gente vai criar aqui o nosso projeto mvc usa não tem Plate aqui nos ao Estúdio Bom primeiramente a gente clica aqui em Create a new Project Beleza então aqui agora a gente tem uns templates padrões aqui que o nosso visual Studio traz aqui para gente a gente vai descer aqui a nossa barra de rolagem e vai procurar por e asp. net o asp.

net Core web api model-view-controller Beleza a gente vai ser Nacional projeto vai clicar em next Beleza agora a gente vai dar um nome para esse projeto eu vou colocar aqui um nome o meu site em mvc Beleza eu vou salvar aqui mesmo nesse diretório Mas você pode salvar no diretório que você bem entender legal clique em next beleza aqui é a versão do Framework que a gente está utilizando no meu caso estou usando a NET 5. 0 tá você pode usar eu 3. 1 se você tiver a versão que você tem instalado aí do.

net tá tipo de autenticação vamos deixar o padrão que é Noni configuration for https pode clicar aqui deixa marcado mesmo ou seja deve estar marcado por padrão esta Flag neibol Razor Run time completion pode selecionar ela porque toda vez que a gente é precisar alterar alguma informação da nossas vios ou do nosso projeto em si eu não preciso rebuildar rodar novamente aplicação para ele aparecer ele vai fazer o resto de Bill de automaticamente tá a gente vai ver mais para frente aqui funcionando então não esqueça de selecionar que o e-mail e agora a gente pode clicar aqui em cliente beleza pessoal projeto criado aqui o nosso projeto mvc já está criado aqui com sucesso vou fechar aqui esse overview que ele abre para gente eu vou abrir aqui com o Solution Explorer o nosso projeto e podemos identificar que ele já criou aqui um projeto modelo para gente do nosso asp. net mvc já tem nas nossas pastas Controller Model View entre outras configurações aqui que ele já deixa que configurado tá legal antes de mais nada vamos jogar um Play nessa nossa aplicação para você entender o que que esse nosso fremor que asp. net mvc ele já cria ele já Deixa pronto aqui para facilitar a nossa vida aqui o desenvolvimento na criação de website só dá play aí no seu visual Studio beleza pessoal projeto aqui startado olha só como é que fácil ele já criou para gente não tem Plate de um projeto de arquitetura em SP net mvc e também as partes básicas ali de um front utilizando a biblioteca do Bootstrap para você que não sabe o que que Bootstrap Bootstrap ele basicamente é um padrão de CSS HTML e JavaScript para facilitar a gente trabalhar aqui com páginas web então você pode ver a documentação do Bootstrap simplesmente colocando no seu Google multi Strap e esse getbootstrap.

com aqui ele tem exemplos de html exemplos de fonte tudo de uma forma gratuita legal esse a gente clicar aqui em Docs a gente tem toda a documentação aqui então por exemplo vamos se dizer que eu quero alguma coisa aqui do de layout eu quero pegar vamos pegar aqui de formulário por exemplo eu quero pegar um formulário de cadastro como se fosse algo do tipo tá aqui e já um exemplo de um HTML de formulário de cadastro já teve um e-mail e uma área aqui para preencher eu tenho exemplos de botões eu tenho exemplos de um monte de conteúdos aqui de html CSS e uma forma fácil e simples utilizando o Bootstrap então por exemplo aqui em Componentes eu tenho aqui botões e outros tipos de componentes você selecionar em botões aqui eu tenho é isso aqui como pré-definido já pelo Bootstrap então eu quero ver a um botão simplesmente eu comprei esse código e colo lá no nosso mvc que automaticamente ele já vai pegar todo esse layout que bonitinho bom mas a ideia agora não é falar de Bootstrap depois a gente prepara um conteúdo para você só sobre Bootstrap agora a gente vai falar que do MDC bom de uma forma simples a gente já tem a nossa página nosso Website aqui criado onde eu tenho a minha rola um peixe e minha página privada aqui como uma segunda página de teste é legal outra coisa que a gente tem aqui ao topo né do nosso site onde tem esse menu de navegação a gente tem um miolo aqui aonde tem as informações que é renderizada né então a Roma e tem esse seja bem vindo a página privada tem essas outras informações e aqui embaixo a gente tem um rodapé é do nosso site que a gente pode identificar que tanto topo tanto rodapé ele não muda ele praticamente está estático aqui já em algumas configurações do nosso projeto e apenas o que muda que é o miolo do nosso site que a gente daria o nome de páginas né então cada entender seria uma página acertam a que a gente teria meio que duas páginas na página arruma uma privacidade Tá legal bom agora que você já viu site mais ou menos como funciona vamos entender bem dentro aqui do nosso projeto como tudo isso aqui funciona então vamos fechar que o nosso navegador e já automaticamente para os outros no sistema agora a gente volta no seu louco já explore e agora vamos entender um pouco aqui o projeto como que ele funciona primeira coisa que você deve entender o seguinte aquele HTML aqueles ISS tudo vem Double Strap certo Aquela aquele layout que ele padrão e onde está essas configurações ela fica tudo dentro dessa pasta www. tjap. ap se você expandir aqui essa pasta a gente tem uma paciente chamada CSS uma JS e a outra Lipe tá dentro dessa paciência SS a gente tem um site com CSS Então dentro desse SS basicamente tem algumas utilizações para que ela nossa página é a mesma coisa dentro desse javscript a gente tem um java script aqui se a gente precisa trabalhar para fazer algum algum inscrito já outro tipo por enquanto a gente não vai fazer nada aqui já buscar leite e a gente tem outra paciente chamada Lib que aí aqui a líbio a gente tá líquido Bootstrap abolido Jack webb de coelho bairro da Chã e aqui no nosso projeto já automaticamente tudo Bootstrap Então dentro dessa pastinha disse a gente tem todos SS necessário para rodar o Bootstrap e todos já escritos necessário para rodar o Bootstrap tá legal então todo aquele layout vem aqui dessa pastinha agora que a gente tem separado também umas três pastas na pasta controllers que o nossos controladores está aqui home controle a pasta models seriam nossos modelos de dados certo e a nossa pasta viu que seria as nossas páginas tá legal EA baixa que a gente tem mais três arquivos esse arquivo EPS no ponto de Jason é o nosso arquivo de configurações então onde a gente pode colocar a configuração aqui da string de conexão com banco de dados geralmente a gente guarda no arquivo de configurações para quando a gente publicar esse nosso projeto se fácil de ser alterado e por ambiente então cada ambiente teria um arquivo de configurações Tá legal bom a gente tem aqui a nossa prova no CS basicamente ela é o nosso motor de arranque era o nosso motorzinho para todo o nosso site ele funcionar através desses dois metros então ele cria que o nosso Man e chama o nosso método abaixo aqui que é o cliente routebuilder então aquele monta todo a nossa conexão todo o nosso motor de start aqui do nosso projeto e podemos ver que aqui ele usa essa Startup ele chama esse essa classe de Startup e o que que tem dentro dessa classe Startup que algumas configurações do nosso projeto mvc se a gente veio aqui aqui a gente tem configurações para falar que a gente vai trabalhar com o controle e vios aqui a gente tem as configurações padrões aqui do nosso projeto e a gente tem a configuração de Startup do nosso projeto então nosso projeto por padrão aqui eles tarta na controle Home tá onde controlar e na Action index tá você já vai entender isso daqui a pouco com o parâmetro aqui que pode ser nulo ou pode vir informação então tem aqui interrogação é para falar que esse parâmetro aqui depois da nossa ação ele pode ou não pode vir preenchido legal bom agora que você já sabe dessas configurações vamos entrar aqui agora e conhecer um pouco mais aqui da nossa faxina Controller Model viveu bom todo interação ela acontece aqui através da controle a controla ela tem acesso direto com a Model e com a viu a viu são as nossas páginas aonde tem todo o nosso conteúdo de html as models vão representar modelo de dados e as controles vão ser os controladores de tudo isso então vamos dar uma olhada como funciona aqui a controle a primeiramente eu vou eu abrir aqui nossa patinha controle eu vou entrar dentro da home controlo é o que a gente vai fazer aqui ó vamos desconsiderar aqui esta linha de código e esse consultor por enquanto a gente não precisa nada disso então você selecionei da linha 14 até a linha 19 pode apagar ta bom agora aqui que a gente pode entender home controle basicamente é uma classe que herda de controle onde todas as funcionalidades que a gente precisa aqui do controlador está dentro dessa classe controla que tá dentro da biblioteca fechada aqui do asp.

net mvc vão se a gente dá um f12 aqui a gente pode entender que tem vários métodos a gente pode utilizar e futuramente a gente vai conhecer todos esses métodos aqui o que cada um deles fazem Tá mas vamos fechar aqui vamos voltar aqui para nossa home controle e vamos entender aqui que acontece a nossa home controle que eu o jogador ela tem aqui três métodos o método index um método de privacidade e o método de erro tá esse método inglês lembra que aqui na nossa Startup Ela tá startando aqui por padrão a Controller homem tá ela não precisa declarar aqui o nome controla porque ele já viu o nome que é home E aí depois ele com Catena junto com controle automaticamente tá então ele pega como padrão a home controla a Oi e a Action de ação que ele vai abrir como um padrão seria inglês e que ainda isso aqui é ação é um método inglês que seria a nossa página principal ali da nossa home e dentro da nossa home a gente tem uma outra página que é de privacidade Tá certo e também aqui a gente tem uma outra página que seria Hero Bom agora vamos lá agora que a gente já viu a controlar aparentemente tranquilo de se mexer a gente vai dar uma olhada navio bom então a gente abrir aqui a nossa patinha viu a gente vai se deparar com outras informações aqui uma pastinha viu uma pastinha share e mais dois documentos por enquanto esquece share Esquece essas esses dois documentos vamos dar uma olhada na página home se a gente expande aqui arrume podemos identificar que agora a gente tem um pesponto cshtml EA privice ponto cshtml o que que é isso aqui basicamente são as nossas páginas dentro da nossa Controller Chrome Então a gente tem duas páginas praticamente aqui dentro da nossa controle normal e ela é separada assim dessa forma você tem uma contra o home então dente de viu você vai ter uma pastinha home que dentro da pasta home você vai ter todas vios que você tem ali como ação dentro da sua controle dentro da Vivo aqui tá bom então se você tá e ainda que isso aqui na controle você tem uma viwix se você tem um assunto pra eles você tem também uma viu prives e esse CSS HTML ele vem simplesmente de CS da linguagem C Sharp e HTML conteúdo HTML e você vai entender o porquê quando a gente entra que alguma entrar aqui nessa ainda que os pontos shtml a gente tem HTML aqui dentro porém a gente pode escrever códigos ser Sharp junto com esse HTML que a gente pode fazer isso aqui a gente pode fazer um foreach o que a linguagem fechada que oferece a gente consegue adicionar dentro aqui no nosso HTML e como usando o Razor o revisor ele foi desenvolvido aqui pela o asp. net mvc tá para facilitar a gente ali a ter conteúdos de HTML e programação e junto com o HTML Tá bom daqui a pouco a gente vai ver se funcionando na prato se a gente entrar na outra página a gente tem a página aqui pra eles aonde a gente tem aqui mais um outro conteúdo de html certo e a gente pode identificar uma coisa vamos dar um play aqui novamente nosso projeto Olha só tanto na home ainda esse tanto aqui na página de privacidade o nosso HTML é bem simples certo ao nosso HTML pequeno e simples só que quando a gente volta aqui tá aqui o nosso HTML da home que a nossa página de start daqui Nossa gata minha linda nossa página de privacidade é mas cadê esse menino Cadê esse rodapé essas informações ela tá separada em uma pasta chamada compartilhamento share por quê Porque isso são itens que vão se repetir para todo o nosso conteúdo Então ela fica num numa página compartilhada para todo mundo utilizar ela então por exemplo Vamos ver aonde está essas informações Bom primeiramente não fecha aqui o seu projeto não dá uma stop não fecha aqui pode abrir aqui seu visual Studio se eu não puxar explore Pode fechar tudo isso aqui para não confundir de e agora a gente vai abrir essa minha share pode entrar nessa anda lá em layout pontos shtml que o nome é que já deixa bem claro é a parte do layout é aonde ele monta toda aquela estrutura de layout e carrega somente aquele conteúdo miolo da nossas páginas que a gente vai criando por exemplo a Roma ainda que se arrume prives certo então aqui no layout olha só aqui a gente tem abertura todos aqui do html html aqui o header título da nossa página a importação da Líbia aqui do Bootstrap o nosso bariak certo e dentro aqui do nosso bar e a gente tem o nosso o menu de navegação onde tem Naomi e a página de privacidade e um pouco mais para baixo a gente tem outro carinha chamado container que uma div que dentro dela aqui a gente tem esse arroba junto de renderbody esse arroba lembra que eu falei agora do riso é onde você pode utilizar HTML fechar eles junto para você usar os echarpe simplesmente você usa a palavra reservada arroba e você usa o comando que existe você Sharp aqui no caso a gente tá usando esse comando padrão que o arroba renderbody porque ele vai fazer o que todas as nossas páginas por exemplo inglês e privacidade vão ser carregadas para dentro aqui desse miolo por exemplo ainda que os pontos shtml que tem esse conteúdo vai é como se pegasse da você encontra os e aqui não encontrou vem tempo de execução para dentro dessa man por e parece aqui esses conteúdos legal e agora aqui um pouco mais para baixo a gente tem o nosso futuro que a nossa que é o nosso rodapé aonde a gente tem aqui 2021 meu site mvc automaticamente aqui dois 21 meu site eu não preciso de um link para privacidade tá E logo abaixo a gente tem a importação dos Java scripts aqui que a gente tem nosso projeto beleza olha só que simples agora que você já sabe que tudo isso daqui está no ABA compartilhada a gente pode até mudar esse nome o homem e privacidade para o nome mas Elegante e esse nome meu site me ver se também para o nome mais elegante e aqui também então Vamos alterar esse nome não precisa fechar tá porque a gente na hora de criar o projeto a gente deixou marcado que ele vai altos compilar quando a gente alterar um dado tá então a gente primeiramente sob tudo lá eu quero alterar o chip Olá tudo isso então eu vou pegar aqui no lugar de meu site em vez eu vou colocar aqui no meu o primeiro site em MDC tá vou copiar esse nome e vou colar aqui também no nosso menu aonde ele aparece aqui ó meu site mvc se a gente procura aqui no nosso navbar a gente tem ele aqui ó meu site em vez eu quero colocar meu primeiro site em inglês e para ficar mais bonito aqui nesse link de navegação de Eu tenho um homem e privacidade eu vou colocar no lugar de Roma eu vou colocar a página principal tá e privacidade eu vou colocar aqui ó a privacidade beleza e agora aqui embaixo também no rodapé vou fazer a mesma coisa vou deixar o 2021 e vou colocar meu primeiro site em mvc aqui aonde está o texto pen drives eu vou colocar privacidade também tá e beleza aqui não precisamos fazer mais nada simplesmente dá um F5 aí na sua aplicação e olha só o que aconteceu Ele já traduziu ele já fez todas essas informações aqui ó na nossa layout Meu Primeiro site página principal e privacidade a que eu coloquei errado deixou mudar que página aqui aí ocupado meu teclado tá errado deixa eu alterar aqui a ele página principal show dar um F5 novamente aqui página principal privacidade e aqui tudo bonitinho já também se eu clicar aqui também já vai para o link tá tá certo e agora que a gente vai fazer a gente vai alterar esse conteúdo aqui ó da nossa página principal como basicamente vamos fechar o nosso layout para gente por enquanto vai mexer mais nada aqui vamos aqui na nossa página home in this process HTML e aqui no lugar de Rual como como colocar Que lindo a e aqui no lugar desse texto com link Vamos colocar simplesmente aqui o meu primeiro site O que é MDC legal e olha lá de um F5 aqui já veio bem vindo meu primeiro site mvc vamos clicar aqui agora em privacidade e Vamos alterar também esse conteúdo e pode fechar aqui o seu amigo pode abrir agora que eu fui da cidade e aqui em privacidade a gente tem a configuração do título então título que vai aparecer aqui ó quando a gente ele tem privacidade aí ele apareceu privacy policy meu primeiro site mvc aqui simplesmente a gente troca o título pelo título que a gente quer eu vou colocar privacidade eu não quero esse H1 aqui tá que isso seria esse tem aqui então não quero estragar um eu vou tirar é que eu vou colocar a minha página que privacidade Vamos dar um F5 tá lá minha página a gente pediu a cidade e página inicial Tá show de bola agora que você já sabe aqui de toda a parte da viu mexi nessa parte de layout vamos entender um pouquinho mais a interação entre a controlar EA Model dentro da nossa viu também então você já vai entender dessa vez Vamos fechar aqui o nosso projeto da um Stop vamos aqui criar uma Model tá então se a gente entrar dentro de models já tem uma moda é o padrão aqui quer sair ouviu Model tá basicamente ela tem alguns atributos Mas vamos desconsiderar ela por enquanto e vamos criar uma outra Model vão dar um botão direito do mouse aqui em modo eu AGT a new item e aqui a gente vai ser o sinal uma classe que uma moda ou é básico é uma classe labrada muito diferente e vamos criar aqui uma Romi Model tá vamo em modo on e dentro dessa ROM mole eu vou criar alguns atributos bloquear um atributo nome e e-mail pior que a gente coloca para criar tributo a gente tem uma o próprio tabi ele já faz toda a estrutura que nossa tributo ele se atributo vai ser stringhi onde eu vou dar um dele que como o nome e eu vou copiar eu vou colar eu vou ter um próximo atributo que vai ser que meio Opa vai ser e-mail beleza show de boto temos aqui já Nossa Romi Model definida que vai passar teu nome e o e-mail E por que que eu fiz isso porque e aqui na nossa home eu gostaria de colocar bem vindo o nome da pessoa que vai vir na minha controla e aqui embaixo seu e-mail é o e-mail da pessoa que tá vendo aqui da home controle como que a gente vai fazer isso primeiramente a gente vai na nossa home controla a gente quer interagir fazer o controle da nossa Roma em inglês então a gente tem que entrar na nossa Roma e controla no nosso método um deles é ó e aqui no nosso método Wings que a gente vai fazer através da viu eu posso pegar as informações da moda esses dados da moda por exemplo nome o e-mail certo como atributo naquela modo mas primeiro eu preciso montar esses dados né você tá informações para esses dados e como que eu vou fazer isso eu simplesmente fui distanciar a Romi Model aqui então vou chamar o modo vou dar um nome aqui de home é igual a new home moda Tá certo ponto, eu acabei distanciar Nossa home e agora eu vou citar os nomes tanto nome tanto o e-mail então nome. Nome vai ser igual Vou colocar aqui a Cassiano Neves tá; eu vou chamar o homem.

E-mail é igual e a Cassiano. Neves@gmail. com e; Tá certo show de bola agora que a gente já stance ou vamo mole já acertou valores para ela como que é viu ela vai ter acesso a essas informações da Rome modo você tem que retornar para dentro da Viu essas informações fechando aqui a gente vai dar um retorno e viu passando fome Tá certo agora a nossa viu ela já vai conseguir interagir com esses dados e de que forma simplesmente a gente pode abrir aqui a nossa viu home e a gente vai ter que aqui em cima ozaki importar essa nossa Romi Model para para dentro dessa nossa viu e como que faz para importar basicamente você vai chamar o arroba e vai colocar um Model minúsculo tá Espaço aí agora você vai falar o nome da modo que a sua vida vai conversar Lembrando que uma viu ela só pode conversar com uma única Model tá então uma moda ela pode estar em várias vios distintas Porém uma viu só pode ver uma modo Tá certo então aqui eu vou colocar home moda Então essa configuração que a gente acabou de fazer simplesmente ela já está setando e deixando claro que a gente vai ler a ROM imóvel e como controlador já stance ou ela e já aceitou o valor para ela e retornou essa viu com esses dados aqui esses dados já vai vir preenchido magicamente Oi e aí que que a gente vai fazer a gente vai colocar bem vindo do tirar aqui vou dar um vírgula e eu vou colocar um nome dessa pessoa que está conectado aqui com a gente na controle simplesmente você vai chamar o arroba lembra a gente vai usar o realizou aqui para mostrar o código vai chamar aqui a nossa Model agora com m maiúsculo tá é dessa forma sempre.

A partir desse momento ele já sabe que você tenha um nome e um e-mail por quê que foi isso aqui que você decorou para ele falando que ele vai seguir tudo que tá vendo essa ROM memória então quero dar bem vindo Model. Nome Tá certo e agora Meu Primeiro site em mvc eu vou criar aqui agora um spam tá vou abrir fechar aqui o nosso espanhol vou colocar o seu e-mail é e aqui eu vou chamar o arroba Model pronto e-mail e agora a gente pode dar um Play na nossa aplicação e olha só interessante já já caiu aqui na nossa página principal já já reconheceu nossos dados aqui ó é bem vindo a Cassiano Neves Meu Primeiro site em vc seu e-mail é a Cassiano Porto neves@gmail. com olha só que fácil que simples em pessoal Então você já fez o seu primeiro site aqui usando o asp.

net mvc muito bem pessoal agora que você já aprendeu aqui fazer um site usando aqui o asp.