C# - ListBox Web szerver kontrol

ASP.NET szintaxis 7. rész

forráskód letöltése
A ListBox kontrol segítségével lehetőségünk nyílik arra, hogy egy tetszőleges tartalmú és elemszámú listát hozzunk létre a web oldalon. Minden lista elemhez egy-egy tetszőleges kódot is rendelhetünk, így alkalmazásunkból kód alapján azonosíthatjuk a felhasználó által kiválasztott elemet.
A ListBox kontrollal az is megoldható, hogy a megjelenítésre szánt adatokat egy tetszőleges adatforrásból vegye a kontrol, mely lehet egy tömb, de akár egy SQL lekérdezés eredménye is.
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
Rows
Osztály: System.Web.UI.WebControls.ListBox
public virtual int Rows {get; set;}
Miután feltettünk a web oldalra egy ListBox kontrolt, a Rows property-jén keresztül beállíthatjuk annak magasságát úgy, hogy megadjuk a Rows property-jébe, hogy hány sor férjen el a ListBox-ban.
Megjegyzés
Ha változik a kontrol mérete, akkor a Rows property-be írt érték hatástalan lesz a továbbiakban.
SelectionMode
Osztály: System.Web.UI.WebControls.ListBox
public virtual ListSelectionMode SelectionMode {get; set;}
A SelectionMode property segítségével megadhatjuk, hogy egy, vagy több elemet lehessen kiválasztani a ListBox-ban.
Érték Leírás
Single A ListBox-ból csak egy elem választható ki.
Multiple A ListBox-ból tetszőleges számú elem választható ki a Ctrl + kattintás módszerrel.
AutoPostBack
Osztály: System.Web.UI.WebControls.ListBox
public virtual bool AutoPostBack {get; set;}
Ha értéke igaz és változik az aktuálisan kijelölt elem, akkor automatikusan visszakerülnek az adatok a szerver alkalmazásunkhoz.
DataSource
Osztály: System.Web.UI.WebControls.ListBox
public virtual object DataSource {get; set;}
A DataSource property-n keresztül adható meg a ListBox-hoz kapcsolandó adatforrás, melyből feltöltésre kerül a lista.
DataTextField
Osztály: System.Web.UI.WebControls.ListBox
public virtual string DataTextField {get; set;}
A DataTextField property-ben kell megadni az adatforrás azon oszlopát, melyben azok az adatok szerepelnek, amelyeket szeretnénk a listában megjeleníteni.
DataValueField
Osztály: System.Web.UI.WebControls.ListBox
public virtual string DataValueField {get; set;}
A DataValueField property-ben kell megadni az adatforrás azon oszlopát, melyben azok az adatok szerepelnek, amelyeket szeretnénk a listában megjelent elemekhez kötni, mint azok értéke.
SelectedIndexChanged
Osztály: System.Web.UI.WebControls.ListBox
public event EventHandler SelectedIndexChanged;
Ez az esemény akkor jön létre, ha megváltozik a kijelölt elem és az adatok visszakerülnek a szerver alkalmazásunkhoz.
Items
Osztály: System.Web.UI.WebControls.ListBox
public virtual ListItemCollection Items {get;}
A lista elemeit az Items property-n keresztül is felvehetjük, kiolvashatjuk.
A ListItem tulajdonságai
Text
Osztály: System.Web.UI.WebControls.ListItem
public string Text {get; set;}
A ListBox egy elemének a feliratát a Text property-n keresztül érjük el.
Value
Osztály: System.Web.UI.WebControls.ListItem
public string Value {get; set;}
A ListBox egy eleméhez rendelt értéket a Value property-n keresztül érjük el.
Selected
Osztály: System.Web.UI.WebControls.ListItem
public bool Selected {get; set;}
Ha a lista egy adott eleme kijelölt, akkor a Selected property értéke igaz.
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;
    }

ASP.NET szintaxis cikksorozat