2014-09-29 48 views
0

我正在從ASP.NET構建一個網站。 有一個頁面用戶可以選擇國家。 下面是截圖如何從數據庫中檢索數據以實現建議的佈局?

enter image description here

我存儲在MySQL表的國家。但在這個頁面我用這樣的超鏈接

<asp:Literal ID="Literal2" runat="server" Text="<b><font size=3 color=green>A</font></b>"></asp:Literal><br /> 
<asp:HyperLink ID="HyperLink1" NavigateUrl="~/Categories.aspx?con=1&cou=1" runat="server">Algeria</asp:HyperLink><br /> 
<asp:HyperLink ID="HyperLink2" NavigateUrl="~/Categories.aspx?con=1&cou=2" runat="server">Angola</asp:HyperLink><br /> 

所以要實現這種佈局我用上面的方法。而不是上面的方法不能我直接從表中加載它們並生成上面的佈局?我試圖使用樹視圖控件。但是這種控制不會給出上述格式。我需要該列布局。如果你建議我使用gridview或者一些表格控件,請給我一些例子。我沒有任何想法如何實現這一點。

記住我想把每個名字與綠色字母分隔開,例如:「A」表示名字是以該特定字母開頭的。

回答

1

使用兩個Repeater控制一個在另一個。一個顯示字母,另一個顯示基於第一個字符的國家。

會給你和例如在某一時刻(即熟:-))

好吧,我只是用一個DataList和Repeater只是有輕鬆多列。你可以用中繼器做一些努力。

首先有您的標記如下

<asp:DataList ID="Categories" runat="server" ItemStyle-Width="150" RepeatColumns="4" 
     onitemdatabound="Categories_ItemDataBound"> 
     <ItemTemplate> 
      <asp:HyperLink ID="hlCategory" NavigateUrl="#" runat="server" ForeColor="#0099CC"><%# Container.DataItem %></asp:HyperLink><br />   
      <asp:Repeater ID="rptCountries" runat="server"> 
       <ItemTemplate> 
        <asp:HyperLink ID="hlCountry" NavigateUrl="~/Categories.aspx?con=1&cou=1" runat="server"><%# Eval("Name") %></asp:HyperLink><br /> 
       </ItemTemplate> 
      </asp:Repeater> 
     </ItemTemplate> 
    </asp:DataList> 

那麼後面

using System; 
using System.Web.UI.WebControls; 
using CountryDisplay; 

namespace WebApplication1 
{ 
    public partial class WebForm1 : System.Web.UI.Page 
    { 
     /// <summary> 
     /// Create a property to hold all your countries retrieved from the database 
     /// I assume you have you'll have one row for each country 
     /// </summary> 
     public CountryCollection AllCountries 
     { 
      get 
      { 
       if (ViewState["AllCountries"] != null) 
       { 
        return (CountryCollection)ViewState["AllCountries"]; 
       } 
       return new CountryCollection(); 
      } 
      set 
      { 
       ViewState["AllCountries"] = value; 
      } 
     } 

     protected void Page_Load(object sender, EventArgs e) 
     { 
      if (!IsPostBack) 
      { 
       GetAllCountriesFromDatabase(); 

       char[] alphabet = new char[] { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'S' }; // Get this from DB, I'm just mocking for illustration purpose. 

       Categories.DataSource = alphabet; 
       Categories.DataBind();     
      } 
     } 

     /// <summary> 
     /// Gets all Countries from database. 
     /// </summary> 
     private void GetAllCountriesFromDatabase() 
     { 
      AllCountries = new CountryCollection(); 
      /* At this point you should know how to retrieve your data from DB and fill the AllCountries collection 
      E.g. 

      AllCountries = DalService.GetAllCountriesFromDatabase(); // DalService could be your Data Access layer and GetAllCountriesFromDatabase() is one of it's methods 

      I'll be creating some dummy logic to fill the collection for demo purpose from this point onwards 

      */ 

      // Add countries to the collection 
      Country country = new Country("America"); 
      country.ID = 1; 
      AllCountries.Add(country); 

      country = new Country("Australia"); 
      country.ID = 2; 
      AllCountries.Add(country); 

      country = new Country("Sri Lanka"); 
      country.ID = 3; 
      AllCountries.Add(country); 

      country = new Country("India"); 
      country.ID = 4; 
      AllCountries.Add(country); 

      country = new Country("Canada"); 
      country.ID = 5; 
      AllCountries.Add(country); 
     } 

     protected void Categories_ItemDataBound(object sender, DataListItemEventArgs e) 
     { 
      if (e.Item.ItemType == ListItemType.Item || 
      e.Item.ItemType == ListItemType.AlternatingItem) 
      { 
       // Retrieve the hlCategory control in the current DataListItem. 
       char cCategory = (char)e.Item.DataItem; 
       Repeater rptCountries = (Repeater)e.Item.FindControl("rptCountries"); 

       if (!char.IsWhiteSpace(cCategory) && rptCountries != null) 
       { 
        rptCountries.DataSource = AllCountries.FindAll(a => a.Name.StartsWith(cCategory.ToString())); 
        rptCountries.DataBind(); 
       } 
      } 
     } 
    } 
} 

的代碼和一些模型類

using System; 
using System.Collections.Generic; 

namespace CountryDisplay 
{ 
    [Serializable] 
    public class CountryCollection : List<Country> { } 

    [Serializable] 
    public class Country 
    { 
     public int ID { get; set; } 
     public string Name { get; set; } 

     public Country(string name) 
     { 
      this.ID = 0; 
      this.Name = name; 
     } 
    } 
} 

希望這有助於!

接受並投票答案,如果它有幫助。

+0

查看更新後的答案。添加從數據庫中檢索數據的邏輯。我只是嘲笑了數據的插圖。 – Sam 2014-09-29 07:26:55

+0

非常感謝你sam。我很感激。 – Sylar 2014-09-30 14:00:55

+0

不用擔心。如果它有幫助,請給一個投票。乾杯! – Sam 2014-09-30 22:41:47