AJAX лучшие практики для добавления HTML-компонентов на страницу - PullRequest
Новая
       12

AJAX лучшие практики для добавления HTML-компонентов на страницу

0 голосов
/ 31 января 2011

Я новичок в AJAX / javascript, и я не уверен, каков наилучший подход к тому, что я пытаюсь сделать.

Я вызываю методы страницы (WebMethods) на своей страницеиспользуя Javascript.Данные, которые я извлекаю, - это, в основном, список Div.

Я не знаю, сколько будет возвращено, но их нужно вставить в нужное место на странице в зависимости от их содержимого.

Я вижу несколько способов сделать это:

  1. Создать список HtmlGenericControls и передать их обратно.
  2. Создать список строк, где каждая строка является целойКод Div я хочу перетащить на страницу.(По некоторым причинам это кажется неправильным)
  3. Создайте простые объекты-контейнеры, в которых есть необходимые данные.Передайте их на страницу и используйте их для создания Div в javascript.

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

Ответы [ 3 ]

2 голосов
/ 31 января 2011

На самом деле, лучше всего ИМХО будет возвращать данные из службы, а не HTML, и создавать пользовательский интерфейс на клиенте. Обычно это происходит потому, что одни и те же данные могут использоваться в разных местах. Теперь PageMethods возвращают данные только для этой страницы, поэтому HTML-код на стороне сервера может быть в порядке, если не требуется повторное использование, но лично я использую JQuery для создания пользовательского интерфейса на клиенте и только для передачи данных; это приводит к меньшему количеству данных, передаваемых по сети, что увеличивает скорость приложения и отталкивает отрисовку страницы в браузере клиента.

НТН.

1 голос
/ 31 января 2011

Я рекомендую возвращать данные в виде объекта JSON. Создайте массивы в объекте JSON для каждого типа элемента управления, затем вы можете просмотреть их с помощью for ( var q in json_object['div_type_q'] ) и динамически добавить их на страницу.

Пример объекта json:

json_object = { div_type_1: [ 0: "Content", 1: "More content", 2: "Even more content" ], div_type_2: [ 0: "This is navigation content" ] }

Вы можете передать что-то подобное в виде строки и использовать var object = eval( '(' + returned string + ')' )

Удачи

0 голосов
/ 31 января 2011

Я тоже этим занимаюсь с некоторого времени. Я могу сказать, что это нелегко сделать. Но теперь я нашел хорошее решение, и позвольте мне сказать вам, лучшее все еще использует панели обновления. Зачем? Потому что, если вы используете, например, расширители msajax, они будут правильно инициализированы при использовании updatepanel, а updatepanel даже передает новые файлы сценариев, если их нет.

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

Теперь, если вы хотите добавить новую, у меня есть другая панель обновлений для всей коллекции

как 

   <updatepanel>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
   </updatepanel>

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

Позвольте мне сказать вам, что с панелями обновления вы экономите много времени!

...