Практикум прикладного программирования на C# в среде VS.NET 2005
[+]
Опубликован: 13.07.2010 | Доступ: свободный | Студентов: 890 / 20 | Оценка: 4.40 / 4.20 | Длительность: 77:34:00
Тема: Программирование
Специальности: Программист, Архитектор программного обеспечения
Теги: asp, cookie, cookies, direct3d, directx, graphics, html, microsoft word, objective-c, opengl, toolbox, wizard, www-броузер, базы данных, библиотеки, каталоги, клиенты, компоненты, конфигурационный файл, мастер-страница, приложения, программирование, серверы, цвета, элементы
Самостоятельная работа 4:

Управление Web-элементами в ASP.NET
A
|
версия для печати
< Самостоятельная работа 3 || Самостоятельная работа 4: 1234567 || Самостоятельная работа 5 >

Упражнение 3. Web-элементы управления DropDownList и ListBox

Рассмотрим списковые элементы управления DropDownList и ListBox на примере их использования. Эти элементы способны генерировать гибкий html-код для представления на стороне клиента информации в виде традиционных списков.

Этап проектирования

  • Добавьте к проекту новую страницу (с отделенным или совмещенным кодом - безразлично) с именем Page3.aspx и сделайте эту страницу стартовой
  • Разместите на странице html-элемент Table и установите для него в исходном html-коде 6 строк и 4 столбца. Для этого:
  1. Уберите из таблицы лишний код и оставьте только описание 1 строки и 4 столбцов
  2. В открывающем дескрипторе <table> добавьте атрибут width="100%"
  3. Добавьте в открывающий дескриптор <td> каждого столбца атрибут относительной ширины width="25%" и атрибут позиционирования по вертикали valign="top". Должен получиться такой код таблицы
<table width="100%">
            <tr>
                <td width="25%">
                </td>
                <td width="25%">
                </td>
                <td width="25%">
                </td>
                <td width="25%">
                </td>
            </tr>
        </table>
  • Растиражируйте выделенный код описания одной строки с 4 столбцами так, чтобы в таблице стало 6 строк

Таблица будет использоваться для позиционирования интерфейсных элементов управления. Поэтому нужно продолжить ее модификацию и объединить в некоторых строках часть столбцов.

  • В режиме Design выделите первую строку таблицы и выполните команду главного меню Layout/Merge Cells

Выделять ячейки таблицы, как и другие элементы, можно через панель Document Outline или курсором прямо в таблице.

  • Продолжите объединение ячеек таблицы, а затем поместите в них соответствующие элементы с вкладки Standard в соответствии с приведенной ниже схемой
  • Последовательно позиционируйте текстовый курсор рядом с элементами, помещенными в ячейки таблицы, затем удерживая клавишу Shift, стрелками клавиатуры выделите элемент и командой меню Format/Justify/Center отцентрируйте их положение в пределах ячейки. То же самое можно сделать через панель инструментов Formatting, если включить ее командой Tools/Customize. Не центрируйте только элементы Label1,...,Label4

Визуальное представление страницы будет таким


  • Выделите элементы ListBox и задайте им свойство SelectionMode=Multiple для возможности выделения многих элементов списка
  • Проверьте, что AutoPostBack=False - для запрещения самовольной отсылки при каждом новом изменении в списке, а только по щелчку на кнопке
  • Выделите элемент DropDownList1 и заполните его свойство Items (в свойстве заполняйте поле Value, а свойство Text будет заполняться оболочкой).
  1. Ачинск1
  2. Москва1
  3. Назарово1
  4. Казань1
  5. Красноярск1
  6. Петербург1
  7. Тула1
  8. Рязань1
  9. Воронеж1
  • Войдите в режим Source-редактирования, найдите код списка DropDownList1 
<asp:DropDownList ID="DropDownList1" runat="server">
                        <asp:ListItem Value="Ачинск1"></asp:ListItem>
                        <asp:ListItem Value="Москва1"></asp:ListItem>
                        <asp:ListItem Value="Назарово1"></asp:ListItem>
                        <asp:ListItem Value="Казань1"></asp:ListItem>
                        <asp:ListItem Value="Красноярск1"></asp:ListItem>
                        <asp:ListItem Value="Петербург1"></asp:ListItem>
                        <asp:ListItem Value="Тула1"></asp:ListItem>
                        <asp:ListItem Value="Рязань1"></asp:ListItem>
                        <asp:ListItem Value="Воронеж1"></asp:ListItem>
                    </asp:DropDownList>

и скопируйте выделенные опции ListItem внутрь заготовки ListBox1 и вместо 1 подставьте 2 в конце каждого значения, чтобы получился код списка

