Частичная загрузка страниц ASP.NET без Updatepanel / С помощью jQuery

Question

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

Answer 1

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

• вызов веб-служб с использованием jQuery

или

• вызов методов страницы с использованием jQuery .

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

Answer 2

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

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

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

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

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

Вот учебник по использованию класса IHttpHandler .

Answer 3

По моему мнению, использование 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, вы можете использовать <a href="http://msdn.microsoft.com/en-us/library/system.web.script.serialization.javascriptserializer.aspx" rel="nofollow noreferrer"> JavaScriptSerializer класс AjaxToolKit , чтобы сделать то же самое.

Answer 4

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

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