Construindo uma ASP.Net MVC 4 Web Application usando Bootstrap no front-end

Transcrição

1 Construindo uma ASP.Net MVC 4 Web Application usando Bootstrap no front-end A partir de uma ASP.Net MVC 4 Web Application com o Project Template Basic, aprenda a incluir, "configurar" e "usar" alguns dos scripts, estilos e componentes do Bootstrap. Baixe o Bootstrap em: Clique em "Download BootStrap". Nesse link você tem a versão de distribuição que contém somente os arquivos mínimos necessários pro Bootstrap rodar no seu site. Abra o Visual Studio 2012, crie em novo projeto MVC 4 Web Application usando o Project Template Basic.

2 Depois de confirmar a caixa de diálogo "New Project", selecione na caixa de diálogo "New APS.Net MVC 4 Project" o Template Basic e marque a opção de criação de um projeto de testes. Crie a pasta "bootstrap" no raiz da sua WebApp. Copie o conteúdo do zip baixado do "Bootstrap redist" pra pasta bootstrap criada na sua WebApp. O seu projeto ficará da seguinte forma:

3 Adicione a controller HOME no seu projeto clicando com o botão invertido do mouse na pasta Controllers da sua WebApp. Na classe HomeController, clique com o botão invertido do mouse no método Index a adicione a view "Index.cshtml". Use as opções padrão da caixa de diálogo "Add View".

4 A princípio, a WebApp terá uma página "Index" (que é a home) e uma página de login. É necessário baixar dois css de "template demo" do bootstrap no github e copiar para a pasta ~/bootstrap/css/templates/. A WebApp usa também o holder.js para os place holders de imagens, que deve ser copiado para a pasta /bootstrap/js/holder. Seguem os links para donwload: Starter Template:

5 Signin CSS: holder.js: Segue a estrutura final da pasta bootstrap da WebApp. Abra o App_Start\BundleConfig.cs e altere os Includes dos bundles ~/bundles/jquery e ~/Content/css de forma que esses apontem para os arquivos de java script e css do BootStrap conforme abaixo: bundles.add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-version.js", "~/bootstrap/js/bootstrap.js" )); bundles.add(new StyleBundle("~/Content/css").Include("~/bootstrap/css/bootstrap.css", "~/bootstrap/css/templates/starter-template.css")); Inclua o bundle abaixo para viabilizar a utilização do holder.js. bundles.add(new ScriptBundle("~/bundles/holder").Include( "~/bootstrap/js/holder/*.js")); Inclua também os bunbles para as páginas de Login e Contact. bundles.add(new StyleBundle("~/login/css").Include("~/bootstrap/css//templates/signin.css")); bundles.add(new StyleBundle("~/contact/css").Include("~/bootstrap/css/templates/contact.css", "~/bootstrap/css/font-awesome.css"));

6 Nesse ponto a WebApp já tem uma página index e já pode usar qualquer componente ou estilo do bootstrap. Crie uma página de login, about, contato e uma página inicial, todas com um menu usando o Starter Template do Bootstrap. Pra criar o menu, adicione na pasta View\Shared uma partial view chamada _Menu. Clique com o botão invertido do mouse na pasta View\Shared do seu projeto e adicione uma view. Abaixo a caixa de diálogo da view. A partial view criada (~/Views/Shared/_Menu.cshtml) deverá ter o seguinte conteúdo (que é o menu da WebApp): <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> Demo", "Index", "Home", null, <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active">@html.actionlink("home", "Index", "Home")</li> <li>@html.actionlink("log in", "Login", "Account")</li>

7 "About", "Home")</li> "Contact", "Home")</li> </ul> Para exibir o menu em todas as páginas da WebApp edite a view de layout ("~/Views/Shared/_Layout.cshtml") e acrescente a chamada à partial view do Menu criada anteriormente. Segue o Html.RenderPartial("~/Views/Shared/_Menu.cshtml"); ; As views abaixo também devem criadas na nossa aplicação: ~/Views/Home/About.cshtml ~/Views/Home/Contact.cshtml ~/Views/Ac count/login.cshtml Crie uma nova controller chamada AccountController e acrescente a Action Login conforme abaixo, adicionando, em seguida, a view de Login conforme mostrado no início do post. Segue a AccountController. public class AccountController : Controller public ActionResult Login() O mesmo deve ser feito na HomeController para as actions de About e Contact. Segue a implementação da HomeController. public class HomeController : Controller public ActionResult Index() public ActionResult About() public ActionResult Contact() Pode-se também acessar os fontes da WebApp desse post e verificar o conteúdo das páginas Login, Contact e About com as "chamadas" aos componentes do Bootstrap no projeto que está publicado no CodePlex em