РЭДЛАЙН
Лучшие решения для Вас и Вашего бизнеса!
На нашем сайте вы можете получить информацию о веб-разработке, обслуживании и продвижении сайта. Интернет-маркетинге. SEO (поисковой оптимизации). Контекстной и медийной рекламе в Интернете. SMM. Регистрации доменов и хостинговых услугах. И современном дизайне сайтов. Вообщем того что касается веб-разработки, а также много другой полезной информации из мира интернета, бизнеса и интернет-технологий...
Создаем доступные и современные сайты, которые работают! Обслуживаем и эффективно продвигаем интернет-проекты с 2006 года!
Главная Программирование ASP.NET MVC: Делаем голосование на сайте при помощи Knockout


ASP.NET MVC: Делаем голосование на сайте при помощи Knockout

ASP.NET MVC: Делаем голосование на сайте при помощи Knockout

Рис.1 “Опрос на сайте (пользователь еще не голосовал)”

И второй вариант отображения формы, это когда пользователь уже проголосовал.

106-knockout-poll-1

Рис.2 “Опрос на сайте (пользователь уже голосовал)”

Звучит и выглядит просто, и поэтому я стороной обойду загрузку данных с сервера, запись данных на сервер, чтение настроек и проверку cookies, чтобы по возможности максимально рассказать о Knockout. Итак, если учесть, что все приготовления выполнены, то можно сразу приступить к программированию.

Входные данные

В папке Scripts/App создаю новый файл site.vm.polls.js. Теперь первым делом определю формат данных для объекта (Poll) (листинг 1):

   1:      var pollData = {
   2:  "question": "За двумя зайцами погонишься...",
   3:  "answers": [
   4:              { votes: 11, name: "ни одного не поймаешь." },
   5:              { votes: 5, name: "больше двух не поймаешь." },
   6:              { votes: 15, name: "ни одного волка не поймаешь." },
   7:              { votes: 9, name: "порвешься на две части." },
   8:              { votes: 39, name: "зачем бегать, лучше на авто!" }
   9:          ],
  10:  "selectedAnswer": null};

Это, так сказать, входные данные. В моем случае, они “жестко” прописаны в коде. Вы же можете сделать получение данных для опроса с сервера, через Web API, или с сервиса WCF. Немного комментариев относительно представленного кода.

  • Строка 2: Сам вопрос.
  • Строка 3-8: Это предложенные варианты ответа на поставленный вопрос.
  • Строка 10: Ответ, который возможно уже дал пользователь, посещая сайт. Вы можете хранить его в базе данных или даже в cookies. Сейчас он у меня null, поэтому форма должна отобразить список ответов и вопрос. А если поле было заполнено (выбранный ответ), то форма должна отобразить результаты голосования.

Класс Answer (Ответ)

В предыдущем листинге (листинг 1) в строка 3 эти самые ответы на вопрос. “Завернем” класс в JavaScript (листинг 2):

   1:   site.vm.Answer = function (value, total) {
   2:          var isSelected = ko.observable(false),
   3:              votes = ko.observable(total),
   4:              name = ko.observable(value);
   5:  return {
   6:              isSelected: isSelected,
   7:              name: name,
   8:              votes: votes
   9:          };
  10:      },

Всё просто, единственное, что хотелось быть отметить, что свойство isSelected будет указыват на то выбран ли ответ в списке вариантов или нет.

Класс Poll (Опрос)

Этот класс и будет представляет “входные данные” (см. листинг 1). Самый большой класс в моем решении (листинг 3).

   1:  site.vm.Poll = function (data) {
   2:          var selectedItem = ko.observable(new site.vm.Answer()),
   3:              question = ko.observable(data.question),
   4:              answers = ko.observableArray([]),
   5:              answer = ko.observable(),
   6:              maxVotes = ko.observable(),
   7:              init = function () {
   8:                  var max = 0;
   9:                  var i;
  10:  for (i in data.answers) {
  11:                      var cur = data.answers[i].votes;
  12:  if (cur && cur>max) {
  13:                          max = cur;
  14:                      }
  15:                  }
  16:                  max = Math.round(max * 1.1);
  17:                  maxVotes(max);
  18:  for (i in data.answers) {
  19:                      answers.push(new site.vm.Answer(data.answers[i].name, 
                                                  data.answers[i].votes));
  20:                  }
  21:  if (data.selectedAnswer) {
  22:                      answer(data.selectedAnswer);
  23:                  }
  24:              },
  25:              setSelected = function (item) {
  26:  if (!item.isSelected()) {
  27:                      selectedItem(item.name());
  28:                      ko.utils.arrayForEach(answers(), function (i) {
  29:  if (i.isSelected && i.isSelected()) { i.isSelected(false); }
  30:                      });
  31:                      item.isSelected(true);
  32:                  }
  33:              };
  34:  
  35:          init();
  36:  
  37:  return {
  38:              max: maxVotes,
  39:              selectedItem: selectedItem,
  40:              question: question,
  41:              answers: answers,
  42:              answer: answer,
  43:              setSelected: setSelected
  44:          };
  45:      };

