C# 单击下拉列表的箭头加载下拉列表/延迟加载下拉列表
我有一种情况，页面上有7-8个下拉列表，其中有大量数据需要绑定。我有一个单选按钮列表，有两个选择，在选择其中任何一个时，我从缓存中获取数据并绑定所有下拉列表，这大约需要6-7秒。但是，我并不是每次都使用所有下拉列表，因为基本功能是基于日期范围的。所以我在想，如果我可以按需加载下拉列表，即单击下拉箭头，我会绑定下拉列表，这样会更好，用户在radiobuttonlist选项之间切换时不必等待6-7秒。我试着在下拉菜单的onClick上调用一个JS函数，然后从那里触发一个按钮的事件。我在点击下拉列表时会填充数据，但一旦数据绑定，下拉列表就会折叠，用户必须再次单击以从下拉列表项中进行选择。我只是想知道是否有人能给我一个主意，使下拉列表不会折叠并在绑定后保持不变，或者完全了解延迟加载下拉列表。我还从POC中指定了一些代码C# 单击下拉列表的箭头加载下拉列表/延迟加载下拉列表,c#,javascript,asp.net,asp.net-ajax,controls,C#,Javascript,Asp.net,Asp.net Ajax,Controls,我有一种情况，页面上有7-8个下拉列表，其中有大量数据需要绑定。我有一个单选按钮列表，有两个选择，在选择其中任何一个时，我从缓存中获取数据并绑定所有下拉列表，这大约需要6-7秒。但是，我并不是每次都使用所有下拉列表，因为基本功能是基于日期范围的。所以我在想，如果我可以按需加载下拉列表，即单击下拉箭头，我会绑定下拉列表，这样会更好，用户在radiobuttonlist选项之间切换时不必等待6-7秒。我试着在下拉菜单的onClick上调用一个JS函数，然后从那里触发一个按钮的事件。我在点击下拉列表时
<%@ 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>
我建议您使用不同的javascript事件来触发此行为。我能想到的最好方法是使用onfocus和onmouseover事件 使用onfocus事件将允许您的页面为导航到下拉列表的用户工作，而无需直接单击控件；用户可以使用键盘和选项卡，直到焦点到达下拉列表。或者，尽管可能不太相关，但用户可能会单击下拉列表控件的标记。这样做还将导致在下拉列表上设置焦点 使用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>