如何在 asp.net 网络应用中使用 Razor 制作侧边导航栏

Question

我正在尝试在我的 ASP.NET 网络应用程序中制作侧边栏并使用剃须刀这是 id 现在的样子，我想删除页面末尾和侧边栏之间的白色 space 以及如何使其折叠侧边栏，以便该应用程序可在移动设备上使用这里是页面：

这是代码，我在 asp.net mvc 网络应用程序中使用 bootstrap 和剃刀任何人都可以帮助我被困了两天告诉

<body>

    <div class="container-fluid">
        <div class="row">
           <div class="col-xs-5 col-sm-6 col-lg-4">
               <ul class="nav nav-pills nav-stacked">
                   <li class="active"><a href="#">Home</a></li>
                   <li class="dropdown">
                       <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                           Dropdown <span class="caret"></span>
                       </a>
                       <ul class="dropdown-menu">
                           <li><a href="#">Action</a></li>
                           <li><a href="#">Another action</a></li>
                           <li><a href="#">Something else here</a></li>
                           <li class="divider"></li>
                           <li><a href="#">Separated link</a></li>
                       </ul>
                   </li>
                   <li><a href="~/Views/chapter/Create.cshtml">Profile</a></li>
                   <li class="disabled"><a href="#">Disabled</a></li>

               </ul>
           </div>
            <div class="col-xs-7 col-sm-6 col-lg-8">
                <div class="panel panel-default">
                    <div class="panel-body">
                        Basic panel
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

这里是主要布局

<!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")

</head>
<body>
    <div class="navbar navbar-default 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 class="dropdown">
                        <a href="/classRoom/Primary" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Primary <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="/subject/select/Primary_One">One</a></li>
                            <li><a href="/subject/select/Primary_Two">Two</a></li>
                            <li><a href="/subject/select/Primary_Three">Three</a></li>
                            <li><a href="/subject/select/Primary_Four">Four</a></li>
                            <li><a href="/subject/select/Primary_Five">Five</a></li>
                            <li><a href="/subject/select/Primary_Six">Six</a></li>
                        </ul>

                    </li>

                    <li class="dropdown">
                        <a href="/classRoom/Primary" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Preparatory <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="/subject/select/Preparatory_One">One</a></li>
                            <li><a href="/subject/select/Preparatory_Two">Two</a></li>
                            <li><a href="/subject/select/Preparatory_Three">Three</a></li>
                        </ul>

                    </li>

                    <li class="dropdown">
                        <a href="/classRoom/Primary" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Secondary <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="/subject/select/Secondary_Two">One</a></li>
                            <li><a href="/subject/select/Secondary_Two">Two</a></li>
                            <li><a href="/subject/select/Secondary_Three">Three</a></li>
                        </ul>

                    </li>

                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                    @if (ViewContext.HttpContext.User.IsInRole("Admin"))
                    {
                        <li>@Html.ActionLink("Add Chapter", "newChapter", "chapter")</li>
                    }






                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @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>

如果有人告诉我如何制作一个像这个网站就太好了 http://www.w3schools.com/ 这正是我需要的一切谢谢

Answer 1

在您的 _Layout.csthml 中将 HTML 更改为：

 <div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

为此：

<body>
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</body>

container div 是阻止全宽的原因。保持你的 View 相同但没有 <body> 标签，因为这些标签应该真正保留在布局中。

编辑：

要在移动屏幕上隐藏边栏，您可以用 <div class="hidden-xs">:

包围边栏标记

<div class="row">
    <div class="col-sm-6 col-lg-4">
        <div class="hidden-xs">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Dropdown <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
                <li><a href="~/Views/chapter/Create.cshtml">Profile</a></li>
                <li class="disabled"><a href="#">Disabled</a></li>
            </ul>
        </div>
        </div>
    <div class="col-xs-12 col-sm-6 col-lg-8">
        <div class="panel panel-default">
            <div class="panel-body">
                Basic panel
            </div>
        </div>
    </div>
</div>

根据需要更改可见内容的 col-xs-12 值。

如何在 asp.net 网络应用中使用 Razor 制作侧边导航栏

how make side navbar using razor in asp.net web app

javascript

css

asp.net-mvc

twitter-bootstrap

razorengine