1

我在 SO 和 Google 上搜索了答案,所以请不要因为我没有找到我要找的东西而感到难过!:)

在 HTML 页面(使用 ASP .NET 4.5)中,我应该使用哪种类型的链接菜单?基本上,我想在页面左侧有一个“菜单”,由List<string,string>(href、text 或类似的东西)填充,我不知道在 HTML 中使用什么类型来允许这样做。

我在网上找到了一些东西,告诉我有关循环(大声笑)和其他非常明显的东西,但我找不到任何东西告诉我“放下<li>标签并将其留空,您将在页面加载中放入链接”或类似的东西。我只需要知道前端类型,如果您有更多信息的链接,那就太好了!但我迫切需要的是要使用的 HTML 类型和它应该位于的结构。

谢谢

4

4 回答 4

3

好吧,您只有一组有限的 html 项目作为选择。HREF、INPUT TYPE="BUTTON" 或 INPUT TYPE="SUBMIT"。

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

当然,有些网站只是简单地对几乎所有导致回发/页面加载的内容应用一点 onclick 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;
}
于 2012-10-08T21:12:48.650 回答
2

选项1

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

我写了一篇关于编写动态的文章SiteMapDataSource,您可以将其中的概念应用到创建菜单中。(菜单可以使用 a 进行数据绑定SiteMapDataSource

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

示例在(web.config文件):

<pages controlRenderingCompatibilityVersion="4.5">

上面的行将使用和元素呈现一个Menu控件<ul><li>

选项 2

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

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

</asp:BulletedList>

选项 3

另一种方法是使用HTML 列表,使用<ul><li>

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

参考

注意:无论如何,我强烈建议您阅读我关于动态的博客SiteMapProviders

自己看一下:

于 2012-10-08T21:22:41.553 回答
0

就通用 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 解释这种层次结构的最佳方式。

于 2012-10-08T21:27:45.060 回答
0

动态左侧菜单 - 简单

      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>

            <% }                

        %>
于 2015-11-23T06:49:30.233 回答