Repeater, UpdatePanels und die Datenbindung

Da ich in der letzten Zeit an einer neuen Version der ShoppingMap arbeite und mich auch sonst in die “neuen” Microsoft Technologien einarbeite, bin ich erstmal auf ein paar Probleme gestoßen.

Da ich aus der PHP Richtung komme und mich erstmal komplett in ASP.NET einarbeiten musste, war mir das “dynamische” erstellen von Controls noch kein richtiger Begriff.

Situationsbeschreibung:
Ich gebe ein Suchwort ein und darauf hin wird ein Webdienst abgefragt. Die Suchergebnisse werden ähnlich wie die Bildersuche bei Live.com angezeigt. Es wird also am Anfang ein Bild von dem jeweiligen Suchergebniss gezeigt und sobald man mit der Maus drüber geht, erscheinen nähere Inhalte und man kann dort wiederrum sich mehr Details anzeigen lassen. Diese Details werden wiederrum von einem anderen Webdienst abgefragt – d.h. es müssen mehr oder weniger dynamisch Controls mit Events erzeugt werden.

Lesestoff:

Problembeschreibung:

Ich konnte leider keine Seite finden, welche datengebunde Repeater mit verschachtelten UpdatePanels anzeigt. Das Problem was ich auch hatte: Dieses <%# DataBinder.Eval(… %> find ich auch nicht gerade sehr elegant. Daher musste es eine andere Möglichkeit geben.

Aufbau der ASPX Seite:

Als erstes mal kurz den Code um zu zeigen, wie der Repeater bei mir (ungefähr) verwendet wird:

<asp:Repeater runat="server" OnItemDataBound="DetailData" ID="RepeaterArticleItem"> 
 <ItemTemplate> 
  <asp:Panel ID="PanelContent" style="display: none;" runat="server"> 
    <asp:UpdatePanel ID="UpdatePanelDetails" runat="server"> 
      <ContentTemplate> 
          <asp:Image ID="ImageBig" runat="server" /> 
          <asp:LinkButton ID="LinkButtonTest" OnClick="Test" Text="Test" runat="server" /> 
      </ContentTemplate> 
    </asp:UpdatePanel> 
  </asp:Panel> 
  <asp:Image ID="ImagePreview" runat="server" /> 
  <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtenderContent" 
                                 TargetControlID="ImagePreview" 
                                 PopupControlID="PanelContent" 
                                 runat="server" /> 
 </ItemTemplate> 
</asp:Repeater>
 

Erklärung:

Das “PanelContent” wird erst sichtbar, sobald man mit der Maus über das “ImagePreview” geht. Durch den “HoverMenuExtender” aus dem AJAX Toolkit ist es eigentlich relativ einfach.
Im “PanelContent” ist ein UpdatePanel, was wiederrum andere Controls enthalten kann.

Datenquelle & Code:

Als Datenquelle kann man eigentlich alles nehmen, was man als DataSource angeben kann. In meinem Fall war es eine Collection, welche relativ verschachtelt ist.

Im Code sieht das recht einfach aus:

        this.RepeaterArticleItem.DataSource = MyCollection; 
        this.RepeaterArticleItem.DataBind();

Damit wir jetzt direkt sagen können, welches Objekt aus der Collection welches Control “befüllen” soll, habe ich beim Repeater das “OnItemDataBound“-Event eine kleine Methode hinterlegt.

    protected void DetailData(object sender, EventArgs e) 
    { 
        RepeaterItemEventArgs RepeaterArgs = (RepeaterItemEventArgs)e; 
        OneCollectionItem MySingleItem = (OneCollectionItem)RepeaterArgs.Item.DataItem;   

        Image PreviewImage = (Image)RepeaterArgs.Item.FindControl("ImagePreview"); 
        PreviewImage.ImageUrl = MySingleItem.PictureGallery[0].Url; 
        PreviewImage.AlternateText = MySingleItem.Name;   

        UpdatePanel MyUpdatePanel = (UpdatePanel)RepeaterArgs.Item.FindControl("UpdatePanelArticle"); 
        Image BigImage = (Image)MyUpdatePanel.FindControl("ImageDetailArticle"); 
        BigImage.ImageUrl = MySingleItem.BigPicturegallery[0].Url;   

        LinkButton TestLink = (LinkButton)DetailUpdatePanel.FindControl("LinkButtonTest"); 
        TestLink.CommandArgument = MySingleItem.Id; 
    }

Das wars im Prinzip schon.
Die Collection hier hab ich mir jetzt nur mal ausgedacht, allerdings verwende ich es ähnlich bei mir und es funktioniert. Wenn man jetzt auf den LinkButten drückt, wird kein kompletter Postback ausgeführt, allerdings hat das UpdatePanel auch seine Tücken wie ich schonmal schrieb.

Was ich damit zeigen wollte: Es ist sehr einfach, Daten an ein Element zu binden, welches wiederrum Actionen auslöst. Zudem ist es so leicht möglich, verschachtelte Strukturen zu schaffen und diese hässlichen <%#… %> (welche wie ich finde, äußerst ungünstig zu debuggen sind) benötigt man ebenfalls nicht mehr.

kick it on DotNetKicks.com

Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by

Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.

Comment on this post

Letzte Posts

  • image.png
    Azure AppInsights: Ein mini Google Analytics für Websites

    Seit der Build Konferenz ist das neue Azure Portal für alle freigeschaltet. Durch das neue Portal ist mir ein “Dienst” aufgefallen, den ich bisher nicht gesehen hatte: Azure Application Insights Viel weiss ich nicht über den Dienst, aber wer eine Azure Website hat der sollte mal die “Analytics” Box öffnen. Im Grunde handelt es sich […]

  • image.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit veröffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, später lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zürich mit dem Titel “Open Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benötigen. Lösung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den “Terms of use” zustimmen. Völlig logisch dass da natürlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstößt hat das Unternehmen natürlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas ältere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natürlich auch auslesen möchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

Amazon Shop

Facebook