Share via

Создание простейшего каталога товаров и формы заказа в Expression

  • Article

Многие владельцы небольшого бизнеса поддерживают каталог своих товаров в формате 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 моей базы данных (хотя внешне на страничке ничего не меняется, просто форма становится пустой).

 

Так, используя только визуальные средства, можно создать простейший каталог товаров и форму заказа!

Comments

  • Anonymous
    March 23, 2009
    PingBack from http://blog.a-foton.ru/index.php/2009/03/23/%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bf%d1%80%d0%be%d1%81%d1%82%d0%b5%d0%b9%d1%88%d0%b5%d0%b3%d0%be-%d0%ba%d0%b0%d1%82%d0%b0%d0%bb%d0%be%d0%b3%d0%b0-%d1%82%d0%be%d0%b2%d0%b0%d1%80/

  • Anonymous
    April 12, 2009
    В форме для заказа слишком длинная строка под "Количество", хотя пользователю необходимо ввести только число. Лучше использовать аналог контрола NumericUpDown, допускающий ввод только целого числа. P.S. Пример сгодится для ученика средней школы и только, увы.

  • Anonymous
    April 12, 2009
    Anka_1987, спасибо за комментарий :) согласна с каждым твоим словом. Лишь небольшое доволнение есть: также этот материал будет полезен для новичков ;)

  • Anonymous
    May 12, 2009
    У Анки резкие суждения. Полагаю, мессадж ее послания был в том, чтобы показать нам, что она намного превосходит учеников средней школы.

  • Anonymous
    June 11, 2009
    Делал каталог по вашему примеру, по непонятной причине в базу не передаются текстовые поля, передаются только числовые. Не знаете в чем может быть причина?

  • Anonymous
    June 11, 2009
    хм, нашел как исправить, удалили и заново создал поля в таблице которые в нее не передавались.

  • Anonymous
    June 11, 2009
    у меня другой вопрос, как с обычной .html страницы сделать ссылку на .aspx форму? если просто ее укзать то открывается код а не форма.