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

本文关键字：菜单 HTML 解决 问题 ASP 何使用 NET WebForms 应用程序 | 更新日期: 2023-09-27 18:29:35

我是新的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>

那么如何解决此问题

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

从以下位置更改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页面中）。

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

对于href值，请从"~/"开始标识应用程序根。请参阅ASP.NET网站路径。

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

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

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

相关文章：