Usuário com melhor resposta
Como usar ou aplicar um Layout feito em HTML e Bootstrap em um projecto MVC 5

Pergunta
-
Bom dia a todos,
por favor, tenho dois Layouts prontos para area Publica e um para a area Administrador, quero aplicar os dois no meu sistema MVC, feito em visual studio 2015.
como faço para usar estes layouts e onde devo chamar e aplicar no meu sistema?
Obrigado para quem poder me ajudar, se for preciso posso ate lhe enviar ou mostrar se for o caso.
Obrigado
Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server
- Movido AndreAlvesLima segunda-feira, 12 de setembro de 2016 14:11
Respostas
-
Olá Daniel,
Como se trata de um layout, deve ir nas suas Views de apresentação para o usuário.
Terás que montá-las e realizar os ajustes necessários.
Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!
André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco- Marcado como Resposta danielbeneditorosa segunda-feira, 12 de setembro de 2016 12:04
-
Daniel, você deve começar exatamente incluindo o código na sua View. Pegar o código de seu template (em html) e todos os arquivos relacionados (.css, .js) e incluir na View que está mostrando.
Por acaso se estiver usando um arquivo de _Layout.cshtml podes adicionar nele. Sugiro antes de começar os testes, realizar um backup do seu código.
Valeu!
Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!
André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco- Marcado como Resposta danielbeneditorosa segunda-feira, 12 de setembro de 2016 12:41
-
Isso, na verdade você deve adicionar todos os arquivos que esse seu layout utiliza para funcionar ou exibir as coisas de forma correta
Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!
André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco- Marcado como Resposta danielbeneditorosa segunda-feira, 12 de setembro de 2016 12:52
Todas as Respostas
-
Olá Daniel,
Como se trata de um layout, deve ir nas suas Views de apresentação para o usuário.
Terás que montá-las e realizar os ajustes necessários.
Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!
André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco- Marcado como Resposta danielbeneditorosa segunda-feira, 12 de setembro de 2016 12:04
-
Muito obrigado André,
é mesmo isso, o problema é por onde devo começar a aplicar os codigos ?
se for necessario posso te mandar por email os dois layouts para dares uma olhada.
Muito obrigado mais uma vez.
Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server
-
Daniel, você deve começar exatamente incluindo o código na sua View. Pegar o código de seu template (em html) e todos os arquivos relacionados (.css, .js) e incluir na View que está mostrando.
Por acaso se estiver usando um arquivo de _Layout.cshtml podes adicionar nele. Sugiro antes de começar os testes, realizar um backup do seu código.
Valeu!
Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!
André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco- Marcado como Resposta danielbeneditorosa segunda-feira, 12 de setembro de 2016 12:41
-
Obrigado André,
extamente isso mestre, quero que o meu _Layout.cshtml abra os arquivos ja criados neste layout pronto.
tenho que adicionar a pasta completa do layout no meu sistema, certo!
Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server
-
Isso, na verdade você deve adicionar todos os arquivos que esse seu layout utiliza para funcionar ou exibir as coisas de forma correta
Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!
André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco- Marcado como Resposta danielbeneditorosa segunda-feira, 12 de setembro de 2016 12:52
-
-
Boa tarde André,
Tentei aplicar ontem mas tive dificuldade, tentei copiar e colar o codigo do html para as views ao executar não funcionava como devia.
tentei fazer com que a aplicação arrancasse com o meu layout ao abrir, mas naõ funcionou, queria que me desses uma ajudinha.
obrigado no que poderes me ajudar
Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server
-
O que não funcionou?
Dá algum erro? Poste o erro, código e prints se necessário
Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!
André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco -
-
Este é o codigo do Layout Html Index que eu quero usar, na verdade são varias paginas Html:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Shamcey - Metro Style Admin Template</title> <link rel="stylesheet" href="css/style.default.css" type="text/css" /> <link rel="stylesheet" href="css/style.shinyblue.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script> <script type="text/javascript" src="js/modernizr.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript" src="js/custom.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#login').submit(function(){ var u = jQuery('#username').val(); var p = jQuery('#password').val(); if(u == '' && p == '') { jQuery('.login-alert').fadeIn(); return false; } }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body class="loginpage"> <div class="loginpanel"> <div class="loginpanelinner"> <div class="logo animate0 bounceIn"><img src="images/logo.png" alt="" /></div> <form id="login" action="dashboard.html" method="post" /> <div class="inputwrapper login-alert"> <div class="alert alert-error">Invalid username or password</div> </div> <div class="inputwrapper animate1 bounceIn"> <input type="text" name="username" id="username" placeholder="Enter any username" /> </div> <div class="inputwrapper animate2 bounceIn"> <input type="password" name="password" id="password" placeholder="Enter any password" /> </div> <div class="inputwrapper animate3 bounceIn"> <button name="submit">Sign In</button> </div> <div class="inputwrapper animate4 bounceIn"> <label><input type="checkbox" class="remember" name="signin" /> Keep me sign in</label> </div> </form> </div><!--loginpanelinner--> </div><!--loginpanel--> <div class="loginfooter"> <p>© 2013. Shamcey Admin Template. All Rights Reserved.</p> </div> </body> </html>
Este é o codigo do Layout padrão do MVC que esta no sistema:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - YRAA</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("YRAA", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> @Html.Partial("_LoginPartial") </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - YRAA</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body> </html>
Este é o codigo da View Index padrão que vem num sistema MVC:
@{ ViewBag.Title = "Home Page"; } @* <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> *@ <div class="col-md-4"> <h2>Getting started</h2> <p> ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and gives you full control over markup for enjoyable, agile development. </p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p> </div> <div class="col-md-4"> <h2>Get more libraries</h2> <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p> </div> <div class="col-md-4"> <h2>Web Hosting</h2> <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p> </div>
Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server
-
Pelo que percebi você apenas jogou os arquivos de layout dentro de uma pasta. Dessa forma não funcionará
Terás que colocar o conteúdo do arquivo html que deseja dentro do arquivo _Layout.cshtml. Caso não tenha muita experiência de como fazer isso, recomendo que dê uma estudada antes em ASP.NET MVC, vai te ajudar bastante.
Se quiser aqui tem uma série de vídeo aulas iniciais para MVC: https://www.youtube.com/playlist?list=PLR_Rg7fVzrcdCbvbtm5R2jm82e-N5twrr
Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!
André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco -
Obrigado André,
sendo assim terei que criar um arquivo _Layout.cshtml. para cada Layout Html e colocar nele o codigo ?
Sim eu copiei a pasta completa com varios arquivos e adicionei ao projecto.
Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server
-
Não, o _Layout.cshtml nesse caso é único no seu projeto e é compartilhado em todas as Views que você cria (se selecionar para usar o layout padrão).
Se desejar pode criar um outro arquivo _LayoutAdm.cshtml para fazer a parte administrativa. Só fique atento que nesse caso quando for criar uma view que pertence ao administrativo deverá selecionar esse _LayoutAdm.cshtml
Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!
André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco -
Obrigado André,
posso te enviar por email meu arquivo de layouts?
para teres uma ideia melhor, por favor.
meu amil:
danielbeneditorosa@hotmail.com
danielbeneditogi@gmail.com
Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server