Опубликован: 04.05.2010 | Уровень: для всех | Доступ: платный
Практическая работа 2:

Применение технологии ASP.NET в разрабатываемом Интернет-магазине

< Лекция 6 || Практическая работа 2: 12345 || Лекция 7 >

8.2.5. Разработка пользовательских компонент

Для разработки и повторного использования собственных компонент используются файлы с расширением ascx.

Добавим в папку products файл ProductDetails.ascx через пункт контекстного меню Add New Item (рис. 8.15).

Добавление в проект нового пользовательского серверного компонента

увеличить изображение
Рис. 8.15. Добавление в проект нового пользовательского серверного компонента

Как и в случае со страницей будет создано два файла, один из которых содержит разметку компонента, а второй – серверный код.

Код с разметкой начинается с заголовка, указывающего, что в этом файле описывается серверный компонент на языке C#, бэк-код которого содержится в файле ProductControl.ascx.cs, а сам компонент будет иметь название products_ProductControl:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProductControl.ascx.cs" Inherits="products_ProductControl" %>

Остальная часть файла представляет собой обычную таблицу на HTML, которая содержит несколько компонент Label и один компонент Image. Все серверные пользовательские компоненты наследуют от класса System.Web.UI.UserControl, хотя также есть возможность унаследовать свой компонент и от некоторых других классов.

В самом компоненте определим метод Page_Load, в котором для компонента Image укажем путь к картинке (таким образом, если бы у нас была бы картинка для каждого товара, мы могли бы указать путь к этой картинке), а также установим свойство Visible значение false. Это приведет к тому, что компонент не будет отрисовываться на странице.

Также определим метод LoadContent, который будет означивать надписи компонента переданными значениями и устанавливать свойство Visble в True ;

protected void Page_Load(object sender, EventArgs e)
{
    Visible = false;
    Image1.ImageUrl = "~/images/Black_racer02_F_large.gif";
}

public void LoadContent(string name, int count)
{
    Visible = true;
    LabelName.Text = name;
    LabelCount.Text = count.ToString();
}

На рис. 8.16 показано, как разработанный компонент выглядит в дизайнере Visual Studio 2008.

Отображение компонента ProductControl в дизайнере Visual Studio 2008

Рис. 8.16. Отображение компонента ProductControl в дизайнере Visual Studio 2008
8.2.5.1. Использование пользовательских компонент на странице

Теперь, когда компонент разработан, добавим его на страницу products/default.aspx, в правый PlaceHolder. Для этого, добавим в начало файла следующую строчку, которая зарегистрирует компонент на странице и позволит его использовать под именем AWCDShop:ProductControl:

<%@ Register TagPrefix="AWCDShop" TagName="ProductControl" Src="~/products/ProductControl.ascx" %>

Добавим этот компонент в правый PlaceHolder:

<asp:Content ID="Content2" ContentPlaceHolderID="column_r_placeholder" Runat="Server">
<AWCDShop:ProductControl ID="ProductDetails"  runat ="server" />
</asp:Content>

Далее вернемся к коду обработчика события OnSelectedIndexChanged:

var cycle = chs[GridViewProducts.SelectedIndex];
ProductDetails.LoadContent(cycle.Name, cycle.StockCount);

По умолчанию компонент не отображается на странице, однако когда пользователь выберет какую-либо строку в таблице, произойдет postback страницы, она восстановится на сервере и будет выполнен код обработчика OnSelectedIndexChanged. По свойству GridView.SelectedIndex будет определен порядковый номер продукта, и он будет извлечен из коллекции продуктов, после чего будет выполнен метод ProductDetails.LoadContent, который отобразит пользовательский компонент на странице и означит Label 'ы этого компонента названием и количеством продукта на складе соответственно. На рис. 8.17 показано, как будет выглядеть страница продуктов при выборе в таблице первой строки.

Отображение страницы продуктов интернет-магазина с выбранным первым продуктом

увеличить изображение
Рис. 8.17. Отображение страницы продуктов интернет-магазина с выбранным первым продуктом

8.3. Ключевые термины

.NET Framework, ASP.NET, Microsoft Visual Studio, Веб-формы, Проект, Решение, MasterPage, Пользовательские компоненты.

8.4. Краткие итоги

Данное практическое занятие рассматривает следующие темы:

  • Обзор работы в Microsoft Visual Studio 2008:
    • Создание нового приложения;
    • Редактирование Веб-документов и кода;
    • Окно Solution Explorer;
  • Переработка Интернет-магазина с использованием технологии ASP.NET:
    • Добавление MasterPage ;
    • Использование меню;
    • Использование визуальной компоненты для работы с таблицами;
  • Разработка и повторное использование пользовательских компонент на ASP-странице.
< Лекция 6 || Практическая работа 2: 12345 || Лекция 7 >
Владимир Тадеуш
Владимир Тадеуш
Украина
Кирилл Дубовик
Кирилл Дубовик
Россия, Петрозаводск