C#-单击下拉菜单的箭头/下拉菜单的延迟加载,加载下拉列表

2023-08-13 12:31:28

我遇到的情况是,页面上有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>

解决方法:

我建议您使用不同的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);" onm ouseover="load(this);">
        </select>
    </body>
</html>

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

建议不要使用回发,而建议使用ajax调用服务器以检索数据,然后获取该数据并将其用于在javascript中填充下拉列表.

这似乎是一篇不错的文章,解释了如何设置类似的内容：http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET
本文介绍了如何实现级联下拉列表,这听起来并不完全像您要尝试执行的操作,但是非常接近.

码农公寓

相关文章