И опять немного комментариев:

  • Строка 2: Представляет выбранный пользователем ответ.
  • Строка 6: Вообще-то, это свойство (maxVotes) я ввел только для того, чтобы правильно работал jQuery UI Progressbar, при помощи которого я планирую отображать результаты.
  • Строка 7: Инициализация класса на основании входных данных. Запуск инициализации происходит в строке 35.

ViewModel для формы

На форме может быть много опросов, в моем варианте он один. Создаем ViewModel для формы Index.cshtml. Вот так выглядит pollViewModel (листинг 4):

   1:  site.vm.pollViewModel = function () {
   2:          var message = ko.observable("Выберите ваш вариант ответа на вопрос."),
   3:              poll = site.vm.Poll(pollData),
   4:              save = function () {
   5:                  poll.answer(poll.selectedItem());
   6:              };
   7:  
   8:  return {
   9:              save: save,
  10:              poll: poll,
  11:              message: message
  12:          };
  13:      }();

Строка 2: Сообщение для пользователя. Мне не пригодилось, но можно использовать для вывода ошибок при работе сервиса.

Строка 3: Создаем экземпляр класса голосования (см. листинг 3).

Строка 4: Функция сохранения результатов голосования. В моем решении это просто обновления свойства answer. Но вы можете отправить результат на сервер или сохранить в cookies.

Магия Knockout – applyBindings

Голосование (Poll) я планирую показать на главной странице (то есть в котроллере Home, метод – Index).  Я открыл представление (index.cshtml) и полностью его отчистил, и добавил туда такую разметку:

   1:  <divdata-bind="ifnot: poll.answer">
   2:  <h2data-bind="text: poll.question">h2>
   3:  <h4data-bind="text: message">h4>
   4:  <divdata-bind="foreach: poll.answers">
   5:  <divdata-bind="click: $parent.poll.setSelected"class="big">
   6:  <inputtype="radio"value="true" 
                             data-bind="checked: isSelected().toString()"class="poll"/>
   7:  <spandata-bind="text: name, css: {'selected': isSelected}">span>
   8:  div>
   9:  div>
  10:  <p>
  11:  <buttondata-bind="click: save">голосоватьbutton>
  12:  p>
  13:  div>
  14:  <divdata-bind="if: poll.answer">
  15:  <h2data-bind="text: poll.question() ' ' poll.answer()">h2>
  16:  <divdata-bind="foreach: poll.answers">
  17:  <spandata-bind="text: name">span>
  18:  <divdata-bind="progressbar: {value: votes(), max: $parent.poll.max()}">div>
  19:  <br/>
  20:  div>
  21:  div>

Всё на форме просто и, надеюсь, понятно. Единственное, что хотелось бы отметить, для отображения результатов в шаблоне (строка 18) используется bindingHandler, который я назвал “progressbar”. Когда вы установите nuget-пакет JsJite, у вас в папке scripts/app появится файл site.bindingHandlers.js,  в котором уже много полезных “штучек”.

Заключение

В качестве заключения хочу предложить создать демо-проект и поэкспериментировать.

Подробнее: http://feedproxy.google.com/~r/blogmusor/~3/ReoYRvxCyJU/106

ASP.NET MVC: Делаем голосование на сайте при помощи Knockout | | 2018-01-04 08:40:08 | | Программирование | | В качестве вступления Я буду строить решение на базе проекта, который был опубликован в предыдущей статье “ASP.NET MVC: И снова про форму обратной связи или куда еще втыкнуть Knockout”. Хочу чтобы | ASP.NET MVC: Делаем голосование на сайте при помощи Knockout |
 
Дайджест новых статей по интернет-маркетингу на ваш email
Подписаться

Продающие сайты "под ключ"!

Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее...

Интернет-магазины и каталоги "под ключ"!

Эффективные и удобные инструменты торговли (электронной торговли) "под ключ". Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее...

Комплексный интернет-маркетинг и продвижение сайтов

Максимальную эффективность дает не какой-то конкретный метод, а их комбинация. Комбинация таких методов и называется комплексным интернет-маркетингом. Всего от 8000 рублей в месяц
Подробнее...

Реклама в Yandex и Google

Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее...

Social media marketing (SMM) — продвижение в социальных медиа

Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее...

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее...

Ускоренная разработка любого сайта от 5 дней!

Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта "под ключ" за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее...

Ждем новых друзей!

Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее...

Приведи друга и получи скидку!

Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее...

1 2 3 4 5 6 7 8 9

