Создание простейшего каталога товаров и формы заказа в Expression
Многие владельцы небольшого бизнеса поддерживают каталог своих товаров в формате MS Excel или MS Access. Сегодня я расскажу, как в Expression Web с помощью ASP.NET Controls создать каталог товаров, отображающий содержимое азы данных MS Access, и форму заказа, записывающую информацию о заказе в эту же БД.
Итак, для начала создадим простую базу данных MS Access (2003), состоящую из двух табличек:
1. каталог товаров – табличка Products;
2. заказы, отправленные с сайта – табличка Orders.
Теперь идем в Expression web и создаем 2 странички с расширением .aspx (для подгрузки данных из MS Access мы будем использовать элементы ASP.NET): catalog.aspx и form.aspx.
Все готово для создания каталога товаров на нашем сайте – прошу заметить, что только визуальными средствами :) Никакого программирования!
В ToolBox выберем элемент GridView из ASP.NET Controls, подраздел Data:
И перетащим его на нашу страницу.
Теперь настроим источник данных.
В открывшемся окне выбираем Access Database, нажимаем Ok.
Указываем путь к нашей базе данных.
Затем нужно выбрать табличку Products и указать поля, которые бы мы хотели, чтоб отображались на странице. Для простоты я выбрала все поля.
Нажимаем Next, тестируем запрос и Finish. Теперь наша страница отображает содержимое таблицы Products.
Теперь добавим в эту таблицу еще один столбец, с ссылкой на форму заказа. Эта ссылка, кроме того, будем передавать ID выбранного товара, чтобы заказчику потом не пришлось еще раз писать название.
Идем в EditColumns… Выбираем HyperLinkField и Add. Для нового столбца прописываем Properties:
- Text – текст ссылки;
- NavigateUrl – ссылка на форму заказа;
- Полями DataNavigateUrlField и DataNavigateUrlFormat String мы “говорим”, что в форму заказа нужно передать ID товара.
Все готово!
Теперь, если вы сделаете предпросмотр в браузере, то увидите, что добавилась еще одна колонка.
И что при наведении мышки на ссылку “заказать”, определяется соответствующий товару ID.
Теперь давайте создадим непосредственно форму заказа.
Для этого настроим 2 FormView из ToolBox->ASP.NET Controls->Data.
Первая форма будет просто отображать название выбранного в каталоге товара, а вторая будет позволять вводить данные о заказе.
Перетащим FormView, настроим источник данных. Выберем таблицу Products и из полей только Название. Пропишем условие WHERE, которое будет говорить, что ID названия выбранного товара нам передается из каталога :)
Теперь добавим еще одну FormView. Настраиваем по аналогии источник данных. Выбираем таблицу Orders и все поля. В Advanced ставим галочку:
Что позволит нам чуть позднее прописать условие для автоматического ввода Product_ID (которое передается из каталога).
Теперь в Tag Properties укажем DefaultMode: Insert (форма для ввода данных).
А для источника данных пропишем InsertQuery (помните мы галочку в Advanced ставили?), автоматически записывающий в поле Product_ID значение ID, переданного из каталога.
Осталась последняя деталь. Настроить шаблон ввода данных: удалим поле ввода Product_ID (оно будет заполняться автоматически) и с английского переименуем ссылки Insert и Cancel.
Для этого пойдем в Edit Templates
В поле Display выберем InsertItemTemplate
Теперь можем просто удалить поле Product_ID и переименуюем Insert и Cancel.
Форма заказа готова! Давайте протестируем.
Откроем каталог в режиме preview in browser.
Я выбираю товар 3 (в моем каталоге это Набор для ванной комнаты) и нажимаю Заказать.
В открывшейся форме я сразу вижу название выбранного мной товара и ввожу детали заказа:
Когда я нажимаю “Отправить заказ”, мой заказ помещается в таблицу Orders моей базы данных (хотя внешне на страничке ничего не меняется, просто форма становится пустой).
Так, используя только визуальные средства, можно создать простейший каталог товаров и форму заказа!