Usuário com melhor resposta
Como alterar o estilo de uma View em ASP.Net MVC?

Pergunta
-
Respostas
-
Marcio, não está claro qual realmente é sua dúvida, pois a utilização de um template normalmente é uma tarefa muito simples.
Você basicamente precisa que na sua View que utilizará um template, seja especificado o caminho para o arquivo layout.
Exemplo:
Vamos supor que este seja o HTML do padrão visual da sua empresa (arquivo _Layout.cshtml):
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title>
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</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("Application name", "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> </div> </div> </div> <div class="container body-content"> @RenderBody() @*ESTA LINHA INDICA ONDE O CONTEÚDO DA VIEW SERÁ COLOCADO AO ENVIAR PARA O BROWSER *@ </div> </body> </html>
Daí, para que sua view utilize este layout padrão e só insira o conteúdo do corpo da página você precisa indicar qual o arquivo de layout, assim (arquivo Home.cshtml, por exemplo):
@{ ViewBag.Title = "Título da página"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h1>Conteúdo da página</h1> <p>Aqui vai todo HTML do corpo da página. Este conteúdo será inserido na posição do método RenderBody da sua _Layout.cshtml</p>
Se esta ainda não for a resposta, sugiro que reformule sua pergunta e dê detalhes do que precisa e qual parte não compreende.
If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".
Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".
- Editado Juliano Nunes Silva Oliveira quarta-feira, 8 de fevereiro de 2017 15:20
- Sugerido como Resposta William John Adam TrindadeModerator quarta-feira, 8 de fevereiro de 2017 15:43
- Marcado como Resposta Marcio Nogueira Cardoso Pinto quarta-feira, 15 de fevereiro de 2017 12:47
Todas as Respostas
-
O layout inicial do ASP.NET MVC (pelo menos a partir da versao 4, a 3 eu nao tenho certeza) ja inclui o bootstrap.
Aqui tem um documento completo mostrando como usar o bootstrap com o Asp.NET MVC Core:
https://docs.microsoft.com/en-us/aspnet/core/client-side/bootstrap
e um outro para o MVC4:
http://www.mytecbits.com/microsoft/dot-net/bootstrap-with-asp-net-mvc-4-step-by-step
Mas nao tem segredo. Se voce domina bem o CSS e sabe como funciona o bootstrap, entao é só aplicar à view.
Qual seria sua duvida (ou dificuldade) especifica en relaçao à isso?
William John Adam Trindade
Analyste-programmeur
----------------------------------------------------------
- Editado William John Adam TrindadeModerator sexta-feira, 27 de janeiro de 2017 15:32
-
-
Voce vai ter que trabalhar o arquivo Layout.Cshtml para isso.
Como eu disse, o projeto inicial do MVC já utiliza o bootstrap por padrao. Cabe a voce personalizar o layout.
Aqui mais um link de tutorial de como fazer isso:
https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106
Lembre-se que uma view é 100% HTML quando renderizada. Tudo o que voce faria em uma pagina HTML voce pode aplicar em uma view.
Agora se voce procura templates prontos para o ASP.NET MVC, entao eu sugiro dar uma olhada aqui:
https://wrapbootstrap.com/themes/admin
William John Adam Trindade
Analyste-programmeur
----------------------------------------------------------
- Editado William John Adam TrindadeModerator quarta-feira, 1 de fevereiro de 2017 14:27
- Sugerido como Resposta Paulo M Dalbosco quarta-feira, 8 de fevereiro de 2017 15:53
-
-
Cometi um erro no meu post anterior: Escrevi "layout.css" ao inves de "_layout.cshtml".
aqui tem um tutorial completo:
https://docs.microsoft.com/pt-br/aspnet/core/client-side/bootstrap
Se voce domina HTML e CSS (principalmente o bootstrap) voce nao tera problemas.
William John Adam Trindade
Analyste-programmeur
----------------------------------------------------------
- Editado William John Adam TrindadeModerator quarta-feira, 1 de fevereiro de 2017 14:28
-
-
Tudo é feito no layout.cshtml
Voce conhece bem o Bootstrap? Se sim fica facil.
De um exemplo do que voce quer fazer. O ultimo link que eu passe era sobre como se faz isso, e eu nao entendo qual é a diferença entre "aplicar um tema" e "alterar o layout". A aplicaçao de um tema altera o layout.
Se voce se refere a criaçao de colunas e areas entao basta definir as "divs" do jeito que voce quiser.
Att
William John Adam Trindade
Analyste-programmeur
----------------------------------------------------------
-
-
Seria mais facil se voce dissesse onde esta a su duvida
Voce pelo menos tentou alterar o layout.cshtml?
att
William John Adam Trindade
Analyste-programmeur
----------------------------------------------------------
- Editado William John Adam TrindadeModerator quarta-feira, 8 de fevereiro de 2017 15:43
-
-
E qual é a duvida? O que especificamente voce nao esta conseguindo modificar? Poderia nos dar um exemplo claro do que voce esta tentanto fazer e nao esta conseguindo?
Att
William John Adam Trindade
Analyste-programmeur
----------------------------------------------------------
- Editado William John Adam TrindadeModerator quarta-feira, 8 de fevereiro de 2017 14:38
-
Marcio, não está claro qual realmente é sua dúvida, pois a utilização de um template normalmente é uma tarefa muito simples.
Você basicamente precisa que na sua View que utilizará um template, seja especificado o caminho para o arquivo layout.
Exemplo:
Vamos supor que este seja o HTML do padrão visual da sua empresa (arquivo _Layout.cshtml):
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title>
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</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("Application name", "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> </div> </div> </div> <div class="container body-content"> @RenderBody() @*ESTA LINHA INDICA ONDE O CONTEÚDO DA VIEW SERÁ COLOCADO AO ENVIAR PARA O BROWSER *@ </div> </body> </html>
Daí, para que sua view utilize este layout padrão e só insira o conteúdo do corpo da página você precisa indicar qual o arquivo de layout, assim (arquivo Home.cshtml, por exemplo):
@{ ViewBag.Title = "Título da página"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h1>Conteúdo da página</h1> <p>Aqui vai todo HTML do corpo da página. Este conteúdo será inserido na posição do método RenderBody da sua _Layout.cshtml</p>
Se esta ainda não for a resposta, sugiro que reformule sua pergunta e dê detalhes do que precisa e qual parte não compreende.
If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".
Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".
- Editado Juliano Nunes Silva Oliveira quarta-feira, 8 de fevereiro de 2017 15:20
- Sugerido como Resposta William John Adam TrindadeModerator quarta-feira, 8 de fevereiro de 2017 15:43
- Marcado como Resposta Marcio Nogueira Cardoso Pinto quarta-feira, 15 de fevereiro de 2017 12:47
-
O Bootstrap nada mais é do que uma folha de estilos, ou seja, um arquivo .css. Em minha opinião, ao invés de ter mais de 6.000 linhas, poderia ser quebrado tendo como base a funcionalidade específica para cada recurso a ser manipulado, reduzindo assim, o tamanho do arquivo.
-
Discordo um pouco de voce. O Bootstrap é mais do que uma folha de estilos, ele é um framerwork (ele modifica o comportamento do html) de visualizaçao.
Sim, existe a dimensao CSS (estilos), mas o que é mais interessante no Bootstrap é a padronizaçao que ele oferece.
Att
William John Adam Trindade
Analyste-programmeur
----------------------------------------------------------