Частичная загрузка страницы ASP.NET без панели обновлений/с jQuery

У меня есть страница ASPX. В верхней части я показываю 5 категорий (например: ручка, книга, обувь, мобильный телефон, зеркало). Когда я нажимаю на любую из категорий, я хочу показать продукты в этой категории под заголовком. Я не хочу перезагружать всю страницу для этого. Я хочу сохранить свою страницу как есть (верхний, нижний колонтитулы и боковые панели), когда происходит щелчок, за исключением центрального места изображения (может быть DIV или Таблица для отображения Продукт). Каков наилучший способ сделать это? Я не хочу использовать панель обновления ASP.NET Ajax. Я уже использую jQuery в своем проекте. Так можно ли сделать это с помощью jQuery? Пожалуйста, совет. Заранее спасибо


jquery asp.net partial
person Shyju    schedule 22.05.2009    source источник
comment
К моему ответу добавлена ​​​​дополнительная информация о JSON, вы можете объединить все хорошие ответы, приведенные ниже, и разработать собственное решение из них :)   -  person Kirtan    schedule 22.05.2009

Ответы (4)


arrow_upward
1
arrow_downward

Как упомянул Киртан, самый простой ответ это использование панели обновлений.

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

Шаги будут идти следующим образом:

  • Используйте jQuery для вызова обработчика Ajax ".ashx".
  • Пусть ваш файл ".ashx" сгенерирует ответ в выбранном вами формате. Это может быть JSON или XML (если вы хотите, чтобы JavaScript анализировал ответ и генерировал список) или сам HTML-контент для добавления на страницу.
  • jQuery получит ответ от вашего обработчика и заполнит вашу панель соответствующими данными.

В Интернете есть несколько руководств о том, как использовать IHttpHander. По сути, это очень простой интерфейс, от которого унаследован класс ASP.NET "Page". Он намного легче, чем класс Page, поэтому вы можете получить более высокую производительность, чем при использовании UpdatePanel, однако, как и в случае с большинством методов повышения производительности, у вас немного более сложный код.

Вот руководство по использованию класса IHttpHandler.

person Dan Herbert    schedule 22.05.2009

arrow_upward
3
arrow_downward

Я бы порекомендовал прочитать о

or

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

person Russ Cam    schedule 22.05.2009

arrow_upward
1
arrow_downward

По моему мнению, использование UpdatePanel, обернутого вокруг Repeater/DataGrid/GridView, будет гораздо более простым в реализации подходом.

Это также можно сделать с помощью jQuery. Это будет заключаться в отправке CateogryId с помощью запроса ajax на сервер, получении продуктов. JSON в ответ и заполнение div данными JSON с помощью манипуляций с DOM.

РЕДАКТИРОВАТЬ: используя JSON, сложные данные могут быть представлены в удобном для чтения текстовом формате объектно-ориентированным способом. Взгляните на это -

var person = {
     "firstName": "John",
     "lastName": "Smith",
     "address": {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": 10021
     },
     "phoneNumbers": [
         "212 555-1234",
         "646 555-4567"
     ]
 };

person — это объект JSON, состоящий из следующих свойств: «firstName», «lastName» и т. д. Вы можете получить доступ к этим свойствам, используя person.firstName, person.lastName и т. д.

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

var persons = [person1, person2, person3, ...]; //person1, person2, etc. are objects like the person object declared above.

Вы можете использовать DataContractJsonSerializer класс (в Framework 3.5) для сериализации/десериализации объекта в JSON и из него. Если вы используете Framework ‹ 3.5, вы можете использовать JavaScriptSerializer класса AjaxToolKit, чтобы сделать то же самое.

person Kirtan    schedule 22.05.2009
comment
Спасибо Киртан. Я хочу 4 или 5 атрибутов для каждого продукта. Как я могу их получить? Я не знаю об использовании JSON. Любые примеры, которые помогут мне? - person Shyju; 22.05.2009

arrow_upward
0
arrow_downward

Вы также можете рассмотреть «быстрое и грязное» решение: в коде вашей страницы реализовать ICallbackEventHandler и вернуть блок html, который вы вставляете в свой div или таблицу.

Обновление: взгляните на http://msdn.microsoft.com/en-us/library/ms178208.aspx для получения дополнительной информации о том, что вам нужно для реализации этого.

person chris    schedule 22.05.2009