Use AJAX ModalPopupExtender in GridView or other data controls

AJAX ModalPopupExtender has a required property "TargetControlID" which may seem to be very confusing to new users. It means the server control that will be extended by the ModalPopup, for instance, if when you click a button, a ModalPopup displays, then the button control is the one that is extended by the ModalPopup, so you will assign the button control's ID to "TargetControlID".

Another property of ModalPopupExtender is called "PopupControlID" which points to the actual control that will be displayed or popped up. Often times it points to an ASP:Panel control in which all contents are placed. For instance, if you would like to use a ModalPopup to display a customer's detailed information, then you can put the customer's details in a Panel control, then assign the Panel control's ID to the ModalPopuupExtender's PopupControlID. You cannot access PopupControlID property through the designer view and you have to switch to Source view in Visual Studio then manually assign value in ModalPopupExtender's markup.

Once you understand the above two properties, it is usually very simple to configure the ModalPopupExtender until it comes to using GridView, DataList, or other similar data controls. For instance, you have a GirdView that has an Edit (or View) button for each row and when the button is clicked, an AJAX ModalPopup is displayed with more information of the selected row. How would you configure the ModalPopup in this case?

It sounds very simple until when you try to assign TargetControlID property. Why? Let me explain. The Edit or View button usually is either in a CommandField or a TemplateField and cannot be accessible directly in Source view, which means you cannot assign the Edit/View control ID to TargetControlID which is a required field. How about using GridView's RowCreate event handler to dynamically assign TargetControlID with the button control ID in each row? Unfortunately you cannot because you are only allowed to assign one control ID to TargetControlID. So then what can we do? Here is the trick:

1. Add a server control ( I prefer to use Label control) and hide it with css style (not by setting Visible=False):

<asp:Label ID="lblPopupTargetID" runat="server" Style="display: none;"></asp:Label>
                      

Select all Open in new window

2. You can assign "lblPopupTargetID" to ModalPopupExtender's TargetControlID property:

<cc1:ModalPopupExtender ID="mpeEditEmployee" runat="server" 
                          TargetControlID="lblPopupTargetID"
                          PopupControlID="pnlEditCustomer">
                      </cc1:ModalPopupExtender>
                      

Select all Open in new window

How can we trigger the ModalPopup if we use the above trick? The answer is that we can use ModalPopupExtenderID.Show() function to display the ModalPopup in the code-behind and use ModalPopupExtenderID.Hide() to hide the ModalPopup. For instance, if the Edit button in your GridView is in a TemplateField with the CommandName="cmdEdit", then you can use GridView's RowCommand event handler to first populate the contents of the popup Panel, then call ModalPopupExtenderID.Show() to display the popup, with the above code snippet, it will be mpeEditEmployee.Show(). Depending on the design of the popup Panel, you will need to use the approriate event handler to close the popup. For instance, there are a Save button and a Cancel button in the popup Panel, then you can use both button's click event handler to clos the popup: mpeEditEmployee.Hide().

Note 1: if you want to use UpdatePanel (which I prefer), you will need to remember that both ModalPopupExtender and the control that TargetControlID points to need to be in the same UpdatePanel..

Note 2. If you use TemplateField for the Edit button, another way to implement ModalPopupExtender is to add the ModalPopupExtender control in the same ItemTemplate field as the button control so that you can assign the button's ID to TargetControlID. This approach is introduced in ASP.NET's AJAX tutorial: http://www.asp.net/learn/ajax-control-toolkit/tutorial-28-vb.aspx. I do not prefer this approach, the reason is simple: this apprach renders more HTML code.

    Private Sub gvCustomerList_RowCommand(ByVal sender As Object, _
                                  ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) _
                                      Handles gvCustomerList.RowCommand
                       
                              If (e.CommandName = "cmdEdit") Then
                                  'Populate ModalPopup content
                                  'Then call Show() to display the popup
                                  Me.mpeEditEmployee.Show()
                       
                              End If
                       
                          End Sub
                       
                          Protected Sub btnSave_Click(ByVal sender As System.Object, _
                                  ByVal e As System.EventArgs) Handles btnSave.Click
                              'Save changes
                              'Then call Hide() to close the popup
                              Me.mpeEditEmployee.Hide()
                          End Sub
                      

Select all Open in new window

    Private Sub gvCustomerList_RowCommand(ByVal sender As Object, _
                                  ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) _
                                      Handles gvCustomerList.RowCommand
                       
                              If (e.CommandName = "cmdEdit") Then
                                  'Populate ModalPopup content
                                  'Then call Show() to display the popup
                                  Me.mpeEditEmployee.Show()
                       
                              End If
                       
                          End Sub
                       
                          Protected Sub btnSave_Click(ByVal sender As System.Object, _
                                  ByVal e As System.EventArgs) Handles btnSave.Click
                              'Save changes
                              'Then call Hide() to close the popup
                              Me.mpeEditEmployee.Hide()
                          End Sub
                      

Select all Open in new window