使用JavaScript，獲取包裝在數據列表中LinkBut​​ton中的div中的標簽文本？

Question

我有一個帶有ModalPopupExtender的Panel ，該Panel顯示一個數據綁定的DataList 。 aspx標記如下所示。

本質上，用戶單擊ButtonOpenPopup然后顯示帶有數據ButtonOpenPopup的Panel 。 然后，用戶單擊一個表示RoomNUm的數據列表項。

如您所見，還有一個名為TextBoxNewRoomNum的TextBox 。 此TextBox的目的是顯示在DataList單擊的RoomNum。

問題是，這需要在Webform不執行任何postback情況下完成。 我嘗試使用OnClientClick不同的函數調用，但是沒有任何效果。 通常，面板會隨着點擊消失。

我的問題是：如何將單擊的數據列表項的RoomNum的值傳輸到TextBox TextBoxNewRoomNum中？ 我更喜歡沒有jQuery。

任何幫助表示贊賞。 謝謝。

<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server"></ajax:ToolkitScriptManager>
<ajax:ModalPopupExtender ID="ModalPopupExtenderRoom" runat="server" PopupControlID="PanelRoomDetail" 
TargetControlID="btnDummy">
</ajax:ModalPopupExtender>
<asp:Button ID="ButtonOpenPopup" runat="server" Text="PopUp" onclick="ButtonOpenPopup_Click"  />

<asp:Button ID="btnDummy" runat="server" Text="PopUp" style = "display:none" />

<asp:Panel ID="PanelRoomDetail" runat="server" style="width:600px; height: 600px;display:none">
    <div>
        <asp:DataList ID="DataListFloorThumb" runat="server" RepeatColumns="5" >
            <ItemTemplate>
                <div >
                <asp:LinkButton id="LinkButton1" runat="server" OnClientClick='return ShowRoom(<%# Eval("RoomNum")%>);'>
                    <div style='width:72px;height:72px; background-image:url(<%# Eval("image_path_thumbnail","Styles/Images/{0}") %>)'>
                        <div>
                            <div>
                                <asp:Label ID="Label1" CommandName="cmd_RoomNum" CommandArgument='<%# Eval("RoomNum")%>' 
                                runat="server" Text='<%# Eval("RoomNum")%>' ></asp:Label>
                            </div>
                        </div>
                    </div>
                </asp:LinkButton>
            </ItemTemplate>
        </asp:DataList>
    </div>
    <div>
        <div style="float: left; width: 200px;">
            <asp:TextBox ID="TextBoxNewRoomNum" runat="server"></asp:TextBox>
        </div>
    </div>
</asp:Panel>    

Answer 1

您可能需要添加return false; 到您的ShowRoom（）JavaScript方法。 這將停止回發。

LinkBut​​ton具有runat =“ server”屬性，這將導致它在每次單擊時啟動回發。 這可能是面板消失的原因。

編輯：
根據您的評論，我很確定在ShowRoom（）方法的參數中使用<%# Eval("RoomNum")%>會導致此問題。

當我做類似的事情時，我使用this關鍵字作為參數的值。 例如OnClientClick='return ShowRoom(this);' 然后在ShowRoom（）方法中，將該參數與jQuery一起使用，以導航到保存房間號的span元素。

function ShowRoom(linkButton) {
   var span = $(linkButton).Find(span)[0];
   alert(span.innerHTML);

   return false;
}