Question

我有一种情况，页面上有7-8个下拉列表，其中包含大量数据。我有一个有两个选项的radiobutton列表，并且在选择其中任何一个时，我从缓存中获取数据并绑定所有下拉列表，大约需要6-7秒。但是，我不会每次都使用所有下拉菜单，因为基本功能是基于日期范围。所以我在想，如果我可以根据需要加载下拉列表，即点击下拉箭头，我会绑定下拉列表，它会更好，用户不必等待那些6-7秒，同时在radiobuttonlist之间切换选择。我尝试在dropdown的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>

Answer 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 本文描述了如何实现级联下拉列表，这听起来与您尝试的完全不同，但它非常接近。

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

1 个答案: