Blog - Latest News

Vídeo-Aula ASP.Net MVC na prática – Parte 6

39 Comments/ in ASP.Net / by Cleyton Ferrari

12 de janeiro de 2013

Este post é a parte 6 de 16 partes da série ASP.Net MVC

Esta é a sexta parte da série ASP .Net MVC na prática, que ira abordar os conceitos e práticas que norteiam o desenvolvimento de aplicativos baseado no padrão MVC utilizando o ASP .Net

Lembre-se: você pode baixar o código desta vídeo-aula no meu repositório do GitHub, https://github.com/cleytonferrari/ASPNETmvcNaPratica

Nesta sexta vídeo-aula sobre ASP .Net MVC é abordado:

Layout
Render Page
Render Section
Partial View
Twitter Bootstrap

Durante o decorrer desta vídeo-aula sobre ASP .NET MVC você verá como criar Layouts para o seu site usando RenderPage(), RenderSection() e Html.Partial, também verá como instalar e configurar o Twitter Bootstrap no seu site e criar o seu primeiro Layout usando todos esses recursos juntos.

Veja como é simples separar e organizar seus arquivos HTML e reutilizar o seu código usando os recursos/helpers do ASP .Net MVC em seus Layouts web.

Ao final desta vídeo-aula você será capaz de criar Layouts para sites utilizando os recursos do ASP .NET MVC 4 e saberá como começar a usar o Twitter Bootstrap. Será capaz de instalar via Nuget os pacotes necessários do Twitter Bootstrap.

Para saber mais:

ASP .NET

Lembre-se você pode participar da nossa comunidade no Facebook acessando https://www.facebook.com/groups/tiselvagem/

Tags: asp.net, MVC, Vídeo-Aula

← Rotativa W7 gerando relatórios em PDF no ASP.Net MVC

Validação de Data e Moeda (ASP.Net MVC + JQuery Validation) em Português →

Vídeo-Aula: Programação Orientada a Objetos – Teoria e Prática

Vídeo-Aula ASP.Net MVC na prática – Parte 8...

Vídeo-Aula ASP.Net MVC na prática – Parte 9-3

Vídeo-Aula ASP.Net MVC na prática – Parte 9-1

Emerson_Soares

Parabéns, muito bom!
http://cleytonferrari.com/ Cleyton Ferrari

Demorou mais chegou a parte 6!
http://twitter.com/daguiar_br Douglas G. Aguiar

Parabéns, material excelente!!!
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Valeu, obrigado, ajude a divulgar ai se possível.
http://www.facebook.com/marcospaulo.honorato Marcos Paulo Honorato

.Parabéns pela vídeo aula Cleyton. Foi a primeira vez que assistir sua vídeo aula.. e foi bastante didático nas explicações.
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Legal! obrigado!
http://www.facebook.com/people/Matheus-Da-Silva-Santos/100000577271830 Matheus Da Silva Santos

Parabéns Cleyton, muito bom suas video aulas!
Esse ano apresento o meu TCC, e escolhi como tema MVC 4 com bootstrap, suas video aulas estão me ajudando muito, valeu cara!
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Precisando estamos ai, Ok
Leandro

bom dia Cleyton, estou seguindo seus videos e estou gostando muito, parabéns. Gostaria de saber se vc tem algum material sobre Asp.Net WebForms C# pois estou precisando para aprender. Grato desde já pela atenção. Att.
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Cara não tenho não, mais o pessoal do grupo TI Selvagem no facebook tem posta lá https://www.facebook.com/groups/tiselvagem/
  - Leandro
    
    eu postei agora, vou esperar pra ver, obrigado.
http://twitter.com/DiegoSouzaBSB Diego A. de Souza

Cleyton, gostaria de saber como adicionar atributos css tipo class, id…etc nos HtmlHelpers, exemplo consigo colocar no HTMl.BeginForm, mas nao consigo no Html.EditorFor, pois estou tentando colocar o css do bootstrap no form de validaçao da sua aula 3. A proposito, as aulas estão ótimas estou começando agora em ASP.NET e já virei fã. Obrigado.
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Obrigado! estamos ai pra ajudar, eu faço assim,
  
  Html.TextBox(“txtNome”, new { @class = “MinhaClasse” })
polianadias

Muito bom Cleyton! Parabéns!
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Oie @polianadias:disqus obrigado, precisando já sabe née so perguntar!
Rabelo

Cleyton, cara priemiro parabens pelas video aulas sao otimas me ajudam muito.
Mas me deparei com um problema nesse ponto. A versao do meu mvc nao esta permitindo que eu baixe o bootstrap via nuget solicitanto a versao 5 do mvc uso VS2012 e o MVC 4 como vc usa nas video aulas agradeço desde ja a ajuda
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Desculpe a demora, basta usar -version na hora de instalar, assim ele instala a versão 3 do bootstrap, porque assim que acabei de gravar saiu a versão nova.
  
  PM> Install-Package Twitter.Bootstrap -Version 2.3.2
  - Antonio
    
    Para quem Instalar a versão sugerida no vídeo é só rodar o Uninstall do Package que o Visual Studio volta a funcionar
    Assim :
    Uninstall-Package Twitter.Bootstrap.MVC
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Basta usar o -version ok,
  
  PM> Install-Package Twitter.Bootstrap -Version 2.3.2
MARCELO OLIVEIRA SANTOS

Cleyton, parabéns e obrigado por compartilhar seu conhecimento com os demais desenvolvedores. Já tinha desistido de trabalhar com MVC mas vc com suas video aulas me fez ver o quanto é fácil e produtivo programar em MVC4. Gostaria de saber se é possivel utilizar um IF no _Layout.cshtml para carregar um RenderPage com um _Topo.cshtml especifico da RenderBody que esta sendo carregada.Assim se o RenderBody esta carreganco a View Faturamento/Index eu usaria @RenderPage(“~/Views/Shared/_TopoFaturamento.cshtml”).
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Sim pode sim, se quer fazer alguma lógica no layout tu pode usar codigo em C# basta começar o bloco om @{ seu codigo }
  Desculpa a demora, mas esses comentários nao estão indo pro meu email ai quando lembro hahaha
  - Juliano
    
    Mas para isso precisa usar páginas Razor, que aceitam possuem extensão do tipo ‘cshtml’, ou seja, aceita códigos c# em meio ao html
Ronie

Cleyton Muito Bom! mas quando eu instalo o bootstrap pelo nuget aparece a seguinte mensagem de erro:

[A]System.Web.WebPages.Razor.Configuration.HostSection não pode ser convertido em [B]System.Web.WebPages.Razor.Configuration.HostSection. O tipo A se origina de ‘System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35′ no contexto ‘Default’ no local ‘C:WindowsMicrosoft.NetassemblyGAC_MSILSystem.Web.WebPages.Razorv4.0_2.0.0.0__31bf3856ad364e35System.Web.WebPages.Razor.dll’. O tipo B se origina de ‘System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35′ no contexto ‘Default’ no local ‘C:WindowsMicrosoft.NETFrameworkv4.0.30319Temporary ASP.NET Filesrootd65cebe688926230assemblydl358d97d92fb509066_8ffbce01System.Web.WebPages.Razor.dll’.

Sabe o que poder ser?
- Dario
  
  Consegui achar o problema, quando instalamos o package twitter.bootstrap.mvc ele converteu nossa Asp.net MVC para 5.0 e foi necessário configurar o web.config para que a aplicação voltasse a funcionar. Abaixo segue a correção:
  
  Adicionar
  
  substituir
  - Wesley
    
    Vlw Dario
  - http://www.carteiradepedidos.com.br Gilberto Minasoft
    
    Olá Dário,
    Sou iniciante em ASP.NET e tive o mesmo problema, depois que instalei o bootstrap pelo nuget, como mostra o video, a aplicação parou de funcionar. Onde exatamente eu devo colocar esse bloco de código que você citou? Tentei colocar na raiz da web.config mas não deu certo. Tem algum lugar específico para eu colocar isso? Não encontrei nenhuma tag na minha web.config para substituir.
    Desde já agradeço.
    - Dario
      
      Olá Gilberto,
      Essa alteração foi feita no Web.Config conforme mencionei no meu post!
      Abraços!
  - Wagner Nogueira
    
    Dario não consegui, pode me ajudar?
- Luan Marques de Oliveira
  
  Instale o Razor 3.2.3, em seguida troque o sectiongroup no Webconfig para este:
http://cleytonferrari.com/ Cleyton Ferrari

Pessoal, basta usar o -version na hora de instalar o bootstrap assim não da erro, a menos que vc já esteja usando a versão nova no VS com asp mvc 5, para instalar no 2012 com o mvc 4

PM> Install-Package Twitter.Bootstrap -Version 2.3.2

Assim ele instala a versão 2 do bootstrap, a mesma usada no video
Rafael Marques

Bom dia! Primeiramente gostaria dar meus parabéns ao Cleyton Ferrari, suas vídeos aulas estão me ajudando muito.
Comecei essa sua vídeo aula recentemente, tive alguns problemas até descobrir o “PM> Install-Package Twitter.Bootstrap -Version 2.3.2″ que resolveu meu primeiro erro, fiz todos os ensinamentos da aula e quando fui executar surgiu o seguinte erro “Could not load file or assembly ‘System.Web.Optimization, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35′ or one of its dependencies. The located assembly’s manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)” não tenho muita prática com a ferramenta, sendo assim, não consegui resolver esse erro. Já aconteceu o mesmo com alguém? Se possível, me ajudem. Obrigado!
Fagner Moraes

Olá Cleyton eu estou seguindo seus videos com um pouco de atrasado né rs.
Então eu baixei via Nuget o Boostrap (bill Tuner) rsrsrs na com o boostrap.MVC4, pois se eu baixasse só o MVC viria com o 5. Então eu notei que na Content o “Arquivo” BootstrapbudlleConfig é dirente ele não vem com o bootstrap e sim com o css,

Pensei que ele iria somente acoplar junto com o css que ja existia mas não
ele não utiliza o css do bootstrap

eu renomei o css para bootstrap mas sem efeito ele não carrega.

Como posso contornar esse problema?
Paulo Ricardo

Salve, Cleyton!

Em primeiro lugar quero parabenizá-lo pelas excelentes vídeo-aulas que você postou. Infelizmente vim a descobri-las já um pouco atrasado.

A minha dúvida é quando da instalação do Bootstrap. Fiz como recomendado, usando a console e definindo a versão (2.3.2) a ser instalada.

Tudo foi instalado corretamente à exceção da classe BootstrapBundleConfig que NÃO foi criada. Bem, tentei então copiar do seu github e o que aconteceu foi que deu um erro logo na segunda linha da classe:

[assembly: WebActivator.PostApplicationStartMethod(typeof(Aula06.App_Start.BootstrapBundleConfig), “RegisterBundles”)].

WebActivator não está sendo reconhecido pelo .NET. Dá o seguinte erro:
“The type or namespace name ‘WebActivator’ could not be found (are you missing a using directive or an assembly reference?)”

Esse erro ocorreu tanto ao usar o VS 2012 Express quanto o VS 2013 Express.

Qual erro cometi?
Paulo Ricardo Ferreira
- http://cleytonferrari.com/ Cleyton Ferrari
  
  Olá, sobe o código pro gitHub e posta o link aqui ai posso te ajudar!
  - Carlos Oliveira
    
    Bom dia Cleyton, parabens pelas video aulas.. estou aprendendo mvc com vc. Porem cara.estou com o problema do pessoal aqui neste post, tentei instalar a versao Bootstrap -Version 2.3.2 só q ele n criou a classe dentro de app_start BootstrapBundleConfig.cs. ai n funciona. consegue me dar um help??? quero usar esse padrao pra poder seguir com meu projeto mvc. abs
Carlos

Cleyton boa tarde
Uma dica que deu certo comigo:
pra rodar o boostrap no VS2013 eu rodei o:Install-Package Twitter.Bootstrap -Version 2.3.2

ele não criou a pasta:BootstrapBundleConfig, então eu inclui manualmente no BundleConfig os bundles pro bootstrap:

BundleTable.Bundles.Add(new ScriptBundle(“~/bundles/bootstrap”)
.Include(“~/Scripts/bootstrap*”));

BundleTable.Bundles.Add(new StyleBundle(“~/Content/bootstrap”)
.Include(“~/Content/bootstrap.css”, “~/Content/bootstrap-responsive.css”));

Está rodando perfeitamente
Eunice Cecatto

Olá Cleyton, muito bom seus vídeos, estou aprendendo bastante… Gostaria de lhe pedir uma ajuda, eu estou com problema no layout da aula sobre bootstrap. Para mim o menu, não esta ficando um ao lado do outro (home – sobre – contato), ele fica um abaixo do outro. O que esqueci de fazer? Instalei o bootstrap, mudou o visual da pagina, porém isso não consigo ajustar. Poderia me ajudar?
Bruno Pires

Parabéns Cleyton! São ótimas aulas, excelentes explicações com riqueza de detalhe e você tem uma didática incrível.

Estou no período de estágio e aprendendo bem o MVC 4 com as suas aulas.
Obrigado!
Thiago da Silva Santos

Olá Cleyton tudo bem? Bom primeiramente gostaria te dar os parabéns pelas aulas. Pois eu estava querendo aprender uma linguagem de programação e encontrei os seus vídeos e estou acompanhando e aprendendo muito.

Bom eu estou usando o VS 2015 e o MVC na versão 5. Com isso quando chega na parte do vídeo que você ensina a criar o layout de topo, rodapé e o menu lateral faço conforme você ensina no vídeo. Mas quando eu compilo a página não aprece de acordo com o que você mostra. Na verdade a página mostra toda desconfigurada.

No VS 2015 quando vamos criar um novo projeto tem o template de Web Forms e o MVC. Quando seleciono o Web Forms seleciono também as pastas e as referencias MVC (marco o check MVC). Mas sem querer eu cliquei no template MVC e criou um novo projeto tudo blz. Fui olhar as pastas desse projeto e vi que já veio o jquery validation, as views de Home, os controllers home, acount e manage.

A dúvida é qual template eu devo usar para acabar de acompanhar as suas aulas o Web Forms ou MVC? Pois as aulas anteriores eu fiz tudo via template Web Forms que até encontrei uma barreira na aula de validação visto que não estava instalado o jquery validation mas pesquisando na net eu consegui encontrar solução.

Desde já agradeço imensamente por essas aulas.

Blog - Latest News

Vídeo-Aula ASP.Net MVC na prática – Parte 6

Google+

Series

Interesting links

Últimos Comentários