locked
easy way to change the default layout page in ASP.NET MVC project RRS feed

  • Question

  • User364607740 posted

    The default layout page in ASP.NET MVC project has horizontal layout menu bar. But I want vertical menu bar. I tried implementing new themes for this, but I found lots of complications regarding dependencies jquery and other js files. And also with ts files. 

    Is there any easy way to have default vertical menu bar page layout page ?

    Thank You!!!

    Wednesday, October 30, 2019 4:01 PM

Answers

  • User665608656 posted

    Hi scala,

    thank you for the reply. yes there are lots of free templates. but implementing them is difficult. Especially to check dependencies with js files. 

    According to your description, I suggest you use custom css to implement this function.

    And if you want to change the style of this menu, you just can change the code in your custome css file.

    You can refer to this link for more details : How TO - Fixed Sidebar

    If you do this, you just need to add a css reference and don't have to worry about how to reference which js files. For details, you can refer to the following code:

    Create a css file in your project :

    body {
        font-family: "Lato", sans-serif;
    }
    
    .sidenav {
        height: 100%;
        width: 160px;
        ;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        padding-top: 30px;
    }
    
        .sidenav a {
            padding: 6px 8px 6px 16px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
        }
    
            .sidenav a:hover {
                color: #f1f1f1;
            }
    
    .main {
        margin-left: 160px; /* Same as the width of the sidenav */
        padding: 0px 10px;
    }
    
    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }
    
            .sidenav a {
                font-size: 18px;
            }
    }
    

    Then, change the layout page like the following code:

    <!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>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <link href="~/Content/StyleSheet1.css" rel="stylesheet" /> @*add the reference for the css you created*@
    </head>
    <body>
        <div class="sidenav">
            @Html.ActionLink("Home", "Index", "Home")
            @Html.ActionLink("About", "About", "Home")
            @Html.ActionLink("Contact", "Contact", "Home")
        </div>
    
        <div class="container main">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
        
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    
    </body>
    </html>
    

    When you create a view with this layout page, you can see the following result:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 31, 2019 6:45 AM

All replies

  • User475983607 posted

    Is there any easy way to have default vertical menu bar page layout page ?

    Just do a Google search for a Bootstrap templates.  There are tons and tons of free layouts and CSS.

    Wednesday, October 30, 2019 4:04 PM
  • User364607740 posted

    @mgebhard

    thank you for the reply. yes there are lots of free templates. but implementing them is difficult. Especially to check dependencies with js files. 

    Wednesday, October 30, 2019 4:08 PM
  • User475983607 posted

    scala_1988

    thank you for the reply. yes there are lots of free templates. but implementing them is difficult. Especially to check dependencies with js files. 

    Should we assume you have a template in mind but are having difficulty adding file references to the layout page?  Usually, the templates have the file references and it is just a simple copy and paste.  Ultimately it is up to you to define a layout out that fits your UI requirements.

    https://getbootstrap.com/docs/4.0/components/navs/

    This link has guides to get started.

    https://startbootstrap.com/themes/

    Wednesday, October 30, 2019 4:40 PM
  • User665608656 posted

    Hi scala,

    thank you for the reply. yes there are lots of free templates. but implementing them is difficult. Especially to check dependencies with js files. 

    According to your description, I suggest you use custom css to implement this function.

    And if you want to change the style of this menu, you just can change the code in your custome css file.

    You can refer to this link for more details : How TO - Fixed Sidebar

    If you do this, you just need to add a css reference and don't have to worry about how to reference which js files. For details, you can refer to the following code:

    Create a css file in your project :

    body {
        font-family: "Lato", sans-serif;
    }
    
    .sidenav {
        height: 100%;
        width: 160px;
        ;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        padding-top: 30px;
    }
    
        .sidenav a {
            padding: 6px 8px 6px 16px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
        }
    
            .sidenav a:hover {
                color: #f1f1f1;
            }
    
    .main {
        margin-left: 160px; /* Same as the width of the sidenav */
        padding: 0px 10px;
    }
    
    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }
    
            .sidenav a {
                font-size: 18px;
            }
    }
    

    Then, change the layout page like the following code:

    <!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>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <link href="~/Content/StyleSheet1.css" rel="stylesheet" /> @*add the reference for the css you created*@
    </head>
    <body>
        <div class="sidenav">
            @Html.ActionLink("Home", "Index", "Home")
            @Html.ActionLink("About", "About", "Home")
            @Html.ActionLink("Contact", "Contact", "Home")
        </div>
    
        <div class="container main">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
        
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    
    </body>
    </html>
    

    When you create a view with this layout page, you can see the following result:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 31, 2019 6:45 AM