mfc 扩展控件
This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/call the modal popup from a hyper link control within the gridview control and finally some important javascript methods of the ASP.NET AJAX ModalPopupExtender control. So first let's see how to use the ModalPopupExtender control.
本文讨论了ASP.NET AJAX ModalPopupExtender控件。 在本文中，我们将展示如何使用ModalPopupExtender控件，如何从javascript显示/显示/调用ASP.NET AJAX ModalPopupExtender控件，如何从gridview控件中的超链接控件显示/显示/调用模式弹出窗口以及最后是ASP.NET AJAX ModalPopupExtender控件的一些重要javascript方法。 因此，首先让我们看看如何使用ModalPopupExtender控件。
How to use the ASP.NET AJAX ModalPopupExtender control?如何使用ASP.NET AJAX ModalPopupExtender控件？ Drag and drop a ASP.NET button/LinkButton/ImageBut
拖放一个ASP.NET按钮/ LinkButton / ImageBut 吨或aspx页面的任何控件。 要添加ModalPopupExtender控件，请从工具箱中拖放该控件或选择该控件（按钮/ LinkButton / ImageBu tton或任何其他控件），然后点击带有大于符号的按钮，如下所示。
image-thumb11.png image-thumb11.pngWhen you click the arrow you will get a menu with an “Add Extender” option as shown below.
当您单击箭头时，您将获得一个带有“添加扩展器”选项的菜单，如下所示。
image-thumb10.png image-thumb10.pngClick the “Add Extender” menu option and select “ModalPopupExtender” from “Extender Wizard” popup. Once you have added the ModalPopupExtender control you need an ASP.NET panel control. This is because the ModalPopupExtender control will show the content of the Panel control as a popup. Add ASP.NET Panel control and the content which you want to display as popup into the ASP.NET Panel control. Sample code with all the above requirement is pasted below. Don’t forget to drag and drop the ScriptManager control to the page.
单击“添加扩展器”菜单选项，然后从“扩展器向导”弹出窗口中选择“ ModalPopupExtender”。 添加ModalPopupExtender控件后，需要一个ASP.NET面板控件。 这是因为ModalPopupExtender控件会将面板控件的内容显示为弹出窗口。 将ASP.NET Panel控件和要显示为弹出窗口的内容添加到ASP.NET Panel控件中。 具有以上所有要求的示例代码粘贴在下面。 不要忘记将ScriptManager控件拖放到页面上。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopup.aspx.cs" Inherits="ModalPopup" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Modal Popup Demo</title>
<style>
.backgroundColor
{
background-color:Gray;
filter:alpha(opacity=25);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="popupBtn" runat="server" Text="Click to see the modal popup." />
<asp:Panel ID="Panel1" runat="server" Style="display: none; padding:10px; border:1px; border-style:solid;" BackColor="#FF9933" Width="400px">
<h3 style="text-align: center;" id="header">Modal Popup</h3>
<p>This is a Modal Popup extender control. You are seeing this because you have clicked the hyperlink button.</p>
<p style="text-align: center;"><asp:Button ID="closeBtn" runat="server" Text="Close" /></p>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="popupBtn"
PopupControlID="Panel1"
OkControlID="closeBtn"
BackgroundCssClass="backgroundColor"
DropShadow="true"
PopupDragHandleControlID="header"/>
</div>
</form>
</body>
</html>
Now let's see how to configure the ModalPopupExtender control. The configuration is pretty simple; you need to set some properties and and you will have your Modal popup. The properties are as follows
现在让我们看看如何配置ModalPopupExtender控件。 配置非常简单。 您需要设置一些属性，然后将出现“模态”弹出窗口。 属性如下
TargetControlID: This property specifies which control should be used as the source for showing the popup control i.e. on click of which control the popup should be displayed. In our e.g. we have given the TargetControlID as our button control. You can assign the ID of any ASP.NET controls like LinkButton, ImageButton, HyperLink, DropDownList, CheckBox, RadioButton etc. Even you can give a label’ id as the TargetControlID.
TargetControlID：此属性指定应将哪个控件用作显示弹出控件的源，即，在单击哪个控件时应显示弹出控件。 在我们的示例中，我们已将TargetControlID作为按钮控件。 您可以分配任何ASP.NET控件的ID，例如LinkButton，ImageButton，HyperLink，DropDownList，CheckBox，RadioButton等。即使您可以给标签提供ID作为TargetControlID。
PopupControlID: The ID of the control to be displayed as a modal popup. In our example we have given ASP.NET panel control’ ID as the "PopupControlID". You can give any ASP.NET control’ ID. For example, if you give the ID of a textbox then the textbox alone will be popped up. It is not compulsory that you should provide an ASP.NET panel control.
PopupControlID：要显示为模式弹出窗口的控件的ID。 在我们的示例中，我们将ASP.NET面板控件的ID称为“ PopupControlID”。 您可以提供任何ASP.NET控件的ID。 例如，如果您提供文本框的ID，则仅文本框将被弹出。 您不必提供ASP.NET面板控件。
OkControlID: The ID of the control which should act as an Ok button. Clicking of this control will dismiss the popup.
OkControlID：应该用作“确定”按钮的控件的ID。 单击此控件将关闭弹出窗口。
BackgroundCssClass: The name of the CSS class that needs to be applied to the background of the popup. One thing to note here is that if you don’t provide a CSS class then the modal popup will not function like a modal dialog; i.e. one will be able to interact with the controls in the back of the popup control, so it's imperative to provide a valid CSS class name value to the BackgroundCssClass property. In the above example we have defined a CSS class called “backgroundColor” in the header section of the aspx page. Please note in the CSS class definition we have applied “filter” property to make the background transparent.
BackgroundCssClass：需要应用于弹出窗口背景CSS类的名称。 这里要注意的一件事是，如果您不提供CSS类，那么模式弹出窗口将不会像模式对话框那样起作用。 也就是说，将能够与弹出控件后面的控件进行交互，因此必须为BackgroundCssClass属性提供有效CSS类名称值。 在上面的示例中，我们在aspx页面的标题部分定义了一个名为“ backgroundColor”CSS类。 请注意，在CSS类定义中，我们已应用“ filter”属性使背景透明。
DropShadow: Accepts a boolean value which specifies whether the popup should have shadow. True will give a shadow and false will disable the shadow.
DropShadow：接受一个布尔值，该布尔值指定弹出窗口是否应具有阴影。 真将提供阴影，而假将禁用阴影。
PopupDragHandleControlID: The ID of the control clicking on which the ModalPopupExtender can be dragged. The control should be enclosed in the control specified using PopupControlID; i.e. in our case inside the ASP.NET panel control. If a particular control ID is set as the PopupDragHandlerControlID then one can click on that control and drag the ModalPopupExtender control. In the above example we have set the ID of the “h3” control as PopupDragHandleControlID. If anyone wants to drag the popup control then he needs to click "h3" and drag the popup control.
PopupDragHandleControlID：可以拖动ModalPopupExtender的控件的ID。 该控件应包含在使用PopupControlID指定的控件中； 即在我们的例子中在ASP.NET面板控件中。 如果将特定的控件ID设置为PopupDragHandlerControlID，则可以单击该控件并拖动ModalPopupExtender控件。 在上面的示例中，我们将“ h3”控件的ID设置为PopupDragHandleControlID。 如果有人要拖动弹出控件，则需要单击“ h3”并拖动弹出控件。
CancelControlID: If you want a button to behave as a Cancel button provide the ID of the button. This button will cancel the popup.
CancelControlID：如果您希望按钮表现为“取消”按钮，请提供该按钮的ID。 此按钮将取消弹出窗口。
Drag: This property takes a boolean value that, when set, determines whether the popup control can have the drag feature. A value of true means the popup extender control can be dragged around the screen whereas false will disable the drag.
拖动：此属性采用一个布尔值，该布尔值在设置后确定弹出控件是否可以具有拖动功能。 值为true表示可以在屏幕周围拖动弹出扩展器控件，而值为false则禁用拖动。
RepositionMode: This property accepts four values. They are “None”, “RepositionOnWindowResize”
RepositionMode：此属性接受四个值。 它们是“ None”，“ RepositionOnWindowResize” ，“ RepositionOnWindowResizeA ndScroll”和“ RepositionOnWindowScroll” 。 默认值为“ RepositionOnWindowResizeA ndScroll”。 每个值的说明如下。
RepositionOnWindowResize: Will reposition the popup when the window is resized.
RepositionOnWindowResize：调整窗口大小时将重新定位弹出窗口。
RepositionOnWindowScroll: Will reposition the popup when the scroll bar is moved.
RepositionOnWindowScroll：移动滚动条时将重新定位弹出窗口。
RepositionOnWindowResizeAn
RepositionOnWindowResizeAn dScroll：调整大小或移动滚动条时将重新定位弹出窗口。 它是“ RepositionOnWindowResize”的组合 和“ RepositionOnWindowScroll” 。
None: The popup will not be tinkered with. It will be shown in its original position irrespective of window resizing or scroll bar being moved.
无：不会修改弹出窗口。 无论窗口大小调整或滚动条被移动，它都将以其原始位置显示。
DynamicServicePath: Link to a webservice/aspx page from where data or content needs to be retrieved and displayed in the popup extender control.
DynamicServicePath：链接到Webservice / aspx页面，需要在其中检索数据或内容并在弹出扩展程序控件中显示。
DynamicServiceMethod: The method name from which content needs to be retrieved. The method can be a webservice method or a method in your code behind file of your aspx file. If you leave the “DynamicServicePath” empty and provide DynamicServiceMethod name then the system will try to ping the same page’ and try to find a method. We will see an e.g. with web service shortly.
DynamicServiceMethod：需要从中检索内容的方法名称。 该方法可以是Web服务方法，也可以是代码中aspx文件后面的代码中的方法。 如果将“ DynamicServicePath”保留为空并提供DynamicServiceMethod名称，则系统将尝试ping相同页面并尝试找到方法。 我们很快会看到一个带有Web服务的eg。
DynamicContextKey: The string value which will be passed as the parameter to the method specified in DynamicServiceMethod. One thing to note here is that the parameter should be named contextKey in the webservice/code behind.
DynamicContextKey：字符串值，将作为参数传递给DynamicServiceMethod中指定的方法。 这里要注意的一件事是，该参数应在后面的webservice /代码中命名为contextKey。
X: The X coordinates for the popup control.
X：弹出控件的X坐标。
Y: The Y coordinates for the popup control.
Y：弹出控件的Y坐标。
Showing the content of a webservice (asmx) method in a ModalPopupExtender control.
在ModalPopupExtender控件中显示Web服务（asmx）方法的内容。
Showing the output of a web method of a web service in a ModalPopupExtender control is also pretty simple. First you need to have a web service, if you don’t have one it's very easy to create one in Visual Studio. Create a web service and add a method the output of which you want to display in a ModalPopupExtender conrol. Below I have pasted the code of my webservice.
在ModalPopupExtender控件中显示Web服务的Web方法的输出也非常简单。 首先，您需要一个Web服务，如果您没有Web服务，则在Visual Studio中创建一个Web服务非常容易。 创建一个Web服务，并添加要在ModalPopupExtender控制中显示其输出的方法。 下面，我粘贴了我的Web服务的代码。
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
[WebService(Namespace = "http://tempuri.org/")]
/*The below attribute is needed so that the webservice can process calls from ASP.NET AJAX controls. Without the below attribute one may get the following error. "Web Service call failed: 500"*/
[System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService
{
public Service ()
{
}
/*Method which will be called by the ModalPopupExtender control.*/
[WebMethod]
public string HelloWorld()
{
return "<b>Hello World</b><br/>";
}
}
One thing to note while writing a web service whose methods can be called by the ASP.NET Ajax controls is that you need to add the “[System.Web.Script.Servic
编写可通过ASP.NET Ajax控件调用其方法的Web服务时要注意的一件事是，您需要添加“ [System.Web.Script.Servic 脚本 ervice]”属性。 如果未添加上述属性，则可能会出现以下Web服务错误：
Web Service call failed: 500The mark up for the ModalPopupExtender control to display the webservice’ web method output is pasted below.
Web服务呼叫失败：500下面粘贴了用于显示Web服务的Web方法输出的ModalPopupExtender控件的标记。
<!--Web service content display demo-->
<asp:Panel ID="webServicePanel" runat="server" Width="300px" Height="300" BackColor="Azure">
<asp:Label ID="webServiceContentLbl" runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn" runat="server" Text="Button" />
</asp:Panel>
<asp:Button ID="webServiceCall" runat="server" Text="Click to see the output of a webservice in a popup." />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="webServiceCall" OkControlID="clsBtn" DynamicServicePath="Service.asmx" DynamicServiceMethod="HelloWorld" DynamicControlID="webServiceContentLbl"
BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel" DropShadow="true">
</cc1:ModalPopupExtender>
The ModalPopupExtender is capable of displaying the output from normal aspx pages as well. To display some content it is not compulsory that you need to create a webservice. One can directly show the output of a method in a code behind file in a ModalPopupExtender. Let's see how to do that.
ModalPopupExtender也能够显示普通aspx页面的输出。 要显示某些内容，您不必创建Web服务。 可以在ModalPopupExtender中的文件后面代码中直接显示方法的输出。 让我们看看如何做到这一点。
Displaying the content of a webpage (aspx) method in a ModalPopupExtender control.在ModalPopupExtender控件中显示网页（aspx）方法的内容。Below is the code behind file content of the ASPX page. The code is pretty straightforward. It has a static method called HelloWorld that returns the same text as that of the webservice.
下面是ASPX页面文件内容背后的代码。 该代码非常简单。 它有一个称为HelloWorld的静态方法，该方法返回与Web服务相同的文本。
public partial class ModalPopup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// Page method which will be called by the modal popup extender control.
/// </summary>
/// <returns></returns>
[System.Web.Services.WebMethod(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string HelloWorld()
{
return "<b>Hello World</b><br/>";
}
}
[System.Web.Services.WebMethod(), System.Web.Script.Services.ScriptMethodAttribute()]
2. Web Service call failed: 500
2. Web服务调用失败：500
Below is the mark up needed to display the content from a method in an aspx page.
以下是在aspx页面中显示方法内容所需的标记。
<!--Web service content display demo-->
<asp:Panel ID="webServicePanel" runat="server" Width="300px" Height="300" BackColor="Azure">
<asp:Label ID="outputContentLbl" runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn" runat="server" Text="Button" />
</asp:Panel>
<asp:Button ID="webServiceCall" runat="server" Text="Click to see the output of a webservice in a popup." />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DynamicServicePath="ModalPopup.aspx"
TargetControlID="webServiceCall" OkControlID="clsBtn" DynamicServiceMethod="HelloWorld" DynamicControlID="outputContentLbl" BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel" DropShadow="true">
</cc1:ModalPopupExtender>
The above examples are quite straightforward and easy to implement. Unfortunately a developer’s life is not a bed of roses. There may arise a requirement where one has to call/show/hide the popup control using javascript. So let's see how to do exactly this. Below is the HTML markup.
上面的例子非常简单，易于实现。 不幸的是，开发人员的生活并非一帆风顺。 可能会出现一种要求，即必须使用JavaScript调用/显示/隐藏弹出控件。 因此，让我们看看如何做到这一点。 以下是HTML标记。
<asp:Button ID="popupScriptBtn" runat="server" Text="Click to view the modal popup using javascript" OnClientClick=”javascript:showModalPopup();return false;” />
<asp:Button ID="popupBtn" runat="server" Text="Click to see the modal popup." />
<div ID="div1" runat="server" >
<asp:Panel ID="Panel1" runat="server" Style="display: none; padding:10px; border:1px; border-style:solid;" BackColor="#FF9933" Width="400px">
<table id="Table1" style="background-color: #C0C0C0; width: 400px; height: 5px;"><tr><td><h3 style="text-align: center;" id="header">Modal Popup</h3></td></tr></table>
<p>This is a Modal Popup extender control. You are seeing this because you have clicked the hyperlink button.</p>
<p style="text-align: center;"><asp:Button ID="closeBtn" runat="server" Text="Close" /></p>
</asp:Panel>
</div>
<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="popupBtn"
PopupControlID="Panel1" OkControlID="closeBtn"
BackgroundCssClass="backgroundColor"
DropShadow="true" PopupDragHandleControlID="header"
CancelControlID="" Drag="true" RepositionMode="None" />
<script type="text/javascript" language="javascript">
//Javascript function to hide the popup control.
function closeModalPopup()
{
//Using the $find javascript method to retrieve the modal popup control.
var modalPopup = $find('<%=ModalPopupExtender.ClientID %>');
if (modalPopup != null)
{
modalPopup.hide();
}
}
//Javascript function to show the ModalPopupExtender control.
function showModalPopup()
{
//Using the $find javascript method to retrieve the modal popup control.
var modalPopup = $find('<%=ModalPopupExtender.ClientID %>');
if (modalPopup != null)
{
modalPopup.show();
}
}
</script>
Note: <%=ModalPopupExtendender.C
注意： <％= ModalPopupExtendender.C 仅当您将javascript代码放在aspx页面内时，lientID％>才有效。 如果将相同的代码放在外部JS文件中，则会引发错误。
In the above javascript we have two functions. One to show the ModalPopupExtender control and another to hide the control. In both the functions we are using $find shortcut method to retrieve the popup control. To know more about $find method please see this link. Once we have retrieved the modal popup control we are calling the show and hide methods of the control to show and hide the control respectively.
在上面的javascript中，我们有两个功能。 一个显示ModalPopupExtender控件，另一个隐藏该控件。 在这两个函数中，我们都使用$ find快捷方式方法来检索弹出控件。 要了解有关$ find方法的更多信息，请参见此链接 。 检索到模式弹出控件后，我们将调用控件的show和hide方法分别显示和隐藏控件。
Using the modal popup control within a GridView control在GridView控件中使用模式弹出控件There is nothing different here. In a grid if you want to link the ModalPopupExtender to a control inside the GridView you need to just convert the column into a template column and add the ModalPopupExtender control to the column, and configure the necessary properties as discussed. Below is a sample code where I have added the ModalPopupExtender control in the header section as well in a column of GridView control.
这里没有什么不同。 在网格中，如果要将ModalPopupExtender链接到GridView内的控件，则只需将列转换为模板列，然后将ModalPopupExtender控件添加到该列，然后配置所需的属性即可。 下面是示例代码，在其中我在标头部分以及GridView控件的列中添加了ModalPopupExtender控件。
<asp:GridView ID="backIssueGrid" runat="server" AutoGenerateColumns="False"
DataMember="issue" DataSourceID="backIssuesXML">
<RowStyle BorderColor="Tan" BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:TemplateField HeaderText="Back Issues" HeaderStyle-CssClass="headerText">
<ItemTemplate>
<asp:HyperLink ID="title" runat="server"
Text='<%# XPath("@title") %>' CssClass="gridText" NavigateUrl='<%# XPath("url") %>'></asp:HyperLink>
<asp:Panel ID="webServicePanel" runat="server" Width="300px" Height="300" BackColor="Azure">
<asp:Label ID="outputContentLbl" runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn" runat="server" Text="Button" />
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DynamicServicePath="ModalPopup.aspx"
TargetControlID="title" OkControlID="clsBtn"
DynamicServiceMethod="HelloWorld"
DynamicControlID="outputContentLbl"
BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel"
DropShadow="true">
</cc1:ModalPopupExtender>
</ItemTemplate>
<HeaderStyle CssClass="headerText"></HeaderStyle>
<ItemStyle BorderColor="Tan" BorderStyle="Solid" BorderWidth="1px" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-CssClass="headerText">
<ItemTemplate>
<asp:TextBox ID="quantityTxt" Width="30" runat="server" Text='<%#XPath("@noOfCopies") %>' CssClass="gridText"></asp:TextBox>
</ItemTemplate>
<ItemStyle BorderColor="Tan" HorizontalAlign="Center" BorderStyle="Solid" BorderWidth="1px" />
<HeaderStyle CssClass="headerText"></HeaderStyle>
<HeaderTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="some.gif" />
<asp:Panel ID="webServicePanel2" runat="server" Width="300px" Height="300" BackColor="Azure">
<asp:Label ID="outputContentLbl1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn" runat="server" Text="Button" />
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" DynamicServicePath="ModalPopup.aspx"
TargetControlID="ImageButton1" OkControlID="clsBtn"
DynamicServiceMethod="HelloWorld"
DynamicControlID="outputContentLbl1"
BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel2"
DropShadow="true">
</cc1:ModalPopupExtender>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label4" CssClass="gridText" runat="server" Text='<%# Add(XPath("@noOfCopies"), XPath("@price"))%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowSelectButton="True" ButtonType="Button"
SelectText="Remove" ControlStyle-CssClass="buttonText" >
<ControlStyle CssClass="buttonText"></ControlStyle>
<ItemStyle BorderColor="Tan" BorderStyle="Solid" BorderWidth="1px" />
</asp:CommandField>
</Columns>
<EditRowStyle BorderStyle="Solid" />
</asp:GridView>
In my case I had to show help text whenever the user clicks the header text so instead of adding ModalPopupExtender control to each and every HeaderTemplate what I did was add the ModalPopupExtender control somewhere in the aspx page and hooked it to a hidden control and on click of the header, used javascript to display the popup control. The reason why I took this approach is that if I put the ModalPoupExtender in each column’s header template, it will generate as many popup extenders as the number of columns. My popup control needs to display help text and these help texts were retrieved from a method in the code behind/webservice. So I used a javascript function and passed parameters necessary to retrieve the help text. Also people who have similar kind of requirement (where for example you have a column and you need to show some help text or some detailed information based on some parameters) you can also follow the same approach. The approach will reduce the amount of html being generated. With this approach I wanted to highlight the subtle feature of ModalPopupExtender control where one can hook up the control to a hidden control and use javascript to show the control. This method can be very useful for controls to which ModalPopupExtender cannot be attached. Now, let's see the code in action.
在我的情况下，每当用户单击标题文本时，我都必须显示帮助文本，而不是将ModalPopupExtender控件添加到每个HeaderTemplate中，而是在aspx页面中的某个位置添加ModalPopupExtender控件，然后将其挂钩到隐藏的控件上，然后单击标头的，使用javascript显示弹出控件。 之所以采用这种方法，是因为如果将ModalPoupExtender放在每列的标题模板中，它将生成与列数一样多的弹出式扩展程序。 我的弹出控件需要显示帮助文本，这些帮助文本是从/ webservice后面的代码中的方法中检索的。 因此，我使用了javascript函数并传递了检索帮助文本所必需的参数。 也有类似要求的人（例如，您有一列，并且需要根据一些参数显示一些帮助文本或一些详细信息），您也可以采用相同的方法。 该方法将减少生成的html数量。 通过这种方法，我想强调ModalPopupExtender控件的微妙功能，可以将控件连接到隐藏的控件并使用javascript显示该控件。 此方法对于无法附加ModalPopupExtender的控件非常有用。 现在，让我们看看实际的代码。
<asp:GridView ID="backIssueGrid" runat="server"
AutoGenerateColumns="False" DataMember="issue"
DataSourceID="backIssuesXML">
<RowStyle BorderColor="Tan"
BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:TemplateField
HeaderStyle-CssClass="headerText">
<HeaderTemplate>
<asp:HyperLink ID="title"
runat="server" Text="Name" CssClass="gridText"
NavigateUrl='javascript:showModalPopup("helpOne"
);'></asp:HyperLink>
</HeaderTemplate>
<ItemTemplate>
<asp:HyperLink ID="title"
runat="server" Text='<%# XPath("@title") %>'
CssClass="gridText" NavigateUrl='<%#
XPath("url") %>'></asp:HyperLink> </ItemTemplate>
<HeaderStyle
CssClass="headerText"></HeaderStyle>
<ItemStyle BorderColor="Tan"
BorderStyle="Solid" BorderWidth="1px" /> </asp:TemplateField>
<asp:TemplateField
HeaderStyle-CssClass="headerText"> <ItemTemplate>
<asp:TextBox
ID="quantityTxt" Width="30" runat="server"
Text='<%#XPath("@noOfCopies") %>'
CssClass="gridText"></asp:TextBox>
</ItemTemplate>
<ItemStyle BorderColor="Tan"
HorizontalAlign="Center" BorderStyle="Solid"
BorderWidth="1px" />
<HeaderStyle
CssClass="headerText"></HeaderStyle>
<HeaderTemplate>
<asp:HyperLink ID="title"
runat="server" Text="Address" CssClass="gridText" NavigateUrl='javascript:showModalPopup("helpTwo"
);'></asp:HyperLink> </HeaderTemplate>
</asp:TemplateField>
<asp:CommandField
ShowSelectButton="True" ButtonType="Button"
SelectText="Remove" ControlStyle-CssClass="buttonText" >
<ControlStyle
CssClass="buttonText"></ControlStyle>
<ItemStyle BorderColor="Tan"
BorderStyle="Solid" BorderWidth="1px" />
</asp:CommandField>
</Columns>
</asp:GridView>
<asp:XmlDataSource ID="backIssuesXML"
runat="server"
DataFile="~/Data/BackIssue.xml"></asp:XmlDataSou
rce>
<asp:HyperLink ID="title" runat="server"
Style="display:none;"> </asp:HyperLink>
<asp:Panel ID="webServicePanel"
runat="server" Width="300px" Height="300"
BackColor="Azure">
<asp:Label ID="outputContentLbl"
runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn"
runat="server" Text="Button" />
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender1"
runat="server" DynamicServicePath="ModalPopup.aspx"
TargetControlID="title" OkControlID="clsBtn"
DynamicServiceMethod="HelloWorld"
DynamicControlID="outputContentLbl"
BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel" DropShadow="true">
</cc1:ModalPopupExtender>
//Javascript function to show the ModalPopupExtender control.
function showModalPopup(helpId)
{
var modalPopup = $find('<%=ModalPopupExtender1.ClientID %>');
if (modalPopup != null)
{
modalPopup._DynamicContextKey = helpId;
modalPopup.show();
}
}
The code behind method that is called by the ModalPopupExtender control is pasted below.
下面粘贴了ModalPopupExtender控件调用的方法背后的代码。
[System.Web.Services.WebMethod(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string HelloWorld(string contextKey)
{
return "<b>Hello World</b><br/>" + contextKey;
}
_DynamicControlID: Using this property you can set/retrieve the ID for the dynamic control i.e. the control that will show the output of the method being pinged by the modal popup extender control.
_DynamicControlID：使用此属性，可以设置/获取动态控件的ID，即将显示由模式弹出扩展程序控件ping的方法的输出的控件。
_DynamicContextKey: Property to set/retrieve the string parameter for the function that will be called by the ModalPopupExtender control.
_DynamicContextKey：设置/获取将由ModalPopupExtender控件调用的函数的字符串参数的属性。
_DynamicServicePath: Property to set/retrieve the path for the webservice/webpage.
_DynamicServicePath：设置/检索Web服务/网页路径的属性。
_DynamicServiceMethod: Property to set/retrieve the method that needs to be invoked or pinged to retrieve the output.
_DynamicServiceMethod：设置/检索需要调用或ping以检索输出的方法的属性。
_PopupControlID: The property can be used to set/retrieve the ID of the control which will be shown as the popup. Normally it will be the ID of the ASP.NET panel control.
_PopupControlID：该属性可用于设置/获取将显示为弹出窗口的控件的ID。 通常，它将是ASP.NET面板控件的ID。
_PopupDragHandleControlID:
_PopupDragHandleControlID： 可以拖动弹出控件的控件的ID。
_BackgroundCssClass: CSS class name for the background of the popup can be set/retrieved using this javascript property.
_BackgroundCssClass：可以使用此javascript属性设置/检索弹出窗口背景CSS类名称。
_DropShadow: Boolean value which can be set/retrieved to enable drop shadow. A value of “true” means drop shadow is enabled, false means it is disabled.
_DropShadow：可以设置/检索以启用投影的布尔值。 值为“ true”表示启用阴影，为false表示禁用阴影。
_Drag: Property to set/retrieve the drag facility. If you want to enable set it as true.
_Drag：设置/获取拖动工具的属性。 如果要启用，请将其设置为true。
_OkControlID: This property can be used to set/retrieve the “Ok” button.
_OkControlID：此属性可用于设置/获取“确定”按钮。
_CancelControlID: Property to set/retrieve the “Cancel” button id.
_CancelControlID：设置/获取“取消”按钮ID的属性。
_OnOkScript: Property to set/retrieve the script that is to be fired when “Ok” button inside the popup is clicked.
_OnOkScript：设置/获取单击弹出窗口中的“确定”按钮时将要触发的脚本的属性。
_OnCancelScript: Property to set/retrieve the script that is to be fired when “Cancel” button inside the popup is clicked.
_OnCancelScript：设置/获取单击弹出窗口中的“取消”按钮时将要触发的脚本的属性。
_xCoordinate: Property to set/retrieve the X coordinates of the popup control.
_xCoordinate：设置/获取弹出控件的X坐标的属性。
_yCoordinate: Property to set/retrieve the Y coordinates of the popup control.
_yCoordinate：设置/获取弹出控件的Y坐标的属性。
_repositionMode: Property to set/retrieve the Reposition mode. Reposition mode has been discussed somewhere else in this document. The property accepts integer as its value. The various values and their corresponding reposition mode are as follows. 0 means “None”, 1 means “RepositionOnWindowResize”
_repositionMode：设置/获取“重定位”模式的属性。 重新定位模式已在本文档的其他地方进行了讨论。 该属性接受整数作为其值。 各种值及其对应的重定位模式如下。 0表示“无”，1表示“ RepositionOnWindowResize” ，2表示“ RepositionOnWindowScroll” 最后3个意思
“RepositionOnWindowResizeA
“ RepositionOnWindowResizeA ndScroll”。 上面讨论了每种模式。
_id: One can set/retrieve the ID of the ModalPopupExtender control.
_id：可以设置/获取ModalPopupExtender控件的ID。
My original article along with comments and discussion can be fond here.
我的原始文章以及评论和讨论都可以在这里找到 。
翻译自: https://www.experts-exchange.com/articles/3548/Working-with-Modal-Popup-extender-control.html
mfc 扩展控件
扫一扫
4290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
