2010-09-17 3 views
3

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

ответ

3

Я предлагаю вам использовать различные события javascript, чтобы вызвать это поведение. Лучшее, что я могу придумать, - использовать события onfocus и onmouseover.

Использование события onfocus позволит вашей странице работать для людей, которые переходят в выпадающие списки, не нажимая непосредственно на элемент управления; человек может использовать клавиатуру и вкладку, пока фокус не достигнет выпадающего списка. В качестве альтернативы (хотя, вероятно, не так важно), человек может нажать на тег <label> для вашего элемента управления выпадающего списка. Это также приведет к тому, что фокус будет установлен в выпадающем списке.

Использование события onmouseover позволит вам заполнить выпадающий список до того, как пользователь нажмет на него, предотвращая необходимый второй щелчок, который вы упомянули.

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