Опубликован: 07.05.2010 | Доступ: свободный | Студентов: 1678 / 62 | Оценка: 4.56 / 4.06 | Длительность: 34:11:00
Специальности: Программист, Архитектор программного обеспечения, Разработчик интернет-проектов
Теги:
Лекция 4:
Серверные элементы управления
Списковые Web-элементы управления
Как видно из приведенной ранее схемы иерархии классов, общим базовым классом для списковых элементов управления является класс System.Web.UI.WebControls.ListControl, который передает им все свои свойства и методы, а также событие SelectedIndexChanged. В таблице приведены классы, представляющие списковые Web-элементы.
Из цепочки наследования через базовый класс System.Web.UI.WebControls.ListControl элементы управления наследуют некоторые важные свойства
Элементы управления CheckBoxList и RadioButtonList добавляют свои индивидуальные свойства
Пример списковых Web-элементов
-
Добавьте к приложению новую страницу ListControls.aspx с разделенным кодом -
Поместите на форму из вкладки Standard элементы управления и настройте их в соответствии с приведенным дескрипторным представлением страницы. Декларативное (в режиме проектирования) добавление элементов списка выполняйте через окно редактора свойства Items
Отметьте, что для примера мы удалили идентификатор кнопки Button, поскольку не собираемся ею программно управлять.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListControls.aspx.cs" Inherits="ListControls" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>ListControls</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" Rows="5"> <asp:ListItem Selected="True">Опция 1</asp:ListItem> <asp:ListItem>Опция 2</asp:ListItem> </asp:ListBox> <p /> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem Selected="True">Опция 1</asp:ListItem> <asp:ListItem>Опция 2</asp:ListItem> </asp:DropDownList> <p /> <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatColumns="3"> <asp:ListItem Selected="True">Опция 1</asp:ListItem> <asp:ListItem>Опция 2</asp:ListItem> </asp:CheckBoxList> <p /> <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"> <asp:ListItem Selected="True">Опция 1</asp:ListItem> <asp:ListItem>Опция 2</asp:ListItem> </asp:RadioButtonList> <p /> <asp:Button runat="server" OnClick="Button1_Click" Text="Отправить" /> </div> </form> </body> </html> -
Заполните файл скрытого кода так
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class ListControls : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { for (int i = 3; i <= 5; i++) { ListBox1.Items.Add("Опция " + i.ToString()); DropDownList1.Items.Add("Опция " + i.ToString()); CheckBoxList1.Items.Add("Опция " + i.ToString()); RadioButtonList1.Items.Add("Опция " + i.ToString()); } } } protected void Button1_Click(object sender, EventArgs e) { // Перебор для элемента ListBox1, допускающего множественный выбор Response.Write("<b>Выделенные опции в ListBox1:</b><br />"); foreach (ListItem li in ListBox1.Items) { if (li.Selected) Response.Write("- " + li.Text + "<br />"); } // Одиночный выбор для DropDownList1, перебирать элементы не нужно Response.Write("<p /><b>Выделенная опция в DropDownList1:</b><br />"); Response.Write("- " + DropDownList1.SelectedItem.Text + "<br />"); // Перебор для элемента CheckBoxList1, допускающего множественный выбор Response.Write("<p /><b>Выделенные опции в CheckBoxList1:</b><br />"); foreach (ListItem li in CheckBoxList1.Items) { if (li.Selected) Response.Write("- " + li.Text + "<br />"); } // Одиночный выбор для RadioButtonList1, перебирать элементы не нужно Response.Write("<p /><b>Выделенная опция в RadioButtonList1:</b><br />"); Response.Write("- " + RadioButtonList1.SelectedItem.Text + "<br />"); } } -
Запустите приложение. В броузере появится примерно такая HTML-страница
Пример статического списка BulletedList
Этот элемент управления генерирует либо HTML-список <ul>, либо <ol>. Набор элементов списка задается через свойство-коллекцию Items. Имеются и другие свойства, приведенные в таблице.
-
Добавьте к приложению новую страницу с совмещенным кодом. Поместите на страницу элементы Label и BulletedList. Настройте свойства элементов в соответствии с приведенным кодом.
<%@ Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
protected void BulletedList1_Click(object sender, BulletedListEventArgs e)
{
Label1.Text = BulletedList1.Items[e.Index].Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Выбрано свойство:
<asp:Label ID="Label1" runat="server"></asp:Label>
<p />
<asp:BulletedList ID="BulletedList1" runat="server"
BulletStyle="Numbered" DisplayMode="LinkButton"
OnClick="BulletedList1_Click">
<asp:ListItem>NotSet</asp:ListItem>
<asp:ListItem>Numbered</asp:ListItem>
<asp:ListItem>LowerAlpha</asp:ListItem>
<asp:ListItem>UpperAlpha</asp:ListItem>
<asp:ListItem>LowerRoman</asp:ListItem>
<asp:ListItem>UpperRoman</asp:ListItem>
<asp:ListItem>Disc</asp:ListItem>
<asp:ListItem>Circle</asp:ListItem>
<asp:ListItem>Square</asp:ListItem>
<asp:ListItem>CustomImage</asp:ListItem>
</asp:BulletedList>
</div>
</form>
</body>
</html>Задав для списка атрибут DisplayMode="LinkButton", мы тем самым включили на клиенте постинг для каждого пункта списка. Результат примера будет таким
