2014-09-29 59 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

相关问题