Rendering mehrere Kalender Blähungen html, moogs down page

Question

Hinweis: Ich verwende das Infragistics-Steuerelement, weil dies vererbten Legacy-Code ist, aber ich bin nicht oben mit einem ASP.NET-Steuerelement neu zu schreiben, wenn das eine bessere Lösung ist.

Ich habe ein Repeater-Steuerelement, das einen Infragistics WebDateChooser verwendet, um ein Datum für einen Datensatz auszuwählen. Angenommen, jeder Eintrag im Repeater stellt einen Kunden dar, und ich wähle ein Aktivierungsdatum oder etwas in dieser Art aus. Es könnte jederzeit Vergangenheit, Gegenwart oder Zukunft sein.

Wenn Sie dieses Steuerelement 20 Mal rendern, schreibt es alle die schweren HTML für die Anzeige aller Termine (Monatsnamen, Wochentage, etc etc) 20 Mal und bläht den HTML-Code dramatisch. Dies führt dazu, dass der Browser wirklich mit dem Rendern der Seite in einer vernünftigen Zeitspanne, selbst für 20 Datensätze, Schwierigkeiten hat (Paging implementiert auf dem Repeater nur um zu verhindern, dass der Browser auf einer massiven Seite abstürzt). Dies gilt auch für einen geringeren (aber immer noch signifikanten) Grad mit der Standard-ASP.NET-Kalendersteuerung.

Was ich suche ist eine Möglichkeit, möglicherweise alle 20 Datumswähler die Ressourcen von 1 Kalender teilen, so dass sie nicht müssen ihre eigenen Strings und Mist für die Anzeige von ausführlichen Daten zu rendern.

EDIT: Ich verstehe viele Benutzer haben Infragistics nicht verwendet, aber es ist immer noch genauso wahr mit dem Standard, gebaut in ASP: Kalender-Steuerelement. Setzen Sie einen in einen Repeater und zeigen Sie n> 20 mal an. Es bugs den Browser beim Rendern.

Um zu verdeutlichen, dass dies für eine mögliche Lösung von Bedeutung ist, ist diese Codebasis auf .NET 2.0 und muss IE6 unterstützen.

Answer 1

Eine andere Sache, die Sie in Betracht ziehen könnten, ist eine Instanz des Kalenders auf der Seite zu haben. Wenn der Benutzer auf ein Textfeld klickt, das den Kalender "aktiviert", können Sie ein clientseitiges JavaScript-Framework wie jQuery verwenden, um den Kalender anzuzeigen und ihn an die richtige erwartete Position zu verschieben. Sobald das Datum ausgewählt ist, speichern Sie das ausgewählte Datum im richtigen Textfeld und blenden Sie den Kalender erneut aus. Sie müssen etwas Javascript schreiben, aber es schlägt das Downloaden all der zusätzlichen Blähungen!

Answer 2

Ich habe nicht die Kontrolle verwendet, die Sie sind, also kann ich nicht sagen, ob dieser für Sie arbeitet, aber ich empfehle sehr: http://www.dynarch.com/projects/calendar/ Es ist ein Javascript-Kalender, so dass der Benutzer nur die Js-Includes einmal herunterladen wird. Danach sind die Erstellungsanrufe nur ein paar Zeilen.

Es ist nicht sofort "Drag-and-Drop" kompatibel mit ASP.Net. Ich empfehle, es in ein Benutzersteuerelement zu verpacken.

Answer 3

Während es nicht zu einer Instanz des Steuerelements vereinheitlicht, könnten Sie den CalendarExtender verwenden, der mit dem AjaxControlToolkit geliefert wird. Ich habe nur ein kleines Beispiel auf meiner Maschine gebaut und es hat die Seite nicht so sehr in den Schatten gestellt.

Answer 4

Nun zeigt das Beispiel unter Infragistics definitiv, dass das Steuerelement so gebaut wurde, dass es wieder verwendet werden kann. Sie benutzen natürlich keinen Repeater, aber am Ende funktioniert alles gleich. Ich würde prüfen, wie die UltraGridColumn mit dem WebDateChooser arbeitet, um das Dropdown anzuzeigen. Natürlich wird dies mit dem allgemeineren Problem nicht helfen. Dafür würde ich tun, wie die anderen sagen und ein Steuerelement erstellen und Javascript verwenden, um es dort anzuzeigen, wo es benötigt wird, wenn es benötigt wird.
Wenn Sie wirklich kein Javascript selbst schreiben möchten, können Sie die Toolkits nutzen. Sie können eine Instanz eines beliebigen Kalenders (nicht die Dropdown-Version) erstellen und das Modalpopup von AjaxControlToolkit, das WebDialogWindow von Infragistic oder etwas Ähnliches (vielleicht mit weniger Dialogy-Floaty) verwenden, um es anzuzeigen.

Am Ende haben alle Optionen eines gemeinsam. Sie erstellen einen einzelnen Kalender außerhalb des Repeaters und zeigen diese Instanz des Kalenders bei Bedarf an.

Answer 5

Wenn Sie nach einem Datepiker suchen, der für jedes Datumsfeld in einem Raster aufgerufen und angezeigt wird, ist das Aufrufen eines JavaScript-Kalenders am effizientesten. Schauen Sie sich den JQuery-Kalender an und stellen Sie den Anruf einfach auf jedes Feld - siehe: jqueryui.com/demos/.

HTML - Note ist die Klasse, die gleiche und ID anders:

<input type="text" class="datepicker" id="d1" /> 
<input type="text" class="datepicker" id="d2" /> 

JQuery wählt dann die CSS-Klasse:

$(.datepicker.each(function() { 
    $(this).datepicker(); 
}); 

Die ältere ASP.Net-Lösung ist für eine Kontrolle zu sein deklariert und dynamisch auf dem Server instanziert, wenn der Klick gerade ausgelöst wird. Es gibt viele Beispiele dafür auf vielen Blogs. Oder 20 von ihnen können beim Laden der Seite erstellt und in ein Datagrid oder etwas platziert werden. Was aber, wenn das Datagrid 100 Einträge hat? Es kann nicht skaliert werden.

Aber es gibt einen Kalender im AJAX Control Toolkit, der einmal in einem Panel erstellt wird und dann dieses Panel angezeigt wird, wo Sie es erzählen. Es ist ein Kalender, der oft gezeigt wird.

<asp:Panel ID="panelCal" runat="server">       
    <asp:UpdatePanel ID="update" runat="server">            
    <ContentTemplate>    
    <asp:Calendar ID="theonlyCal"runat="server"/>            
    </ContentTemplate>       
    </asp:UpdatePanel> 
</asp:Panel> 

Jetzt sagen, es gibt 20 Zeilen:

<asp:TextBox ID="twenty" runat="server" /> 

Nun hat jedes Textfeld muss einen Popup-Steuerelement-Extender.

<ajaxToolkit:PopupControlExtenderID="twentExtenders"runat="server" 
TargetControlID="twenty" 
PopupControlID="panelCal" 
Position="Bottom" /> 

ASP.NET AJAX kann viel Bandbreite verwenden.