1

AjaxToolKitのdropdownlistextenderを使用してドロップダウンリストを作成しようとしています。私は次のマークアップを持っています：

<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';
}

ここで、itemとitemOverは適切なスタイルのCSSクラスです。問題は、onclickイベントがサーバー上でSelectedIndexChangedタイプのイベントをトリガーすることです。私はこの関数を試しました：

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は非表示になります。

アドバイスをお願いします。私はこれを理解するために3日間を費やし、手ぶらで出てきました。読みやすくするために、自由に再フォーマットしてください。前もって感謝します。

4

1 に答える 1

0

この質問をしてから2週間が経ちましたが、誰も答えないと思いますので、記録として、実際にこの問題をどのように解決したかを投稿します。

  1. HTMLテーブルの使用から順序なしリストの使用に変更しました。（スタイリングが難しいと感じたため、以前は無視していたオプション<UL>。

  2. 2つの非表示フィールドを追加しました。1つはイベントが発生したかどうかをトリガーするためのもので、もう1つは選択した値を格納するためのものです。

<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場合、ポストバックがドロップダウンによってトリガーされたかどうかを確認できhidSelectionValue.Value、選択した値を取得できるかどうかを確認できました。

結局、すべてうまくいきました。

于 2013-03-01T19:01:20.167 に答える