Новые статьи и публикации


Услуги интернет компании Редлайн

Полезнее знать несколько мудрых правил, которые всегда могли бы служить тебе, чем выучиться многим вещам, для тебя бесполезным

Сенека Луций Анней - (1 до н. э. / 1 н. э.- 65 н. э.) - римский государственный деятель, писатель, философ

Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

Качественное и объемное представление своего бизнеса в Сети требуется любой растущей коммерческой структуре, стремящейся увеличить продажи, именно по этой причине среди наших клиентов как крупные так и небольшие компании во многих городах России и ближнего зарубежья.
Как мы работаем

Заявка
Позвоните или оставьте заявку на сайте.


Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!


Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.


Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.


Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Остались еще вопросы? Просто позвоните и задайте их специалистам
с 2:30 до 11:30 по Мск, звонок бесплатный
Или напишите нам в WhatsApp
с 9:30 до 18:30 по Хабаровску
Или напишите нам в WhatsApp
Веб-студия и агентство комплексного интернет-маркетинга «РЭДЛАЙН» © 2006 - 2024

Профессиональная Веб-разработка. Создание сайтов и магазинов "под ключ" , а также по всей России и зарубежью. Продвижение и реклама. Веб-дизайн. Приложения. Сопровождение. Модернизация. Интеграции. Консалтинг. Продвижение и реклама. Комплексный Интернет-маркетинг.

Оставьте заявку / Задайте вопрос

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услугу

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Обратный звонок

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Подписка на дайджест новостей

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услуги со скидкой \ Бесплатная консультация







КАКИЕ УСЛУГИ ВАС ИНТЕРЕСУЮТ?

КАКИЕ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ПОТРЕБУЮТСЯ?

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Высококачественные сайты по доступным ценамМы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!

Что нужно сделать, чтобы заказать создание сайта у нас?

Ну для начала вам нужно представлять (хотя бы в общих чертах), что вы хотите получить от сайта и возможно каким вы хотите его видеть. А дальше все просто. Позвоните нам или оставьте заявку нашим менеджерам, чтобы они связались с Вами, проконсультировали и помогли определиться с подходящим именно Вам сайтом по цене, сроку, дизайну или функционалу. Если вы все ещё не уверены, какой сайт вам нужен, просто обратитесь к нам! Мы вместе проанализируем вашу ситуацию и определим максимально эффективный для вас вариант.

Быстрый заказ \ Консультация

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

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

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

Быстрый заказ \ Консультация

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

Полный комплекс услуг по сопровождению сайтаМы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.

Передав свой сайт для поддержки в руки наших специалистов, Вы избавитесь от проблем, связанных с обновлением информации и контролем за работой ресурса.

Наша компания осуществляет техническую и информационную поддержку уже имеющихся сайтов. В понятие «поддержка сайтов» также входят услуги администрирования сайтов, обновления сайтов и их модернизация.

Быстрый заказ \ Консультация

Редизайн сайта и Адаптивный веб дизайн

Современный, технологичный, кроссбраузерный ... Профессиональный дизайн сайтов и веб-приложений

Редизайн сайта — создание нового дизайна сайта с целью улучшения внешнего вида, функциональности и удобства использования. Редизайн сайта – это способ преобразовать проект к извлечению из него максимальной отдачи и средств. В современном мире задачами редизайна является поднятие существующего сайта на новый уровень для внедрения новых технологий, при этом сохраняя многолетний сформировавшийся опыт и успешные решения компаний.

Адаптивный дизайн сайтов и веб-приложений

Все больше людей пользуются мобильными устройствами (телефонами, планшетами и прочими) для посещения Интернета, это не для кого уже не новость. Количество таких людей в процентном отношении будет только больше с каждым годом, потому что это удобно и по многим другим причинам.

На сегодняшний день адаптивный дизайн является стандартным подходом при разработке новых сайтов (или веб-приложений) и в идеале ваш сайт должен смотреться и функционировать так, как вы задумывали, на всём разнообразии устройств.

Быстрый заказ \ Консультация

Контекстная реклама в Яндекс и GoogleКонтекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!

Рекламные объявления показываются именно тем пользователям, которые ищут информацию о Ваших товарах или услугах, поэтому такая реклама не является навязчивой и раздражающей в отличие от других видов рекламы, с которыми мы сталкиваемся на телевидении или радио. Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров.

Быстрый заказ \ Консультация

Скидка

1500 руб.
Заинтересовались услугами создания, обслуживания или продвижения вашей компании в Интернете?!
Получите 1500 руб.
за он-лайн заявку
Предложение ограничено.

После получения заявки с Вами свяжутся наши специалисты и уточнят все детали по интересующей вас услуге.
«Нажимая на кнопку "Получить скидку", я даю согласие на обработку персональных данных»
×
Получите 1500 рублей!
×
×