Loading dropdownlist on click of the dropdown's arrow/lazy loading of dropdown_问答_开发者

I have a situation where on a page there are 7-8 dropdowns, which have large amount of data to be bound. I have a radiobutton list having 2 choices and on selecting any of them, the I get the data from cache and bind all the dropdowns which takes about 6-7 seconds. But, I don't use all the dropdown every time as basic functionality is based on a date range. So I was thinking , if I could load the dropdown on demand, i.e. on click of dropdown arrow, I would bind the dropdown, the it would be better and user does not have to wait for those 6-7 seconds while switching between the radiobuttonlist choices. I tried calling a JS function on dropdown's onClick and from there firing one button's event. I am getting the data populated on dropdown's click but, the dropdown gets collapse开发者_开发知识库d as soon as the data is bound, and user have to click again to select from dropdownlist items.I was just wondering if anyone can give me an idea so that the dropdown wont collapse and stays after binding, or else a full idea of lazy loading of the dropdown. I have also specified some of my code from my 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>

I would suggest that you use different javascript events to trigger this behavior. The best that I can think of is to use the onfocus and onmouseover events.

Using the onfocus event will allow your page to work for people who navigate to the drop down lists without clicking directly on the control; a person could use the keyboard and tab until focus reaches the drop down list. Alternatively (though probably not as relevant), a person might click on a <label> tag for your drop down list control. Doing so will also cause focus to be set on the drop down list.

Using the onmouseover event will allow you to populate the drop down list before the user clicks on it, preventing the necessary second click that you mentioned.

EDIT: I did some experimentation and found that you might want to use the onmousedown event instead of the onmouseover event. The advantage is that it doesn't unnecessarily load data if the user just happens to pass the mouse over the drop down list without actually clicking on it, and it does not interrupt the expansion of the drop down list, so the user only needs to click once in order to expand it. The downside is that the user may have to wait for the data, since you're waiting until the user actually clicks in order to decide to load data. Depending on how much data you have and how fast the server can retrieve the data, this wait may or may not be significant.

Below is a simple example page where I've demonstrated using these two javascript events:

<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>

I haven't tried running your sample code, but it looks to me like you're using javascript to trigger a button click in order to cause a postback so that you can populate the drop down list control on the server. If you're doing a postback, then you're not going to be able to avoid having the entire page or at least part of the page reload, meaning that your drop down list won't stay expanded.

Instead of causing a postback, I'd recommend using ajax to make a call to the server in order to retrieve the data, then take that data and use it to populate your drop down list in javascript.

This seems like a decent article that explains how to set something like that up: http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET This article is describing how to implement cascading drop down lists, which doesn't sound exactly like what you're trying to do, but it's pretty close.