gridview控件的使用_在GridView或其他数据控件中使用AJAX ModalPopupExtender

gridview控件的使用

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".

AJAX ModalPopupExtender具有必需的属性“ TargetControlID”，这对于新用户而言似乎非常混乱。 这意味着将由ModalPopup扩展的服务器控件，例如，如果在单击按钮时显示ModalPopup，则该按钮控件就是由ModalPopup扩展的控件，因此您可以将按钮控件的ID分配给“ 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.

ModalPopupExtender的另一个属性称为“ PopupControlID”，它指向将要显示或弹出的实际控件。 通常，它指向其中放置所有内容的ASP：Panel控件。 例如，如果您想使用ModalPopup显示客户的详细信息，则可以将客户的详细信息放在Panel控件中，然后将Panel控件的ID分配给ModalPopuupExtender的PopupControlID。 您无法通过设计器视图访问PopupControlID属性，并且必须切换到Visual Studio中的“源”视图，然后在ModalPopupExtender的标记中手动分配值。

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?

了解了以上两个属性后，配置ModalPopupExtender通常非常简单，直到使用GridView，DataList或其他类似的数据控件为止。 例如，您有一个GirdView，每行都有一个Edit（或View）按钮，单击该按钮时，将显示AJAX ModalPopup以及所选行的更多信息。 在这种情况下，您将如何配置ModalPopup？

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:

在您尝试分配TargetControlID属性之前，这听起来非常简单。 为什么？ 让我解释。 “编辑”或“视图”按钮通常位于CommandField或TemplateField中，并且不能直接在“源”视图中访问，这意味着您无法将“编辑/视图”控件ID分配给TargetControlID，后者是必填字段。 如何使用GridView的RowCreate事件处理程序为每行中的按钮控件ID动态分配TargetControlID？ 不幸的是，您不能这样做，因为只能将一个控件ID分配给TargetControlID。 那我们该怎么办呢？ 这是窍门：

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

1.添加一个服务器控件（我更喜欢使用Label控件）并以CSS样式将其隐藏（而不是通过设置Visible = False）：

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

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

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().

如果使用上述技巧，如何触发ModalPopup？ 答案是我们可以使用ModalPopupExtenderID.Show（ ）函数在代码后面显示ModalPopup并使用ModalPopupExtenderID.Hide（ ）以隐藏ModalPopup。 例如，如果GridView中的“编辑”按钮位于具有CommandName =“ cmdEdit”的TemplateField中，则可以使用GridView的RowCommand事件处理程序来首先填充弹出面板的内容，然后调用ModalPopupExtenderID.Show（ ）以显示带有上述代码段的弹出窗口，它将是mpeEditEmployee.Show（）。 根据弹出面板的设计，您将需要使用适当的事件处理程序来关闭弹出窗口。 例如，弹出面板中有一个“保存”按钮和“取消”按钮，然后您可以使用这两个按钮的click事件处理程序来关闭弹出窗口：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..

注意1：如果要使用UpdatePanel（我更喜欢），则需要记住，ModalPopupExtender和TargetControlID指向的控件都必须位于同一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.

注意2。如果对“编辑”按钮使用TemplateField，则实现ModalPopupExtender控件的另一种方法是在与按钮控件相同的ItemTemplate字段中添加ModalPopupExtender控件，以便可以将按钮的ID分配给TargetControlID。 ASP.NET的AJAX教程中介绍了这种方法： http : //www.asp.net/learn/ajax-control-toolkit/tutorial-28-vb.aspx 。 我不喜欢这种方法，原因很简单：此方法可呈现更多HTML代码。

    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

    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

翻译自: https://www.experts-exchange.com/articles/531/Use-AJAX-ModalPopupExtender-in-GridView-or-other-data-controls.html

gridview控件的使用