具有多个列和相关值的组合框

时间:2012-06-05 17:26:56

标签: asp.net ajax vb.net drop-down-menu telerik

是否可以在asp.net的组合框/下拉列表中显示多个列和标题并显示相关的列值,例如,如果我点击一个国家/地区名称,那么它应该显示我所有的城市那个国家和点击城市名称应该显示所有相关的地方。

是否有可用的第三方控件?我检查过telerik,他们的组合框有多列,但没有相关值。

2 个答案:

答案 0 :(得分:1)

我不知道'相关'值,每个人;但是你可能需要自己开发它。

除了Telerik之外,如果你不介意使用jQuery,这里有一些你可以免费使用的插件来实现多列/标题方面:

还有一些其他人可以使用this google search来达到顶峰。

有用的参考:jQuery

答案 1 :(得分:1)

我希望这会帮助你开始。

enter image description here

<telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="True" 
    OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
    <ItemTemplate>
        <table width="100%">
            <tr>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Population")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox2" runat="server" AutoPostBack="True" 
    OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged">
    <ItemTemplate>
        <table width="100%">
            <tr>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Population")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox3" runat="server">
    <ItemTemplate>
        <table width="100%">
            <tr>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Population")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>

public class Country
{
  public int Id { get; set; }
  public string Name { get; set; }
  public int Population  { get; set; }
}

public class State
{
  public int Id { get; set; }
  public int CountryId { get; set; }
  public string Name { get; set; }
  public int Population { get; set; }
}

public class City
{
  public int Id { get; set; }
  public int StateId { get; set; }
  public string Name { get; set; }
  public int Population { get; set; }
}

public List<Country> Countries
{
  get
  {
    return new List<Country>
      {
        new Country {Id = 1, Name = "United States", Population = 1000},
        new Country {Id = 2, Name = "Canada", Population = 2000},
        new Country {Id = 3, Name = "Mexico", Population = 3000}
      };
  }
}


public List<State> States
{
  get
  {
    return new List<State>
      {
        new State {Id = 1, CountryId = 1, Name = "California", Population = 100},
        new State {Id = 2, CountryId = 1, Name = "New York", Population = 200},
        new State {Id = 3, CountryId = 2, Name = "Quebec", Population = 300},
        new State {Id = 4, CountryId = 2, Name = "Ontario", Population = 400}
      };
  }
}


public List<City> Cities
{
  get
  {
    return new List<City>
      {
        new City {Id = 1, StateId = 1, Name = "Los Angeles", Population = 10},
        new City {Id = 2, StateId = 1, Name = "San Diego", Population = 20},
        new City {Id = 3, StateId = 1, Name = "San Francisco", Population = 30},
        new City {Id = 4, StateId = 1, Name = "San Joe", Population = 40},
        new City {Id = 5, StateId = 2, Name = "New York", Population = 50},
        new City {Id = 6, StateId = 2, Name = "Paterson", Population = 60},
        new City {Id = 7, StateId = 2, Name = "Newark", Population = 70},
        new City {Id = 8, StateId = 2, Name = "Smithtown", Population = 80},
      };
  }
}

protected void Page_Load(object sender, EventArgs e)
{
  if(!IsPostBack)
  {
    RadComboBox1.DataSource = Countries;
    RadComboBox1.DataValueField = "Id";
    RadComboBox1.DataTextField = "Name";
    RadComboBox1.DataBind();

    RadComboBox1.Items.Insert(0, new RadComboBoxItem("Select Country", ""));
  }
}

protected void RadComboBox1_SelectedIndexChanged(
  object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
  RadComboBox2.Items.Clear();
  RadComboBox3.Items.Clear();

  int countryId;
  if (Int32.TryParse(e.Value, out countryId))
  {
    RadComboBox2.DataSource = States.Where(s => s.CountryId == countryId);
    RadComboBox2.DataValueField = "Id";
    RadComboBox2.DataTextField = "Name";
    RadComboBox2.DataBind();

    RadComboBox2.Items.Insert(0, new RadComboBoxItem("Select State", ""));
  }
}

protected void RadComboBox2_SelectedIndexChanged(
  object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
  RadComboBox3.Items.Clear();

  int stateId;
  if (Int32.TryParse(e.Value, out stateId))
  {
    RadComboBox3.DataSource = Cities.Where(c => c.StateId == stateId);
    RadComboBox3.DataValueField = "Id";
    RadComboBox3.DataTextField = "Name";
    RadComboBox3.DataBind();

    RadComboBox3.Items.Insert(0, new RadComboBoxItem("Select City", ""));
  }
}