PopUpExtender на ImageButton внутри проблемы GridView

Question

У меня есть GridView на моей странице asp.net, один столбец в этой сетке - ImageButton (TemplateField with ID = "imbReserve"). При нажатии на эту кнопку я хочу показать PopUp, но когда я ставлю TargetControlId = "imbReserve", я получаю сообщение об ошибке "Не удается найти элемент управления с идентификатором 'imbReserve'" Как этого добиться, нажав на кнопку внутри Grid show PopUp?

Answer 1

Посмотрите на эти 2 статьи, которые только что помогли мне с этой проблемой

Статья 1: Более традиционный подход

Следующее перефразировано из вышеприведенной статьи

Код страницы:

 <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
     <ContentTemplate>            
         <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" 
          Width="95%">
             <Columns>
                 <asp:TemplateField >
                     <ItemTemplate>
                         <asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
                     </ItemTemplate>
                  </asp:TemplateField>
                  <asp:BoundField DataField="customerid" HeaderText="ID"  />
                  <asp:BoundField DataField="companyname" HeaderText="Company" />
                  <asp:BoundField DataField="contactname" HeaderText="Name"  />
                  <asp:BoundField DataField="contacttitle" HeaderText="Title" />                
             </Columns>                    
         </asp:GridView>
     </ContentTemplate>
 </asp:UpdatePanel>     

<ajaxToolKit:ModalPopupExtender 
            ID="mdlPopup" runat="server" TargetControlID="pnlPopup" PopupControlID="pnlPopup" 
            CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
 <asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none">
     <asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
         [Your Content Here]
         </ContentTemplate>                
            </asp:UpdatePanel>
            <div align="right" style="width:95%">
                <asp:Button 
                    ID="btnSave" runat="server" Text="Save" />
                <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
            </div>             
        </asp:Panel>

Обратите внимание, что GridView обернут в панель обновлений, а также, что идентификатор целевого элемента управления для модального расширителя такой жекак идентификатор всплывающего элемента управления.Это связано с тем, что для ModalPopUp Extender требуется идентификатор целевого элемента управления, и я думаю, что это решение лучше плана, чем использование скрытой кнопки.

Теперь для кода позади:

protected void BtnViewDetails_Click(object sender, EventArgs e)
{
    //  Do Anything you need to the contents of the update panel

    //  update the contents in the detail panel
    this.updPnlCustomerDetail.Update();
    //  show the modal popup
    this.mdlPopup.Show();
}   

Статья 2: Использует клиентский Javascript

Перефразировано из вышеприведенной статьи

Клиентский Javascript

    <script type="text/javascript">
    //  keeps track of the delete button for the row
    //  that is going to be removed
    var _source;
    // keep track of the popup div
    var _popup;

    function showConfirm(source){
        this._source = source;
        this._popup = $find('mdlPopup');

        //  find the confirm ModalPopup and show it    
        this._popup.show();
    }

    function okClick(){
        //  find the confirm ModalPopup and hide it    
        this._popup.hide();
        //  use the cached button as the postback source
        __doPostBack(this._source.name, '');
    }

    function cancelClick(){
        //  find the confirm ModalPopup and hide it 
        this._popup.hide();
        //  clear the event source
        this._source = null;
        this._popup = null;
    }

Код страницы:

    <asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" >
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" />
            <asp:BoundField DataField="Item" HeaderText="Description" />
            <asp:BoundField DataField="IsCompleted" HeaderText="Complete?" />
            <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" >
                <ItemTemplate>
                   <asp:Button ID="btnDelete" runat="server"
                            OnClientClick="showConfirm(this); return false;" 
                            OnClick="BtnDelete_Click" Text="Delete" />
                </ItemTemplate>
            </asp:TemplateField>                            
        </Columns>                    
    </asp:GridView>

    <ajaxToolKit:ModalPopupExtender BehaviorID="mdlPopup" runat="server" 
            TargetControlID="div" PopupControlID="div" 
            OkControlID="btnOk" OnOkScript="okClick();" 
            CancelControlID="btnNo" OnCancelScript="cancelClick();"   
            BackgroundCssClass="modalBackground" />
     <div id="div" runat="server" align="center" class="confirm" style="display:none">
         <img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this item?
         <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
         <asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
     </div> 

Снова обратите внимание, что идентификатор целевого элемента управления для модального всплывающего расширителя совпадает с идентификатором элемента всплывающего управления.Также обратите внимание на атрибут OnClientClick на кнопке в поле шаблона, убедитесь, что вы включили «return false;».

Все, что нужно в коде за ним, обработчик события onClick (или onCommand), чтобы делать то, что вынужно сделать.

Я успешно испробовал оба эти подхода.

Надеюсь, что один из этих двух вариантов подойдет вам.

Answer 2

Проблема связана с тем, что реальный идентификатор изменяется при отображении страницы клиенту.

Откройте источник вашей страницы в браузере и посмотрите на идентификатор, который генерируется из asp.net. Затем используйте этот идентификатор в свойстве TargetControlID

Подобного рода проблемы присутствуют во всех шаблонных элементах управления в ASP.NET

.

Более чистым способом будет связать свойство TargetControlID ModalPopupExtendr при загрузке страницы, где вы можете использовать свойство ClientID, динамически генерируемое

modalPopupExtender.TargetControlID = myTemplateControl.ClientID;