Laden dropdownlist auf klicken Sie auf den dropdown-Pfeil/lazy loading von dropdown

Ich habe eine situation, wo auf der einen Seite gibt es 7-8 dropdowns, die große Menge an Daten gebunden werden. Ich habe eine radiobutton-Liste mit 2 Auswahlmöglichkeiten und auf die Auswahl einer von Ihnen, der ich die Daten aus dem cache und binden alle dropdowns, die dauert etwa 6-7 Sekunden. Aber, ich brauche nicht alle der dropdown-jeder Zeit als grundlegende Funktionalität basiert auf einen Datumsbereich. Also dachte ich mir , wenn ich könnte, laden Sie die dropdown-on-demand, d.h. auf klicken Sie auf der dropdown-Pfeil, ich würde binden Sie das dropdown, das es besser wäre und der Benutzer nicht warten, für diejenigen, die 6-7 Sekunden beim Umschalten zwischen dem radiobuttonlist-Entscheidungen. Ich habe versucht, den Aufruf einer JS-Funktion auf dropdown onClick und von dort nur ein button event. Ich bin immer die Daten aufgefüllt dropdown-click-aber das dropdown bekommt zusammenbrach, sobald die Daten gebunden ist, und Benutzer müssen klicken Sie erneut auf wählen Sie aus der dropdownlist Elemente.Ich Frage mich, ob jemand kann mir eine Vorstellung also, dass das dropdown nicht zusammenbrechen und bleibt nach dem binden, oder sonst eine volle Idee von lazy loading von der dropdown-Liste. Ich habe auch angegeben, manche meinen code von meinem POC.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-   transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
  function load() {
        //debugger;
        var dropdown = document.getElementById('DropDownList1');
        var ln = dropdown.options.length;
        if (ln == 0) {
            var btn = document.getElementById('Button1');
            btn.click();
        }
        dropdown.click();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"/>
<div>

    <asp:DropDownList ID="DropDownList1" runat="server" onClick="javascript:load();">
    </asp:DropDownList>
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" Style="display:   noone;"/>

</div>
</form>
</body>


public partial class _Default : System.Web.UI.Page 
{
 protected void Page_Load(object sender, EventArgs e)
 {

 }
 protected void Button1_Click(object sender, EventArgs e)
 {
    ArrayList arr = new ArrayList();
    arr.Add("Item1");
    arr.Add("Item2");
    arr.Add("Item3");
    DropDownList1.DataSource = arr;
    DropDownList1.DataBind();
 }
}
</html>
InformationsquelleAutor user258427 | 2010-09-17
  1. 4

    Ich würde vorschlagen, dass Sie verwenden verschiedene javascript-Ereignisse auslösen dieses Verhalten. Die besten, die ich denken kann, ist die Verwendung der onfocus und onmouseover Veranstaltungen.

    Mithilfe der onfocus Veranstaltung ermöglichen, Ihre Seite zu arbeiten für Menschen, die navigieren Sie zu dem drop-down-Listen ohne Klick direkt auf der Steuerung; eine person konnte mit der Tastatur und tab, bis der Fokus erreicht die drop-down-Liste. Alternativ (wenn auch wahrscheinlich nicht so relevant), könnte eine person klicken Sie auf ein <label> tag für Ihre drop-down-Liste Kontrolle. Dabei wird auch bewirken, dass der Fokus gesetzt werden auf die drop-down-Liste.

    Mithilfe der onmouseover Veranstaltung wird Ihnen ermöglichen, füllen Sie die drop-down-Liste, bevor der Benutzer darauf klickt, verhindert den erforderlichen zweiten Klick, die Sie erwähnt.

    EDIT: ich habe einige Experimentieren und fand, dass Sie vielleicht wollen, verwenden Sie die onmousedown - Ereignis anstelle von das onmouseover Veranstaltung. Der Vorteil ist, dass es nicht unnötig Daten laden, wenn der Benutzer gerade passiert, passieren die Maus über die drop-down-Liste, ohne tatsächlich klicken Sie auf es, und es unterbricht nicht die Erweiterung der drop-down-Liste, so dass der Benutzer muss nur klicken Sie einmal, um es zu erweitern. Der Nachteil ist, dass der Benutzer kann die Wartezeit für die Daten, da Sie warten, bis der Benutzer tatsächlich klickt, um zu entscheiden, um Daten zu laden. Je nachdem, wie viele Daten Sie haben und wie schnell der server kann die Daten abzurufen, dieses warten kann oder kann nicht signifikant sein.

    Unten ist ein einfaches Beispiel-Seite, wo ich demonstriert habe, mit diesen beiden javascript-Ereignisse:

    <html>
    <head>
        <script type="text/javascript" language="javascript">
            function load(ddl)
            {
                if(ddl.options.length == 0)
                {
                    ddl.options[0] = new Option("Option 1", "1", false, false);
                    ddl.options[1] = new Option("Option 2", "2", false, false);
                    ddl.options[2] = new Option("Option 3", "3", false, false);
                }
            }
        </script>
    </head>
    <body>
        <label for="DropDownList1">Drop Down List 1:</label>
        <select id="DropDownList1" onfocus="load(this);" onmouseover="load(this);">
        </select>
    </body>
</html>

    Ich habe nicht versucht, läuft dein Beispiel-code, aber es sieht für mich wie du javascript benutzt, um die trigger eine Schaltfläche klicken, um ein postback zu verursachen, so dass Sie können füllen Sie die Dropdown-Liste-Steuerelement auf dem server. Wenn Sie ein postback, dann bist du nicht in der Lage sein, um zu vermeiden, dass die gesamte Seite oder zumindest ein Teil der Seite neu geladen, was bedeutet, dass Ihre drop-down-Liste bleiben nicht erweitert.

    Statt verursacht eine postback, würde ich empfehlen die Verwendung von ajax, um einen Aufruf an den server, um die Daten abzurufen, dann nehmen Sie diese Daten und verwenden Sie es, füllen Sie das drop-down-Liste in javascript.

    Dies scheint wie eine menschenwürdige Artikel, der erklärt, wie Sie festlegen, dass so etwas wie oben: http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET
    Dieser Artikel beschreibt, wie die Umsetzung von cascading drop-down-Listen, die nicht unbedingt genau so klingen wie das, was du versuchst zu tun, aber es ist ziemlich nah.

    InformationsquelleAutor Dr. Wily's Apprentice
Schreibe einen Kommentar