Question

我搜索了SO和Google的答案，所以请不要因为我找不到我想要的东西而感到沮丧！：）

在HTML页面（使用ASP .NET 4.5）中，我应该使用哪种类型的链接菜单？基本上，我想在页面左侧有一个“菜单”，其中填充了List<string,string>（href，文本或类似的东西），我不知道在HTML中要使用哪些类型允许这个。

我在网上找到了关于循环（lol）和其他非常明显的事情的东西，但我找不到任何告诉我“把<li>标记放下并留空的东西，你会在你的页面加载中放入链接“或类似的东西。我只需要知道前端类型，如果你有更多信息的链接然后伟大！但我迫切需要的是要使用的HTML类型以及应该使用的结构。

由于

Answer 1

嗯，你只有一组有限的html项目作为选择。 HREF，INPUT TYPE =“BUTTON”或INPUT TYPE =“SUBMIT”。

通常菜单是用A标签实现的。

当然，有些网站只是简单地应用了一点点onjlick javascript的优点来导致回发/页面加载。

虽然通过简单地拉出你喜欢的网站并检查它的html，你可能会得到更好的服务。

简单输出：

<ul>
  <li><a href="home.aspx">Home</a></li>
  <li><a href="Accounts.aspx">Accounts</a></li>
  <li><a href="Logout.aspx">Log Off</a></li>
</ul>

在您的菜单控件中

<asp:Repeater id="MenuRepeater">
  <headertemplate>
    <ul>
  </headertemplate>
  <itemtemplate>
    <li><a href='<%# ((DataRowView)Container.DataItem)["PageFile"]%>'><%# ((DataRowView)Container.DataItem["DisplayName"]%></a></li>
  </itemtemplate>
  <footertemplate>
    </ul>
  </footertemplate>
 </asp:Repeater>

代码背后：

protected void Page_Load(object sender, EventArgs e) {
  // have something load a datatable with your page file and display name references  

  MenuRepeater.DataSource = GetMenu();
  MenuRepeater.DataBind();
}

protected void DataTable GetMenu() {
  // you would normally pull this from a database, this is here
  // only to show the idea.
  DataTable menu = new DataTable();
  menu.Columns.Add("PageFile", typeof(String));
  menu.Columns.Add("DisplayName", typeof(String));

  DataRow row = menu.NewRow();
  row["PageFile"] = "home.aspx";
  row["DisplayName"] = "Home";
  menu.Rows.Add(row);

  row = menu.NewRow();
  row["PageFile"] = "Accounts.aspx";
  row["DisplayName"] = "Accounts";
  menu.Rows.Add(row);

  row = menu.NewRow();
  row["PageFile"] = "Logout.aspx";
  row["DisplayName"] = "Logout";
  menu.Rows.Add(row);

  return menu;
}

Answer 2

选项1

由于您使用的是ASP.NET WebForms，因此您可以访问Menu控件。

关于编写动态SiteMapDataSource的

I wrote an article，您可以将概念带到那里并应用它们来创建菜单。（菜单可以使用SiteMapDataSource）数据绑定

如果使用ASP.NET 4.5和WebForms，则可以配置Menu控件以呈现<ul> <li>元素：

示例In（ web.config 文件）：

<pages controlRenderingCompatibilityVersion="4.5">

以上行将使用Menu和<ul>元素呈现<li>控件

选项2

使用BulletedList控件。此控件自动呈现<ul>列表：

<asp:BulletedList runat="server"  DisplayMode="HyperLink" BulletStyle="LowerAlpha">

</asp:BulletedList>

选项3

另一种方法是使用<ul>和<li>

使用 HTML列表

然后只使用CSS样式来创建您想要的效果

参考

注意：无论如何， I strongly recommend you to read my blog 关于动态SiteMapProviders

自己看看：

Answer 3

就通用HTML结构而言，没有关于如何设置导航的具体方法，但我个人将导航放入<ul>这样：

<ul id="navigation">
  <li>
    <a href="#">Homepage</a>
  </li>
  <li>
    <a href="#">Second Page</a>
  </li>
  <li>
    <a href="#">Third Page</a>
  </li>
</ul>

奖金：下拉

下拉显然会增加混合的复杂性。如果要添加子导航（下拉菜单），通常会在<ul>标记内添加另一个<li>标记，以创建二级列表。这是一个例子：

<ul id="navigation">
  <li>
    <a href="#">Homepage</a>
  </li>
  <li>
    <a href="#">Second Page</a>
    <ul>
      <li>
        <a href="#">Child Link #1</a>
      </li>
      <li>
        <a href="#">Child Link #2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Third Page</a>
  </li>
</ul>

如果您需要隐藏/显示悬停下拉列表，您只需添加一些CSS：

#navigation ul {
  display: none;
}
#navigation li:hover > ul {
  display: block;
}

只要它对用户来说很简单，那么如何获得链接并不重要。我喜欢<ul>方法，因为它没有任何CSS可读，它在语法上有意义。 IMO，列表是HTML解释这种类型的层次结构的最佳方式。

Answer 4

DYNAMIC LEFT MENU -SIMPLE

      C# CLASS FILES
        public class url_details
        {
            public string url;
            public string page_name;
            public string icon;
        }

        C# inside login page            
        List<url_details> url_list = new List<url_details>();            
        foreach (DataRow dr in dataTable.Rows)
        {
            url_details url_item = new url_details();
            url_item.url = dr["url"].ToString();
            url_item.page_name = dr["page_name"].ToString();
            url_item.icon = dr["icon"].ToString();
            url_list.Add(url_item);
        }           
        Session["urls"] = url_list;


        C#-HTML MENU FORM
         <%
            var uruls = (List<url_details>)Session["urls"];
            foreach (var url in uruls)
            {%>
                <li><a href="..<%=url.url %>"><%=url.icon %><span><%=url.page_name %></span></a></li>

            <% }                

        %>

创建动态菜单？

4 个答案:

选项1

选项2

选项3

参考

奖金：下拉