ListBox Web szerver kontrol

A ListBox szintaxisa a következő:

<asp:ListBox id="Listbox1" 
     DataSource="<% databindingexpression %>"
     DataTextField="DataSourceField"
     DataValueField="DataSourceField"
     AutoPostBack="True|False"
     Rows="rowcount"
     SelectionMode="Single|Multiple"
     OnSelectedIndexChanged="OnSelectedIndexChangedMethod"
     runat="server">
   <asp:ListItem value="value" selected="True|False">
      Text
   </asp:ListItem>
</asp:ListBox>

Ahogy az a szintaxisból is látható, a ListBox tulajdonságain kívül adott egy ListItem elem, mellyel a lista elemeit adhatjuk meg, illetve a hozzájuk rendelt kódot.

A ListBox tulajdonságai

A ListItem tulajdonságai

A példaprogram

Nézzük most meg, miként is megy mindez a gyakorlatban. A mellékelt példában készítünk egy DataTable-t, melyet feltöltünk néhány sorral. Ez származhatna akár egy SQL lekérdezés eredményeként is, így az adatok létrejöttét csak az adott feladat határozza meg. Miután létrehoztunk a DataTable-t, két oszlopot veszünk fel. Az egyik lesz a ListBox elemeinek a kódja, másik pedig a megjelenített értéke.

    private void Page_Load(object sender, System.EventArgs e)
    {
      if (!IsPostBack)
      {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID", typeof(Int32));
        dt.Columns.Add("Web", typeof(String));

A DataTable-ben, hogy adat is legyen elhelyezünk két sort.

        DataRow dr;
        dr = dt.NewRow();
        dr[0] = 1;
        dr[1] = "http://www.SoftwareOnline.hu";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[0] = 2;
        dr[1] = "http://mecsek.animare.hu";
        dt.Rows.Add(dr);

Ezt követően hozzákapcsoljuk a ListBox-hoz az adatforrását a DataSource property-n keresztül, majd megadjuk, hogy melyik oszlopból vegye a kontrol a megjelenítendő elemeket (DataTextField) és ezekhez milyen értéket rendeljen (DataValueField).

        ListBox2.DataSource = dt.DefaultView;
        ListBox2.DataTextField = "Web";
        ListBox2.DataValueField = "ID";
        ListBox2.DataBind();
      }

A példában a ListBox3 esetében engedélyeztük, hogy a felhasználó több elemet is kijelöljön egyidejűleg. Alábbi ciklussal azt ellenőrizzük, hogy mely elemek kerültek kijelölésre.

      Label3.Text = "";
      for (int i=0; i<ListBox3.Items.Count; i++)
      {
        if (ListBox3.Items[i].Selected)
        {
          Label3.Text += ListBox3.Items[i].Text + "<br>";
        }
      }
    }

A SelectedIndexChanged esemény felhasználásakor a ListBox SelectedItem property-jén keresztül érhetjük el a kijelölt elemet ListItem típusban. Ennek Text, illetve Value property-jéből pedig megtudhatjuk, hogy mi a kijelölt elem felirata és a hozzárendelt érték.

    private void ListBox1_SelectedIndexChanged(object sender, System.EventArgs e)
    {
      Label1.Text = ListBox1.SelectedItem.Text + ": " + ListBox1.SelectedItem.Value;
    }