使用javascript,在datalist中的LinkBut​​ton中包含div中的标签文本?

时间:2016-04-20 18:58:47

标签: javascript c# asp.net visual-studio-2008 asp.net-4.0

我有一个PanelModalPopupExtender显示数据绑定DataList。 aspx标记如下所示。

基本上,用户点击ButtonOpenPopup并显示带有datalist的Panel。然后,用户单击一个数据列表项,表示RoomNUm

如您所见,还有TextBox名为TextBoxNewRoomNum。此TextBox的目的是显示DataList中单击的RoomNum。

问题是,这需要在没有webform执行任何postback的情况下完成。我已尝试使用OnClientClick进行不同的函数调用,但没有任何功能。通常情况下,面板会随着点击而消失。

我的问题是:如何将点击的datalist项目的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>    

1 个答案:

答案 0 :(得分:0)

您可能需要将return false;添加到ShowRoom()JavaScript方法中。这将阻止回发。

LinkBut​​ton有runat =&#34;服务器&#34;每次点击它都会导致它发起回发的属性。这可能是专家组消失的原因。

编辑:
根据您的评论,我非常确定使用<%# Eval("RoomNum")%>作为ShowRoom()方法的参数会导致问题。

当我完成类似的操作时,我已使用this关键字作为参数的值。例如OnClientClick='return ShowRoom(this);'然后在ShowRoom()方法中使用该参数和jQuery导航到包含房间号的span元素。

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

   return false;
}