2013-02-12 3 views
1

Я пытаюсь создать раскрывающийся список, используя раскрывающийся список AjaxToolKit. У меня есть следующий код:Как использовать Dropdown Extender для запуска события OnSelectedIndexChanged

<asp:Label ID="ddTest" runat="server" Text="Transactions" Width="300px" BorderColor="#C0C0C0" CssClass="selecter"/> 
    <ajaxToolkit:DropDownExtender runat="server" ID="ddeSections" 
       TargetControlID="ddTest" DropDownControlID="panelItems" HighlightBackColor="Silver" 
       DropArrowBackColor="white" HighlightBorderColor="Silver"/> 

и следующий за "список" пунктов:

<table runat="server" id="ctlOptions" class="options" cellspacing="2" cellpadding="2" border="1"> 
    <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">Transactions</td></tr> 
    <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">The second option</td></tr> 
    <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">The third option</td></tr> 
    <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">The fourth option</td></tr> 
    <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">The fifth option</td></tr> 
    </table> 

мой JavaScript выглядит следующим образом:

function mouseOver(obj) { 
    if (obj) obj.className = 'itemOver'; 
} 


function mouseOut(obj) { 
    if (obj) obj.className = 'item'; 
} 

где пункт и itemOver - соответствующие классы CSS. Проблема в том, что я хочу, чтобы мое событие onclick вызывало событие SelectedIndexChanged -type на сервере. Я попытался с помощью этой функции:

function clickIt(obj) { 
    var ddTest = document.getElementById("ctl00_ContentPlaceHolder1_ddTest"); 
    var selVal = ''; 
    if (ddTest) { 
     selVal = obj.firstChild.nodeValue; 
     ddTest.firstChild.nodeValue = selVal; 
     __doPostBack('<%=ddSections.ClientID %>', ''); 
    } 
} 

ddSections является asp:Dropdown которого OnSelectedIndexChanged события я пытаюсь стрелять.

Это инициирует обратный вызов на уровне страницы, но не метод ddSections_SelectedIndexChanged, который я хочу вызвать. Кстати, ddSections будут скрыты.

, пожалуйста, можете ли вы предложить несколько советов. Я потратил три дня, пытаясь понять это и пришел с пустыми руками. Не стесняйтесь переформатировать для удобства чтения. Спасибо заранее.

ответ

0

Прошло две недели с тех пор, как я задал этот вопрос, и я предполагаю, что никто не ответит, поэтому для записи я опубликую, как я действительно решил эту проблему.

  1. Я изменил с использованием таблицы html на использование неупорядоченного списка. (Вариант, который я ранее игнорировались из-за моей предполагаемой сложности в стилизации <UL>.

  2. Я добавил два скрытых поля, по одному для запуска, было ли или не выстрелил событие, и один для сохранения выбранного значения.

<asp:HiddenField runat="server" ID="hidSelectionChanged" Value="false"/> <asp:HiddenField runat="server" ID="hidSelectionValue" Value=""/>

Я создал "изменить" событие следующим образом:

function onchange(param) { 
    var chg = document.getElementById('<%=hidSelectionChanged.ClientID%>'); 
    var val = document.getElementById('<%=hidSelectionValue.ClientID%>'); 

    if (chg) { 
     chg.value = 'true'; 
    } 
    if (val) { 
     val.value = param; 
    } 

    __doPostBack('pnlResults', ''); 
} 

Тогда в каждом LI из UL я имел этот код:

<li class="ddl_li"><a href="javascript:onchange('Summary_1')">Summary</a></li> 

Результат был полной страницы после возврата, но в Page_Load случае страницы, теперь я мог проверить hidSelectionChanged.Value, чтобы увидеть, если PostBack был вызван моим выпадающим списком, и я мог проверить hidSelectionValue.Value, чтобы получить выбранное значение.

В конце концов, все получилось хорошо.

Смежные вопросы