Question

我正在从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或一些表控件请给我一些例子。我不知道如何实现这一点。

请记住，我想将每个名字与绿色字母分开，例如：＆＃34; A＆＃34;这就是说，名字是从那个特定的字母开始的。

Answer 1

在另一个中使用两个Repeater控件。一个显示字母，另一个显示基于第一个字符的国家。

马上给你和榜样（煮熟： - ））

好的，我只是使用DataList和Repeater来轻松拥有多个列。您可以通过一些努力对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;
        }
    }
}

希望这有帮助！

如果有帮助，请接受并投票给答案。

如何从数据库中检索数据以实现建议的布局？

1 个答案: