Применение технологии ASP.NET в разрабатываемом Интернет-магазине
8.2.5. Разработка пользовательских компонент
Для разработки и повторного использования собственных компонент используются файлы с расширением ascx.
Добавим в папку products файл ProductDetails.ascx через пункт контекстного меню Add New Item (рис. 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.
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. Краткие итоги
Данное практическое занятие рассматривает следующие темы: