Как лучше всего динамически генерировать список кнопок/ссылок

Я создаю собственное приложение для ресторана. Я не уверен, что это лучший подход для динамического создания списка кнопок/ссылок.

У меня есть список комбинированных коробок с едой, скажем, box1, box2, box3 (количество комбинированных коробок изменится), которые будут отображаться на экране. При выборе данного поля будет отображаться всплывающее окно со списком элементов, скажем, item1...item5. Пользователь может выбрать форму элементов и продолжить.

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

Пожалуйста, подскажите, как лучше всего создать динамический список кнопок/ссылок. Является ли кнопка правым элементом управления или чем-то еще, чтобы вызвать панель.

Я использую asp.net (по сравнению с 2010) для создания приложения.


button dynamic asp.net
person ram    schedule 18.12.2015    source источник
comment
Было бы полезно, если бы вы упомянули и пометили технологию/фреймворк GUI и платформу, которую планируете использовать.   -  person Filburt    schedule 18.12.2015
comment
Какую технологию вы ищете? Объясните, что вам нужно, немного яснее, пожалуйста.   -  person Divyek    schedule 18.12.2015

Ответы (2)


arrow_upward
0
arrow_downward

Из этой небольшой информации можно сделать только очень общую рекомендацию.

Во-первых, разница между ссылкой и кнопкой:

  • ссылка предназначена для того, чтобы доставить вас куда-либо, она никогда не использует метод POST и НЕ ДОЛЖНА изменять какое-либо состояние на сервере, поэтому ее следует рассматривать как безопасную для роботов (это означает, что поисковые роботы БУДУТ переходить по ссылкам)

  • кнопка, особенно в HTML5, – это универсальный элемент пользовательского интерфейса, который можно использовать для выполнения самых разных действий (например, с помощью JavaScript), но обычно он НЕ рассматривается как безопасен для роботов, что означает, что пауки поисковых систем, вероятно, не будут нажимать кнопки (определенно нет, если они привязаны к POST формам, хотя Google сейчас обрабатывает JavaScript и может следовать GET формам).

Исходя из вышеизложенного, если ваша всплывающая панель представляет собой просто подменю со ссылками в нем, вероятно, ссылка <a href="#"> подойдет.

Но если всплывающая панель — это form, которая запускает какие-то изменения на сервере (например, добавляет что-то в корзину и т. д.), то <button> лучше передает реальную цель панели.

Что касается создания макета, в настоящее время рекомендуется использовать <ul>, перебирать все ваши коробки с едой и генерировать элемент <li> для каждой. Затем используйте CSS, чтобы установить высоту каждого поля и JavaScript, чтобы открыть панель.

Например что-то вроде этого:

<ul class="mealboxes">
  <li class="mealbox"><button id="box1" class="mealbox">Meal Box 1</button></li>
  <li class="mealbox"><button id="box2" class="mealbox">Meal Box 2</button></li>
  <li class="mealbox"><button id="box3" class="mealbox">Meal Box 3</button></li>
</ul>

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

PS: Чтобы скрыть маркеры элементов списка, используйте CSS, подобный этому:

ul.mealboxes {
 list-style: none;
}
person Laas    schedule 18.12.2015
comment
Спасибо, Лаас. Есть ли способ, которым мы можем реализовать с помощью элемента управления на стороне сервера. - person ram; 18.12.2015
comment
Извините, я мало что знаю об ASP.NET, но я полагаю, что вам придется перебирать свои коробки с едой и для каждого элемента создавать кнопку runat="server". - person Laas; 21.12.2015

arrow_upward
0
arrow_downward

Предположим, что идентификатор div, который вы хотите заполнить кнопками и/или ссылками: cat Затем используйте jQuery:

$('#cat').html('<input type="button" name="" value="Button1"/>');

Чтобы добавить больше текста:

 $('#cat').append('<a href="http://www.google.com">Click Here</a>');
person Abhishek Singh    schedule 18.12.2015