<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
                        <asp:ListItem Value="Ачинск2"></asp:ListItem>
                        <asp:ListItem Value="Москва2"></asp:ListItem>
                        <asp:ListItem Value="Назарово2"></asp:ListItem>
                        <asp:ListItem Value="Казань2"></asp:ListItem>
                        <asp:ListItem Value="Красноярск2"></asp:ListItem>
                        <asp:ListItem Value="Петербург2"></asp:ListItem>
                        <asp:ListItem Value="Тула2"></asp:ListItem>
                        <asp:ListItem Value="Рязань2"></asp:ListItem>
                        <asp:ListItem Value="Воронеж2"></asp:ListItem>
                    </asp:ListBox>

Будем считать, что мы заполнили два левых списка декларативно (на этапе проектирования).

  • Задайте элементам HyperLink1 и HyperLink2 значения свойств
Свойство Значение
NavigateUrl Page2.aspx
Text Назад
NavigateUrl Page4.aspx
Text Вперед

После завершения этапа проектирования внешне страница должна выглядеть примерно так


Общий код интерфейсной части, полученной декларативно на этапе проектирования, который следует использовать только для уточнения, будет примерно таким

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Page3.aspx.cs" Inherits="Page3" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="100%" bgcolor="#CCFFFF">
            <tr bgcolor="white">
                <td colspan="4" style="text-align: center">
                    <asp:Label ID="lblTitle" runat="server" Text="Label"></asp:Label></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    Заполняется декларативно
                </td>
                <td colspan="2" style="text-align: center">
                    Заполняется программно
                </td>
            </tr>
            <tr>
                <td width="25%" style="text-align: center">
                    DropDownList1<br />
                    <asp:DropDownList ID="DropDownList1" runat="server">
                        <asp:ListItem Value="Ачинск1"></asp:ListItem>
                        <asp:ListItem Value="Москва1"></asp:ListItem>
                        <asp:ListItem Value="Назарово1"></asp:ListItem>
                        <asp:ListItem Value="Казань1"></asp:ListItem>
                        <asp:ListItem Value="Красноярск1"></asp:ListItem>
                        <asp:ListItem Value="Петербург1"></asp:ListItem>
                        <asp:ListItem Value="Тула1"></asp:ListItem>
                        <asp:ListItem Value="Рязань1"></asp:ListItem>
                        <asp:ListItem Value="Воронеж1"></asp:ListItem>
                    </asp:DropDownList></td>
                <td width="25%" style="text-align: center">
                    ListBox1<br />
                    <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
                        <asp:ListItem Value="Ачинск2"></asp:ListItem>
                        <asp:ListItem Value="Москва2"></asp:ListItem>
                        <asp:ListItem Value="Назарово2"></asp:ListItem>
                        <asp:ListItem Value="Казань2"></asp:ListItem>
                        <asp:ListItem Value="Красноярск2"></asp:ListItem>
                        <asp:ListItem Value="Петербург2"></asp:ListItem>
                        <asp:ListItem Value="Тула2"></asp:ListItem>
                        <asp:ListItem Value="Рязань2"></asp:ListItem>
                        <asp:ListItem Value="Воронеж2"></asp:ListItem>
                    </asp:ListBox></td>
                <td width="25%" style="text-align: center">
                    DropDownList2<br />
                    <asp:DropDownList ID="DropDownList2" runat="server">
                    </asp:DropDownList></td>
                <td width="25%" style="text-align: center">
                    ListBox2<br />
                    <asp:ListBox ID="ListBox2" runat="server" SelectionMode="Multiple"></asp:ListBox></td>
            </tr>
            <tr bgcolor="#CCFF00">
                <td width="25%">
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></td>
                <td width="25%">
                    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></td>
                <td width="25%">
                    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label></td>
                <td width="25%">
                    <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label></td>
            </tr>
            <tr>
                <td colspan="4" style="text-align: center">
                    <asp:Button ID="Button1" runat="server" Text="Отослать на сервер" /></td>
            </tr>
            <tr>
                <td width="25%">
                </td>
                <td width="25%" style="text-align: right">
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="Page2.aspx">Назад</asp:HyperLink></td>
                <td width="25%">
                    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="Page4.aspx">Вперед</asp:HyperLink></td>
                <td width="25%">
                </td>
            </tr>
        </table>
     </div>
    </form>
</body>
</html>
Листинг 4.5. Код интерфейсной части страницы Page3.aspx

Этап программирования

