ASP.NET Teil Seite Upload ohne Updatepanel / Mit jQuery

StackOverflow https://stackoverflow.com/questions/897408

  •  23-08-2019
  •  | 
  •  

Frage

Ich habe eine ASPX-Seite .Im Top Ich bin die Anzeige 5 Kategorien (Ex: Pen, Buch, Schuh, Mobile, Spiegel) Wenn ich auf eine der Kategorien klicken, möchte ich unter dem Header die Produkte, die unter diese Kategorie zeigen. Ich möchte nicht die gesamte Seite neu zu laden für this.I meine Seite halten will, wie es ist (Der Header, Footer und Seitenwände würde), wenn ein Klick passiert, außer der Mitte anstelle des Bildes (kann ein DIV oder Tabelle zu zeigen, Produkt). Was ist der beste Weg, dies zu tun? .Ich Dont ist schon für das ASP.NET Ajax-Update panel.I hinwollen mit jQuery in meiner project.So ist es trotzdem, dies mit jQuery zu tun? Bitte Beratung Danke im Voraus

War es hilfreich?

Lösung

Wie Kirtan erwähnt, die einfachste Antwort ist ein Update-Panel verwenden.

Wenn Sie auf diesen Weg nicht gehen, dann können Sie mit jQuery Ajax-Aufrufe zu einem IHttpHandler zu machen, die die Daten zurückgibt, müssen Sie die Platte Sie aktualisieren möchten, füllen.

Die Schritte würden gehen Sie wie folgt vor:

  • Verwenden Sie jQuery ".ashx" Ajax-Handler aufrufen.
  • Haben Sie Ihre „.ashx“ Datei eine Antwort in Ihrem Format der Wahl erzeugen. Dies könnte JSON oder XML (wenn Sie JavaScript wollen die Antwort analysieren und erzeugt die Liste) oder die HTML-Inhalte selbst zu der Seite hinzugefügt werden.
  • jQuery wird die Antwort von Ihrem Handler, empfangen und das Panel mit den entsprechenden Daten füllen.

Es gibt ein paar Tutorials online, wie eine IHttpHander zu verwenden. Im Grunde ist es eine sehr einfache Schnittstelle, die von ASP.NET „Page“ Klasse von abgeleitet wird. Es ist viel leichter als die Page Klasse, so dass Sie eine bessere Leistung, als würden Sie von einem Update bekommen können, aber wie bei den meisten Leistungssteigerung Techniken, Sie etwas komplexen Code.

Hier ist eine Anleitung, wie man ein IHttpHandler verwenden Klasse.

Andere Tipps

Ich würde empfehlen, beim Lesen nach oben

oder

Je nachdem, wo Sie Ihre Web-Anwendung läuft (Intranet als Internet Gegensatz), ein Update verwendet, kann eine schnellere Option AJAX-Stil-Funktionalität zu implementieren.

Nach mir, mit einem eingewickelt Update um einen Repeater / Datagrid / Gridview wird ein viel einfacher implementierende Ansatz.

Es kann auch mit jQuery erfolgen. Es würde darin bestehen, die CateogryId des Sendens einer Ajax-Request an den Server und erhält die Produkte JSON in der Antwort, und ein div mit den JSON-Daten füllen DOM-Manipulation verwendet wird.

EDIT: Mit JSON, komplexen Daten können einfach dargestellt werden Text-Format zu lesen, in einer objektorientierten Art und Weise. Werfen Sie einen Blick auf diese - 

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 ist ein JSON-Objekt, bestehend aus den folgenden Eigenschaften: "vorName", "lastname", etc. Sie diese Eigenschaften person.firstName zugreifen können, person.lastName, etc

.

Dies ist ein Beispiel von JSON, können Sie dies nutzen, um Ihr eigenes JSON String mit Produktinformation zu erstellen und sie in einem Array an den Client senden. Kurz gesagt, es wird ein Array von Objekten so sein - 

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

Sie können die DataContractJsonSerializer -Klasse (im Framework 3.5) zur Serialisierung / deserialisieren Objekts zu und von JSON. Wenn Sie Framework verwenden <3.5, können Sie die AjaxToolKit das gleiche tun.

Sie können auch eine "quick and dirty" Lösung betrachten. In Ihrer Seite Code-behind, implementieren ICallbackEventHandler und geben einen Block von HTML, die Sie in Ihr div oder Tisch stopfen

Update: Schauen Sie sich auf http://msdn.microsoft.com /en-us/library/ms178208.aspx für weitere Informationen darüber, was Sie diese implementieren müssen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top