Кнопка Datalist внутри Modalpopupextender не стреляет

Question

У меня есть список данных, под которым есть кнопка для открытия Modalpopupextender. В этом modalpopupextender есть кнопка «Отправить», которая не запускается. Пожалуйста, совет.

   <table style="width: 100%">
        <tr>
            <td colspan="2">
                <asp:DataList ID="dl1" runat="server" CellPadding="20" RepeatDirection="Vertical"
                    Style="width: 100%;" OnItemCommand="dl1_ItemCommand" OnSelectedIndexChanged="dl1_SelectedIndexChanged">
                    <ItemTemplate>
                        <table style="background-color: White; padding: 10px; border-color: Gray; width: 100%;">
                            <tr>
                                <td style="width: 30%; text-align: center;">
                                    <asp:Image ID="imgPhoto" runat="server" ImageUrl='  
                                    <%# "~/CoachPhoto/" + Eval("CoachId") + ".jpg" %>' Style="margin-right: 20px; margin-left: 50px;"
                                        Height="150px" Width="150px" BorderColor="Black" BorderStyle="Solid" />
                                </td>
                                <td style="width: 40%;">
                                    <table style="width: 100%;">
                                        <tr>
                                            <td>
                                                <asp:Label ID="lblName" runat="server" Font-Size="Large" ForeColor="DarkBlue" Text='<%# String.Format("{0} {1} {2} {3}", Eval("FirstName"), Eval("LastName"), ", ", Eval("AcademyName")) %>'>
                                                </asp:Label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:Label ID="lblLocation" Font-Size="Large" ForeColor="DarkBlue" runat="server"
                                                    Text='<%# Eval("Location") + ", " + Eval("City") %>'>  
                                                </asp:Label>
                                            </td>
                                        </tr>
                                        <%--<tr>
                                            <td>
                                                <asp:Label ID="lblReview" ForeColor="Black" runat="server" Text="Review">  
                                                </asp:Label>
                                            </td>
                                        </tr>--%>
                                        <tr>
                                            <td>
                                                <table style="width: 100%;">
                                                    <tr>
                                                        <td style="width: 50%;">
                                                            <div style="font-size: small;">
                                                                Sport
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div style="font-size: small;">
                                                                Starting at</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <asp:Label ID="lblSport" runat="server" Font-Size="Medium" ForeColor="Black" Text='<%# Eval("Sport") %>'>
                                                            </asp:Label>
                                                        </td>
                                                        <td>
                                                            <asp:Label ID="lblFees" runat="server" Font-Size="Medium" ForeColor="Black" Text='<%# String.Format("{0} {1} {2} {3}", "Rs", Eval("Fees"), "per", Eval("FeesType")) %>'>
                                                            </asp:Label>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <table style="width: 100%;">
                                                    <tr>
                                                        <td style="width: 50%;">
                                                            <div style="font-size: small;">
                                                                Contact Number
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div style="font-size: small;">
                                                                Location</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <asp:HyperLink ID="hypTelephoneNumber" runat="server" NavigateUrl='<%# "tel:" + Eval("Mobile")%>'
                                                                Font-Size="Medium" ForeColor="Black" Text='<%# Eval("Mobile")  %>' />
                                                        </td>
                                                        <td>
                                                            <asp:Label ID="lblCompleteLocation" runat="server" Font-Size="Medium" ForeColor="Black"
                                                                Text='<%# Eval("Address") + ", " + Eval("Location") %>'>
                                                            </asp:Label>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:Label ID="lblProfile" Font-Size="Medium" ForeColor="Black" runat="server" Text='<%# Eval("CoachProfile") %>'>  
                                                </asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td>
                                    <%--<asp:Button ID="lnkViewProfile" runat="server" Text="View Profile" PostBackUrl='<%# String.Format("{0} {1}", "~/CoachProfile.aspx?Id=", Eval("CoachId")) %>'>
                                    </asp:Button><br />
                                    <br />--%>
                                    <asp:Button ID="btnMessageCoach" runat="server" Text="Message Coach" Style="border-radius: 5px;
                                        height: 30px; background: #32BC29; width: 180px; font-size: Medium; color: Black;">
                                    </asp:Button>
                                    <cc1:ModalPopupExtender ID="mdMessage" BehaviorID="behaviorIDmp3" runat="server"
                                        PopupControlID="Panel3" TargetControlID="btnMessageCoach" CancelControlID="lnkCancelMessage"
                                        DropShadow="true" BackgroundCssClass="modalBackground">
                                    </cc1:ModalPopupExtender>
                                    <br />
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:DataList>
                <asp:Panel ID="Panel3" runat="server" CssClass="modalPopup" align="center" Style="display: none;
                    height: 450px; width: 650px;" DefaultButton="btnSendMessage">
                    <asp:TextBox ID="txtMessage" TextMode="MultiLine" Height="200px" runat="server" class="txtFirstName"
                        Width="500px" name="email" Font-Size="Large" Style="margin-bottom: 30px; margin-top: 20px;"
                        ValidationGroup="Message" PlaceHolder="Message" />
                    <br />
                    <asp:RequiredFieldValidator EnableClientScript="true" ID="reqtxtMessage" runat="server"
                        ValidationGroup="Message" ForeColor="Red" ControlToValidate="txtMessage" ErrorMessage="Message Empty"
                        Display="Dynamic" />
                    <br />
                    <asp:TextBox ID="txtContactNumber" runat="server" class="txtFirstName" Width="500px"
                        name="contactnumber" value="" Height="40px" Font-Size="Medium" PlaceHolder="Contact Number" />
                    <asp:RequiredFieldValidator EnableClientScript="true" ID="reqtxtContactNumber" runat="server"
                        ValidationGroup="Message" ForeColor="Red" ControlToValidate="txtContactNumber"
                        ErrorMessage="Contact Number Empty" Display="Dynamic" />
                    <br />
                    <asp:RegularExpressionValidator ID="regtxtContactNumber" runat="server" ControlToValidate="txtContactNumber"
                        ValidationGroup="Message" ErrorMessage="RegularExpressionValidator" ForeColor="Red"
                        ValidationExpression="[0-9]{10}" Text="Enter 10 digit mobile number">
                    </asp:RegularExpressionValidator>
                    <div>
                        <asp:Button ID="btnSendMessage" ValidationGroup="Message" runat="server" Text="Send"
                            Style="border-radius: 5px; height: 35px; background: #32BC29; width: 400px; font-size: Medium;
                            color: Black; margin-top: 30px; color: Black;" OnClick="btnSendMessage_Click" /></div>
                    <br />
                    <asp:HyperLink ID="lnkCancelMessage" runat="server" Text="Cancel" CssClass="btnClosePopup"
                        Style="margin-top: 10px;">Close</asp:HyperLink>
                </asp:Panel>
            </td>
        </tr>
    </table>