Здесь мы построим программную часть функционирования страницы при загрузке на сервер. Еще раз вспомним, что результатом выполнения кода страницы является генерация html-отклика и отправка его клиенту.

  • Через меню View/Code оболочки перейдите к редактированию CodeBehind-файла Page3.aspx.cs и заполните событие загрузки страницы так
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 Page3 : System.Web.UI.Page
{
    static int count1, count2, count3, count4;
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack) return; // Выполнять только раз
    
        // Заполнить первую строку таблицы
        lblTitle.Text = "<h1 style='color: #FF0000'>Элементы "
            + "управления DropDownList и ListBox</h1>";
    
        // Заполнить программно DropDownList2
        // Способ 1 - нормальный
        DropDownList2.Items.Add("Москва3");
        DropDownList2.Items.Add("Назарово3");
        DropDownList2.Items.Add("Казань3");
        DropDownList2.Items.Add("Красноярск3");
        // Способ 2 - извращенный
        DropDownList2.Items.Add(new ListItem("Петербург3"));
        DropDownList2.Items.Add(new ListItem("Тула3"));
        DropDownList2.Items.Add(new ListItem("Рязань3"));
        DropDownList2.Items.Add(new ListItem("Воронеж3"));
        // Способ 3 - добавить спереди
        DropDownList2.Items.Insert(0, "Ачинск3");
        // Выбрать элемент списка
        DropDownList2.Items[4].Selected = true;
    
        // Заполнить программно ListBox2
        // Можно заполнить точно также, но мы это
        // сделаем через промежуточный источник
        // Создать источник данных
        ArrayList tmp = new ArrayList();
        tmp.Add("Москва4");
        tmp.Add("Назарово4");
        tmp.Add("Казань4");
        tmp.Add("Красноярск4");
        tmp.Add("Петербург4");
        tmp.Add("Тула4");
        tmp.Add("Рязань4");
        tmp.Add("Воронеж4");
        tmp.Insert(0, "Ачинск4");
        // Привязать данные к списку ListBox2
        ListBox2.DataSource = tmp;
        ListBox2.DataBind();
        // Выбрать элемент списка
        ListBox2.Items.FindByText("Красноярск4").Selected = true;
    
        // Списки сформированы, можно определить их длину
        count1 = DropDownList1.Items.Count;
        count2 = ListBox1.Items.Count;
        count3 = DropDownList2.Items.Count;
        count4 = ListBox2.Items.Count;
    
        // Выделить в ListBox1 последний элемент
        ListBox1.Items[count2 - 1].Selected = true;
    
        // Сбросить значения текстовых меток
        Label1.Text = Label2.Text = Label3.Text = Label4.Text = "";
    }
}
Листинг 4.6. Заполнение списков данными на странице Page3.aspx.cs

В этом примере программного заполнения элементов списка продемонстрировано три способа:

  1. Декларативное включение элементов в список
  2. Добавление элементов в набор Items, являющийся свойством списка
  3. Привязка элемента управления к источнику данных
  • Создайте обработчик для кнопки "Отослать на сервер" и заполните его так, чтобы сервер формировал в текстовых метках выбранные в списках значения 
protected void Button1_Click(object sender, EventArgs e)
    {
        int j;
    
        // Первый список
        Label1.Text = "";
        j = 0;
        for (int i = 0; i < count1; i++)
            if (DropDownList1.Items[i].Selected)
            {
                j++;
                Label1.Text += j.ToString()
                    + ") "
                    + DropDownList1.Items[i].Text;
                if (i < count1 - 1)
                    Label1.Text += "<br>";
            }
    
        // Второй список
        Label2.Text = "";
        j = 0;
        for (int i = 0; i < count2; i++)
            if (ListBox1.Items[i].Selected)
            {
                j++;
                Label2.Text += j.ToString()
                    + ") "
                    + ListBox1.Items[i].Text;
                if (i < count1 - 1)
                    Label2.Text += "<br>";
            }
    
        // Третий список
        Label3.Text = "";
        j = 0;
        for (int i = 0; i < count3; i++)
            if (DropDownList2.Items[i].Selected)
            {
                j++;
                Label3.Text += j.ToString()
                    + ") "
                    + DropDownList2.Items[i].Text;
                if (i < count3 - 1)
                    Label3.Text += "<br>";
            }
    
        // Четвертый список
        Label4.Text = "";
        j = 0;
        for (int i = 0; i < count4; i++)
            if (ListBox2.Items[i].Selected)
            {
                j++;
                Label4.Text += j.ToString()
                    + ") "
                    + ListBox2.Items[i].Text;
                if (i < count4 - 1)
                    Label4.Text += "<br>";
            }
    }
Листинг 4.7. Код обработчика кнопки "Отослать на сервер"
  • Постройте страницу и проверьте ее работоспособность

Внешне она должна быть примерно такой

Дальше >>
< Самостоятельная работа 3 || Самостоятельная работа 4: 1234567 || Самостоятельная работа 5 >

Вопросы и ответы

вопросов: 0