none
Como usar ou aplicar um Layout feito em HTML e Bootstrap em um projecto MVC 5 RRS feed

  • 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

    segunda-feira, 12 de setembro de 2016 11:25

Respostas

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

    segunda-feira, 12 de setembro de 2016 11:51
  • 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

    segunda-feira, 12 de setembro de 2016 12:06
  • 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

    segunda-feira, 12 de setembro de 2016 12:28
  • 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

    segunda-feira, 12 de setembro de 2016 12:45
  • 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

    segunda-feira, 12 de setembro de 2016 12:47
  • Obrigado André,

    vou tentar aplicar mais tarde quando chegar a casa, se tiver dificuldades entro em contacto.

    obrigado


    Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server

    segunda-feira, 12 de setembro de 2016 12:53
  • 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

    quarta-feira, 14 de setembro de 2016 13:23
  • 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

    quarta-feira, 14 de setembro de 2016 13:44
  • Obrigado André,

    eu tentei de alguma maneira, não sei se estou a fazer bem ou não.

    segue em imagens a estrutura do meu sistema:

    ImagensImagem com o layout que eu quero usar


    Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server

    quarta-feira, 14 de setembro de 2016 14:32
  • 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>&copy; 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>&copy; @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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
            </div>
        
    


    Daniel Rosa Iniciante de programação em vb.net, linq sql e Sql server

    quarta-feira, 14 de setembro de 2016 14:39
  • 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

    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

    quarta-feira, 14 de setembro de 2016 14:40
  • 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

    quarta-feira, 14 de setembro de 2016 14:52
  • 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

    quarta-feira, 14 de setembro de 2016 14:56
  • 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

    quarta-feira, 14 de setembro de 2016 15:02