单击下拉列表的箭头加载下拉列表/延迟加载下拉列表答案

【问题标题】：Loading dropdownlist on click of the dropdown's arrow/lazy loading of dropdown单击下拉列表的箭头加载下拉列表/延迟加载下拉列表
【发布时间】：2010-09-17 12:06:54
【问题描述】：

我有一种情况，页面上有 7-8 个下拉菜单，需要绑定大量数据。我有一个单选按钮列表，有 2 个选项，在选择其中任何一个时，我从缓存中获取数据并绑定所有下拉列表，这大约需要 6-7 秒。但是，我不会每次都使用所有下拉菜单，因为基本功能是基于日期范围的。所以我在想，如果我可以按需加载下拉列表，即单击下拉箭头，我会绑定下拉列表，这样会更好，用户不必在单选按钮列表之间切换时等待 6-7 秒选择。我尝试在下拉菜单的 onClick 上调用 JS 函数，然后从那里触发一个按钮的事件。我正在通过单击下拉列表填充数据，但是一旦绑定数据，下拉列表就会折叠，用户必须再次单击才能从下拉列表项中进行选择。我只是想知道是否有人可以给我一个想法，以便下拉列表绑定后不会崩溃并保持不变，否则就是延迟加载下拉列表的完整想法。我还从我的 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>

【问题讨论】：

标签： c# javascript asp.net asp.net-ajax controls

【解决方案1】：

我建议您使用不同的 javascript 事件来触发此行为。我能想到的最好的方法是使用onfocus 和onmouseover 事件。

使用onfocus 事件将使您的页面适用于无需直接单击控件即可导航到下拉列表的用户；一个人可以使用键盘和选项卡，直到焦点到达下拉列表。或者（尽管可能不那么相关），一个人可能会单击<label> 标记以获取您的下拉列表控件。这样做也会导致焦点设置在下拉列表上。

使用onmouseover 事件将允许您在用户点击下拉列表之前填充它，从而防止您提到的必要的第二次点击。

编辑：我做了一些实验，发现您可能想要使用onmousedown 事件而不是onmouseover 事件。优点是如果用户只是将鼠标移到下拉列表上而没有实际单击它，它不会不必要地加载数据，并且不会中断下拉列表的扩展，因此用户只需要单击一次以展开它。缺点是用户可能必须等待数据，因为您要等到用户实际点击才能决定加载数据。根据您拥有的数据量以及服务器检索数据的速度，这种等待可能很重要，也可能不重要。

下面是一个简单的示例页面，我在其中演示了使用这两个 javascript 事件：

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

我没有尝试运行您的示例代码，但在我看来，您正在使用 javascript 来触发按钮单击以导致回发，以便您可以填充服务器上的下拉列表控件。如果您正在执行回发，那么您将无法避免重新加载整个页面或至少部分页面，这意味着您的下拉列表不会保持展开状态。

我建议不要导致回发，而是使用 ajax 调用服务器以检索数据，然后获取该数据并使用它在 javascript 中填充您的下拉列表。

这似乎是一篇不错的文章，解释了如何设置类似的东西：http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET 本文描述了如何实现级联下拉列表，这听起来与您尝试做的不太一样，但非常接近。

【讨论】：