如何在.NET中创建弹出窗口?

如何在.NET中创建弹出窗口?

在.NET中创建弹出窗口方法

我看到很多的.NET开发者经常会使用到弹出窗口,关于如何在.NET创建弹出窗口,在一些论坛里通常会是一个容易引起热烈讨论的问题,但是解决方法也不过如此:在HTML(.aspx)页里嵌入客户端脚本来实现,但是这样很多人会问:应该如何在使用了Code Behind技术的后置代码文件而不是HTML(.aspx)文件里创建弹出窗口呢?
现在,还是有些开发者犹豫于是否要使用JavaScript嵌入asp.net页中来实现,但是我强烈建议不要把任何诸如JavaScript等脚本,如<%=%>等这些标记嵌入到asp.net页中来,很明显的,这些都是我们应该避免的问题,因为我们都知道在.NET中,大多数情况下,我们都是在Code Behind的后置代码文件里完成所有的事件逻辑的。
当然了,大多数的.NET开发人员都喜欢在Code Behind的后置代码文件创建页面的事件逻辑代码的。
在这篇文章中,我们将建立一个重载函数,以方便我们在需要的地方创建弹出窗口,在本文的后面,我们也将会示范如何创建包含一个日历控件的弹出窗口(译注:由于本文主要讲如何创建弹出窗口,关于如何创建包含一个日历控件的页面可以参考John Kilgo的文章:Create a Popup Calendar for ASP.NET Web Forms)。
现在就让我们来看看如何实现吧
如果能实现在需要创建弹出窗口的时候象如下的方式调用一个函数来实现,那将是一件很好的事情:
OpenPopUp(ControlToClick, PageToOpen)
其中的参数ControlToClick可以是任何asp.net web控件的ID,参数PageToOpen是你要在弹出窗口中的使用的页面,
如下就是实现这个功能的函数代码:
Public Shared Sub OpenPopUp(ByVal opener As System.Web.UI.WebControls.WebControl, ByVal PagePath As String)
Dim clientScript As String

'Building the client script- window.open
clientScript = "window.open('" & PagePath & "')"
'register the script to the clientside click event of the opener control
opener.Attributes.Add("onClick", clientScript)
End Sub

但是不要认为你调用了这个方法就可以打开弹出窗口,相应地,我们需要配置一个作为客户端调用该函数的的启动控件,这个启动控件可以是任何支持浏览器端单击事件的asp.net web控件。
请看如下的代码:
OpenPopup(Button1,"http://www.google.com")
这段代码配置button1为启动控件,即当我们单击button1的时将弹出连接到goole.com的窗口。
为了使这个函数有更大的通用性,我们使用重载的方法创建一个同名而参数不同的函数,使用这个函数你将可以设置弹出窗口的名称,宽度和高度(单位是象素),而且窗口还将会出现在显示器的中央:
Public Shared Sub OpenPopUp(ByVal opener As System.Web.UI.WebControls.WebControl, ByVal PagePath As String, ByVal windowName As String, ByVal width As Integer, ByVal height As Integer)
Dim clientScript As String
Dim windowAttribs As String

'Building Client side window attributes with width and height.
'Also the the window will be positioned to the middle of the screen
windowAttribs = "width=" & width & "px," & _
"height=" & height & "px," & _
"left='+((screen.width -" & width & ") / 2)+'," & _
"top='+ (screen.height - " & height & ") / 2+'"

'Building the client script - window.open, with additional parameters
clientScript = "window.open('" & PagePath & "','" & windowName & "','" & windowAttribs & "');return false;"
'register the script to the clientside click event of 'opener' control
opener.Attributes.Add("onClick", clientScript)
End Sub

以前面的函数相比,在这里我们没有创造什么新的东西
其中opener.attribute.add("onclick",clientScript)在两个函数里意思都是一样的:在客户端注册一个脚本以创建一个开启按钮的单击相应事件。
现在你可以继续使用Code Behind技术所带来的快速开发应用程序的好处,你任何的改动,在Visual Studio中,都可以很方便的进行调试和运行程序,又避免了在HTML(.aspx)页中嵌入JavaScript脚本所带来的代码散乱。
在结束本文之前,让我们看看一个普遍的设想-打开一个时间选择器,在其中选择的时间将自动填入textbox控件,
通常在强类型的应用程序中,我们通常会把时间收集器放在单独的页面中,我们将使用John Kilgo's 的时间收集器做为示范,在示范里包含一个textbox控件和一个相关的image button,当你单击image button的时候,将弹出一个包含日历控件(calendar)的子窗口,然后在该弹出窗口选择的时间将自动填入
textbox控件,
下面是显示该功能的函数声明,需要注意的是,其中的参数opener是你要单击的控件ID,参数dateControl则是你要显示的包含时间选取功能控件ID
Public Shared Sub ShowCalendar(ByVal opener As System.Web.UI.WebControls.WebControl, ByVal dateControl As System.Web.UI.WebControls.WebControl)
'Call the helper function to set the calender
OpenPopUp(opener, "CalendarPopup.aspx?textbox=" & dateControl.ClientID, "calendar", 300, 225)
End Sub

然后你可以用下面的方式调用:
ShowCalendar(ImageButton1,TextBox1)
当然了,你可以使用任何可以点击的控件作为启动控件,任何支持客户端".Value"属性的控件作为时间控件,而"ShowCalendar"仅仅调用了我们先前写的函数-OpenPopup,在该函数中一个比较重要的参数是
dateControl.ClientID
这个参数将返回完全可访问的控件的客户端ID(client ID),所以哪怕该控件是在相嵌了几层的用户控件里,我们也不会有任何麻烦。
你还可以把该函数声明成共享类,以方便快速调用,同时也可以提高了重用度,这就是我为什么把它声明成"Public Shared"的原因了
说明:
你可以通过以下的链接查看该实例的演示效果:
http://www.dotnetjohn.com/runtime/ShowPopups.aspx
你可以通过以下的链接下载该实例的完整代码:
http://www.dotnetjohn.com/DownLoads.aspx?dlid=88