Вверху находится список данных, внутри которого есть модалпопупексендер, который открывается при нажатии кнопки «btnMessageCoach». Теперь, когда всплывающее окно открывается, появляется текстовое поле сообщения и кнопка Отправить. Но эта кнопка «Отправить» не срабатывает при нажатии. Пожалуйста, совет.

Answer 1

Вам необходимо внести следующие изменения в свой код:

Переместите <asp:Panel ID="Panel3" runat="server" за пределы DataList, чтобы он не отображался несколько раз.

Чтобы узнать идентификатор кликаемого элемента на стороне сервера, выполните следующие действия:

Добавить <asp:HiddenField вне DataList

<asp:HiddenField ID="hidSelectedID" runat="server" />

Добавьте кнопку OnClientClick на кнопку MessageCoach, чтобы установить идентификатор в скрытом поле:

    <asp:Button ID="btnMessageCoach" runat="server" 
OnClientClick="javascript:document.getElementById('<%=hidSelectedID.ClientId%>').value='<%#Eval("CoachId")>';" Text="Message Coach" Style="border-radius: 5px; height: 30px; background: #32BC29; width: 180px; font-size: Medium; color: Black;"></asp:Button>

Внутри дескриптора btnSendMessage_Click вы можете получить доступ к скрытому значению поля, используя hidSelectedID.Value