none
Como alterar o estilo de uma View em ASP.Net MVC? RRS feed

  • Pergunta

  • Boa tarde, tenho a seguinte dúvida: como faço para alterar o estilo de uma view no ASP.Net MVC utilizando bootstrap?

    Quem puder ajudar com um exemplo de como posso fazer isso, agradeço antecipadamente.

    sexta-feira, 27 de janeiro de 2017 14:27

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".


    quarta-feira, 8 de fevereiro de 2017 15:18

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?

    Att


    William John Adam Trindade
    Analyste-programmeur
    ----------------------------------------------------------



    sexta-feira, 27 de janeiro de 2017 15:30
    Moderador
  • Minha dúvida está relacionada a como alterar o template utilizado por defaut nas views do ASP.Net MVC.
    sexta-feira, 27 de janeiro de 2017 16:54
  • 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

    att


    William John Adam Trindade
    Analyste-programmeur
    ----------------------------------------------------------


    sexta-feira, 27 de janeiro de 2017 17:45
    Moderador
  • Você poderia dar um exemplo prático de como alterar o arquivo Layout.css?

    Desde já agradeço a atenção.

    quarta-feira, 1 de fevereiro de 2017 14:22
  • 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.

    Att


    William John Adam Trindade
    Analyste-programmeur
    ----------------------------------------------------------


    quarta-feira, 1 de fevereiro de 2017 14:27
    Moderador
  • Pelo que pude observar, o link que você me passou é sobre aplicação de temas, gostaria de saber como alterar o layout padrão de uma aplicação ASP.Net MVC.

    Desde já agradeço a atenção.

    quinta-feira, 2 de fevereiro de 2017 12:27
  • 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
    ----------------------------------------------------------

    sexta-feira, 3 de fevereiro de 2017 19:47
    Moderador
  • Quero alterar o layout padrão para que fique como imaginei o layout da empresa.

    Desde já agradeço a atenção.

    quarta-feira, 8 de fevereiro de 2017 13:03
  • 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
    ----------------------------------------------------------


    quarta-feira, 8 de fevereiro de 2017 14:08
    Moderador
  • Sim, tentei.
    quarta-feira, 8 de fevereiro de 2017 14:11
  • 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
    ----------------------------------------------------------


    quarta-feira, 8 de fevereiro de 2017 14:38
    Moderador
  • 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".


    quarta-feira, 8 de fevereiro de 2017 15:18
  • 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. 

    quinta-feira, 16 de fevereiro de 2017 14:09
  • 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
    ----------------------------------------------------------

    quinta-feira, 16 de fevereiro de 2017 14:29
    Moderador