BootStrap导航栏在每次导航点击时重新加载

时间:2012-07-15 19:01:08

标签: asp.net-mvc twitter-bootstrap nav

我有一个twitter bootstrap导航栏,但是我在一个链接上导航它显然正在用其他所有内容重新加载导航栏。不是不应该这样做吗?如果没有,我想要它。我不确定我的_Layout是否做错了。关于为什么我的导航栏可以重新加载的任何想法?

            <link href="../../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="../../bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/dt-min.js")" type="text/javascript"></script>

    <link href="../../Content/Reflection.css" rel="stylesheet" type="text/css" />
     @Styles.Render("~/Content/themes/base/css", "~/Content/css")
     @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <header>
        <div class="navbar">
          <div class="navbar-inner">
        <div class="container">
            <div class="float-left" style="width:315px">
                <p class="site-title">@Html.ActionLink("Kinfolk", "Index", "Home", new { @style = "color:Orange" })</p>
            </div>

            <div class="float-center">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <nav>

                    <ul id="menu" class="nav">

                        <li>
                         <div class="reflection">
                        <a href="@Url.Action("AllWallPost", "Home")" title="Home">
                            <img src="../../Images/home (1).ico" />
                        </a>  
                         </div>                        
                        </li>  

                        <li>
                         <div class="reflection">
                         <a href="@Url.Action("UserProfile", "UserProfile")" title="My Profile">
                         <img src="../../Images/user.ico" />
                         </a>                           
                         </div>
                        </li>

                        <li>
                         <div class="reflection">
                         <a href="#" title="Events">
                         <img src="../../Images/calendar_2.ico" />
                         </a>                           
                         </div>
                        </li>


                       </li>
                    </ul>

                </nav>
            </div>

        </div>
        </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
            <div class="float-right">
                <ul id="social">
                    <li><a href="http://facebook.com" class="facebook">Facebook</a></li>
                    <li><a href="http://twitter.com" class="twitter">Twitter</a></li>
                </ul>
            </div>
        </div>                            
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

1 个答案:

答案 0 :(得分:1)

从您提供的代码中,单击链接时页面重新加载是正常的。

如果您希望在不重新加载所有内容的情况下更改页面,则必须使用一些Ajax(JavaScript)以及Request.IsAjaxRequest()(控制器)和PartialView(视图)的组合。

这些关键字有很多资源。