Загрузка выпадающего списка по щелчку стрелки раскрывающегося списка / отложенная загрузка выпадающего списка - PullRequest
Новая
       17

Загрузка выпадающего списка по щелчку стрелки раскрывающегося списка / отложенная загрузка выпадающего списка

3 голосов
/ 17 сентября 2010

У меня есть ситуация, когда на странице есть 7-8 выпадающих списков, которые имеют большой объем данных для привязки. У меня есть список радиокнопок с двумя вариантами выбора, и при выборе любого из них я получаю данные из кэша и связываю все выпадающие списки, что занимает около 6-7 секунд. Но я не использую все раскрывающиеся списки каждый раз, так как базовая функциональность основана на диапазоне дат. Поэтому я подумал, что если бы я мог загрузить раскрывающийся список по требованию, то есть по щелчку стрелки раскрывающегося списка, я бы связал раскрывающийся список, так будет лучше, и пользователю не придется ждать эти 6-7 секунд при переключении между радиобуттон-листом. выбор. Я попытался вызвать функцию JS в onClick выпадающего меню и оттуда запустить событие одной кнопки. Я получаю данные, заполняемые по щелчку раскрывающегося списка, но раскрывающийся список сворачивается, как только привязываются данные, и пользователю приходится снова щелкать, чтобы выбрать из элементов раскрывающегося списка. Мне просто было интересно, может ли кто-нибудь дать мне идею, чтобы раскрывающийся список не рухнет и останется после привязки, или же полная идея ленивой загрузки выпадающего. Я также указал часть своего кода из моего 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>

1 Ответ

3 голосов
/ 18 сентября 2010

Я бы посоветовал вам использовать разные события 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 Эта статья описывает, как реализовать каскадные выпадающие списки, что не совсем похоже на то, что вы пытаетесь сделать, но это довольноблизко.

...