1

SO と Google で回答を検索したので、探しているものが見つからなくても気にしないでください。:)

HTML ページ (ASP .NET 4.5 を使用) では、リンク メニューにどのタイプを使用すればよいですか? 基本的に、ページの左側にList<string,string>(href、テキスト、または同様のもの) が表示される「メニュー」を配置したいのですが、これを許可するために HTML で使用するタイプがわかりません。

ループ (笑) について教えてくれるものをオンラインで見つけましたが、他の非常に明白なことを見つけましたが、「<li>タグを置いて空白のままにしてください。ページロードにリンクを入れます」と教えてくれるものは何も見つかりません。または似たようなもの。フロントエンドのタイプを知る必要があるだけです。詳細情報へのリンクがあれば、素晴らしいです! しかし、すぐに必要なのは、使用する HTML タイプと、それが収まる構造です。

ありがとう

4

4 に答える 4

3

まあ、選択できる HTML アイテムのセットは限られています。HREF、INPUT TYPE="BUTTON" または INPUT TYPE="SUBMIT"。

通常、メニューは A タグで実装されます。

もちろん、一部のサイトでは、オンクリックの 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

Option 1

Since you are using ASP.NET WebForms, you have access to the Menu control.

I wrote an article about writing a dynamic SiteMapDataSource, you can take the concepts there and apply them to create a menu. (A menu can be data-bound using a SiteMapDataSource)

If you use ASP.NET 4.5 and WebForms, you can configure the Menu control to render <ul> <li> elements:

Example In (web.config file):

<pages controlRenderingCompatibilityVersion="4.5">

The above line will render a Menu control using <ul> and <li> elements

Option 2

Use the BulletedList control. This control renders automatically <ul> lists:

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

</asp:BulletedList>

Option 3

An alternative approach is to use HTML lists using <ul> and <li>

And then just use CSS styles to create the effect you want

References

NOTE: In any case, I strongly recommend you to read my blog about dynamic SiteMapProviders

Take a look by yourself:

于 2012-10-08T21:22:41.553 に答える
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 に答える
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>して、第 2 レベルのリストを作成します。次に例を示します。

<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 に答える