如何使用 ASP.NET WebForms 应用程序中的 HTML 菜单解决此问题？答案

【问题标题】：How to resolve this issue with HTML menu in ASP.NET WebForms application?如何使用 ASP.NET WebForms 应用程序中的 HTML 菜单解决此问题？
【发布时间】：2016-01-09 21:48:40
【问题描述】：

我是新的 ASP.NET WebForms 开发人员，我正在使用 ASP.NET 4.5。我现在正在努力开发菜单。我使用 Bootstrap 作为我的应用程序 UI 的主要样式。另外，我想继续使用普通的 HTML ul 标签来开发这个菜单。但是，我现在正在努力配置此菜单中的链接。网站导航如下：

Home
About 
Contact
Admin > Service Management
      > User Managment

前三页； home、about 和 contact 位于同一个名为 Pages 的文件夹下。在 Pages 文件夹下，还有另一个名为 Admin 的文件夹。此文件夹包括 ServiceManagement 和 UserManagement 页面。我正在努力解决的问题是，当用户浏览 ServiceManagement 或 UserManagement 并单击顶部菜单栏中的主页链接时，他会收到错误，链接如下所示：

http://localhost:61090/Pages/Pages/About.aspx

这是菜单的代码：

    <div class="container">
                        <nav class="navbar navbar-default">
                            <div class="navbar-header">
                                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <a class="navbar-brand" href="index.html">
                                    <img src="../Assets/images/logo.png" alt="">
                                </a>
                            </div>
                            <div class="collapse navbar-collapse js-navbar-collapse">
                                <ul class="nav navbar-nav">
                                    <li><a href="../Pages/Default.aspx" class="active">Home</a></li>
                                    <li><a href="../Pages/About.aspx">About</a></li>
                                    <li><a href="../Pages/Contact.aspx">Contact</a></li>
                    <li class="dropdown mega-dropdown">
                                        <a href="~/Pages/Admin/AdminPage.aspx" class="dropdown-toggle" data-toggle="dropdown">Admin                     <span class="fa fa-angle-down"></span></a>
                        <ul class="dropdown-menu mega-dropdown-menu row">
                                            <li class="col-sm-3">
                                                <ul>
                                                    <li class="">
<a href="~/Pages/Admin/ServiceManagement.aspx">Service Management</a></li>
                            <li class="">User Management</li>
                        </ul>
    </li>
    </ul>
    </li>
                                </ul>
                            </div>
                            <!-- /.nav-collapse -->
                        </nav>
                    </div>

那么我该如何解决这个问题？

【问题讨论】：

标签： c# html asp.net twitter-bootstrap-3 webforms

【解决方案1】：

从以下位置更改您的 HTML 标记：

<a href="../Pages/About.aspx">About</a>

到

<asp:HyperLink ID="lnkAbout" runat="server" Text="About" NavigateUrl="~/Pages/About.aspx"></asp:HyperLink>

从中得出的关键点是，NavigateUrl 属性使用了相对于您的 Web 应用程序的根目录~/ 的路径。这使得从您的 ASPX 页面等中引用页面/内容变得简单。

基于 HTML 的方法

您可以尝试在您的Admin HTML 文件中设置以下内容。

<HEAD>
   <!-- Removed for brevity -->

   <BASE href="http://yourURL/Pages/Admin">

   <!-- Removed for brevity -->
 </HEAD>

我不能 100% 确定这一点，因此您需要自己尝试（仅在 ServiceManagement 和 UserManagement 页面中）。

【讨论】：

感谢您的帮助。有没有办法将其保留为 HTML <a> 而不是使用 ASP.NET 超链接？
您需要发布您的文件/解决方案目录信息，以便我们查看您的结构。此外，您可以尝试使用<a href="/Pages/About.aspx">About</a>，但这可能会在本地从 IIS Express / IIS 运行时导致问题。
@user3107976 你能接受其中一个答案吗？

【解决方案2】：

将属性runat="server" 放在<a> 标记内。

对于您的 href 值，以 "~/" 开头以标识应用程序根。 See ASP.NET Web Site Paths.

例如<a runat="server" href="~/Pages/About.aspx">About</a>

您也可以使用相同的格式来链接您的图像文件：

例如<img runat="server" src="~/Assets/images/logo.png" alt="">

【讨论】：