Introduction
The article will help you in making a web
Background
I had a client who wanted his website to open in popups, and through coding the website, I found I could make a new control to do the job faster and easier.
Using the code
Imports System.ComponentModel
Imports System.Text
Imports System.Web.UI
Imports System.Web.UI.WebControls
<Assembly: System.Web.ui.WebResource("Ala.UI.Controls.PopupScript.js", _
"text/javascript")>
<ToolboxData("<{0}:PopupHyperlink runat="server"></{0}:PopupHyperlink>")> _
Public Class PopupHyperlink
Inherits HyperLink
Public Enum EnumPopupTarget
_blank
_media
_parent
_search
_self
_top
End Enum
Private _PopupTarget As EnumPopupTarget = EnumPopupTarget._blank
<Bindable(True), Category("Popup")> _
Public Property PopupTarget() As EnumPopupTarget
Get
Return _PopupTarget
End Get
Set(ByVal value As EnumPopupTarget)
_PopupTarget = value
End Set
End Property
Private _PopupWidth As String
<Bindable(True), Category("Popup")> _
Public Property PopupWidth() As String
Get
Return _PopupWidth
End Get
Set(ByVal value As String)
_PopupWidth = value
End Set
End Property
Private _PopupHeight As String
<Bindable(True)> _
Public Property PopupHeight() As String
Get
Return _PopupHeight
End Get
Set(ByVal value As String)
_PopupHeight = value
End Set
End Property
Private _PopupLocation As String
<Bindable(True), _
Category("Popup"), _
System.ComponentModel.EditorAttribute(GetType(System.Web.UI.Design.UrlEditor), _
GetType(System.Drawing.Design.UITypeEditor))> _
Public Property PopupLocation() As String
Get
Return _PopupLocation
End Get
Set(ByVal value As String)
_PopupLocation = value
End Set
End Property
Private _ShowMenuBar As Boolean
<Bindable(True), _
Category("Popup")> _
Public Property ShowMenuBar() As Boolean
Get
Return _ShowMenuBar
End Get
Set(ByVal value As Boolean)
_ShowMenuBar = value
End Set
End Property
Private _ShowLocationBar As Boolean
<Bindable(True), _
Category("Popup")> _
Public Property ShowLocationBar() As Boolean
Get
Return _ShowLocationBar
End Get
Set(ByVal value As Boolean)
_ShowLocationBar = value
End Set
End Property
Private _ShowScrollBars As Boolean
<Bindable(True), _
Category("Popup")> _
Public Property ShowScrollBars() As Boolean
Get
Return _ShowScrollBars
End Get
Set(ByVal value As Boolean)
_ShowScrollBars = value
End Set
End Property
Private _ShowStatusBar As Boolean
<Bindable(True), _
Category("Popup")> _
Public Property ShowStatusBar() As Boolean
Get
Return _ShowStatusBar
End Get
Set(ByVal value As Boolean)
_ShowStatusBar = value
End Set
End Property
Private _ShowTitleBar As Boolean
<Bindable(True), _
Category("Popup")> _
Public Property ShowTitleBar() As Boolean
Get
Return _ShowTitleBar
End Get
Set(ByVal value As Boolean)
_ShowTitleBar = value
End Set
End Property
Private _ShowToolBar As Boolean
<Bindable(True), _
Category("Popup")> _
Public Property ShowToolBar() As Boolean
Get
Return _ShowToolBar
End Get
Set(ByVal value As Boolean)
_ShowToolBar = value
End Set
End Property
Private _Resizable As Boolean
<Bindable(True), _
Category("Popup")> _
Public Property Resizable() As Boolean
Get
Return _Resizable
End Get
Set(ByVal value As Boolean)
_Resizable = value
End Set
End Property
Private _FullScreen As Boolean
<Bindable(True), _
Category("Popup")> _
Public Property FullScreen() As Boolean
Get
Return _FullScreen
End Get
Set(ByVal value As Boolean)
_FullScreen = value
End Set
End Property
Protected Overrides Sub AddAttributesToRender(ByVal writer As _
System.Web.UI.HtmlTextWriter)
If Not String.IsNullOrEmpty(PopupLocation) Then
Dim Location As String = Me.ResolveClientUrl(PopupLocation)
Dim Width As String = "''", Height As String = "''"
If Not String.IsNullOrEmpty(PopupHeight) Then
Height = PopupHeight
End If
If Not String.IsNullOrEmpty(PopupWidth) Then
Width = PopupWidth
End If
Dim Script As String = _
Popup(Location, _
PopupTarget, _
Width, _
Height, _
ShowMenuBar, _
ShowLocationBar, _
Resizable, _
ShowScrollBars, _
ShowStatusBar, _
ShowTitleBar, _
ShowToolBar, _
FullScreen)
writer.AddAttribute( _
HtmlTextWriterAttribute.Href, _
String.Format(Script, _
Me.Page.ClientScript.GetPostBackEventReference(Me, "")))
End If
MyBase.AddAttributesToRender(writer)
End Sub
Public Function Popup(ByVal Path As String, _
ByVal target As EnumPopupTarget, _
ByVal width As String, _
ByVal height As String, _
ByVal menubar As Boolean, _
ByVal locationbar As Boolean, _
ByVal resizable As Boolean, _
ByVal scrollbars As Boolean, _
ByVal status As Boolean, _
ByVal titlebar As Boolean, _
ByVal toolbar As Boolean, _
ByVal fullscreen As Boolean) As String
Dim strBuilder As New StringBuilder
strBuilder.Append("JavaScript:Showpopup(")
strBuilder.AppendFormat("'{0}'", Path)
strBuilder.AppendFormat(",'{0}'", _
System.Enum.GetName(GetType(EnumPopupTarget), target))
If String.IsNullOrEmpty(height) Then
strBuilder.Append(",''")
Else
strBuilder.AppendFormat(",{0}", height)
End If
If String.IsNullOrEmpty(width) Then
strBuilder.Append(",''")
Else
strBuilder.AppendFormat(",{0}", width)
End If
If menubar Then
strBuilder.Append(",1")
Else
strBuilder.Append(",0")
End If
If locationbar Then
strBuilder.Append(",1")
Else
strBuilder.Append(",0")
End If
If resizable Then
strBuilder.Append(",1")
Else
strBuilder.Append(",0")
End If
If scrollbars Then
strBuilder.Append(",1")
Else
strBuilder.Append(",0")
End If
If status Then
strBuilder.Append(",1")
Else
strBuilder.Append(",0")
End If
If titlebar Then
strBuilder.Append(",1")
Else
strBuilder.Append(",0")
End If
If toolbar Then
strBuilder.Append(",1")
Else
strBuilder.Append(",0")
End If
If fullscreen Then
strBuilder.Append(",1);")
Else
strBuilder.Append(",0);")
End If
Return strBuilder.ToString
End Function
Private Sub PopupHyperlink_Init(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Init
Dim scriptLocation As String = _
Page.ClientScript.GetWebResourceUrl(Me.GetType, _
"Ala.UI.Controls.PopupScript.js")
If Not Page.ClientScript.IsClientScriptIncludeRegistered("PopupControl") Then
Page.ClientScript.RegisterClientScriptInclude("PopupControl", scriptLocation)
End If
End Sub
End Class
I've extended the Hyperlink control to use the functionality within it, and embedded a JavaScript file which will be included when the control is rendered.
Let's take it piece by piece:
For those who haven't seen this attribute, its an assembly-level metadata attribute that allows server control developers to mark embedded resources as URL-accessible. Read more here.
<Assembly: System.Web.ui.WebResource("Ala.UI.Controls.PopupScript.js", "text/javascript")>
This is how we include the script at run time:
Dim scriptLocation As String = _
Page.ClientScript.GetWebResourceUrl(Me.GetType, "Ala.UI.Controls.PopupScript.js")
If Not Page.ClientScript.IsClientScriptIncludeRegistered("PopupControl") Then
Page.ClientScript.RegisterClientScriptInclude("PopupControl", scriptLocation)
End If
and here is the script file:
function Showpopup(PagePath,target, height, width, menubar, locationbar, resizable,
scrollbars, status, titlebar, toolbar, fullscreen) {
var currentIndex = 0;
var ProbsArray = new Array();
if (height != "")
{ ProbsArray[currentIndex] = "height=" + height; currentIndex++; }
if (width != "")
{ ProbsArray[currentIndex] = "width=" + width; currentIndex++; }
if (menubar != "")
{ ProbsArray[currentIndex] = "menubar=" + menubar; currentIndex++; }
if (locationbar != "")
{ ProbsArray[currentIndex] = "location=" + locationbar; currentIndex++; }
if (resizable != "")
{ ProbsArray[currentIndex] = "resizable=" + resizable; currentIndex++; }
if (scrollbars != "")
{ ProbsArray[currentIndex] = "scrollbars=" + scrollbars; currentIndex++; }
if (status != "")
{ ProbsArray[currentIndex] = "status=" + status; currentIndex++; }
if (titlebar != "")
{ ProbsArray[currentIndex] = "titlebar=" + titlebar; currentIndex++; }
if (toolbar != "")
{ ProbsArray[currentIndex] = "toolbar=" + toolbar; currentIndex++; }
if (fullscreen != "")
{ ProbsArray[currentIndex] = "fullscreen=" + fullscreen; currentIndex++; }
var top = parseInt((screen.availHeight / 2) - (height / 2));
if (width != "")
{
var left = parseInt((screen.availWidth / 2) - (width / 2));
ProbsArray[currentIndex] = "left=" + left;
currentIndex++;
ProbsArray[currentIndex] = "screenX=" + left;
currentIndex++;
}
if (height != "")
{
ProbsArray[currentIndex] = "top=" + top; currentIndex++;
ProbsArray[currentIndex] = "screenY=" + top; currentIndex++;
}
window.open(PagePath, target, ProbsArray.join(","));
}
The main work happens in the AddAttributesToRender event.
I have searched the ASP.NET forums over for an elegant solution to change the attribute "NavigationURL" before rendering the control, and I found that the AddAttributesToRender event will do the magic. NavigationURL will be rendered to the "href" attribute, so basically, I added the href attribute to the hyperlink with the JavaScript popup call.
Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter)
If Not String.IsNullOrEmpty(PopupLocation) Then
Dim Location As String = Me.ResolveClientUrl(PopupLocation)
Dim Width As String = "''", Height As String = "''"
If Not String.IsNullOrEmpty(PopupHeight) Then
Height = PopupHeight
End If
If Not String.IsNullOrEmpty(PopupWidth) Then
Width = PopupWidth
End If
Dim Script As String = _
Popup(Location, _
PopupTarget, _
Width, _
Height, _
ShowMenuBar, _
ShowLocationBar, _
Resizable, _
ShowScrollBars, _
ShowStatusBar, _
ShowTitleBar, _
ShowToolBar, _
FullScreen)
writer.AddAttribute( _
HtmlTextWriterAttribute.Href, _
String.Format(Script, Me.Page.ClientScript.GetPostBackEventReference(Me, "")))
End If
MyBase.AddAttributesToRender(writer)
End Sub
Let's use it. Simply register the control in your page:
<%@ Register Assembly="Ala.UI.Controls"
Namespace="Ala.UI.Controls" TagPrefix="cc1" %>
and add the control to your page:
<cc1:PopupHyperlink ID="PopupHyperlink1" runat="server"
PopupLocation="http://www.codeproject.com" Resizable="True"
ShowLocationBar="True" ShowMenuBar="False" ShowScrollBars="True"
ShowStatusBar="False" ShowTitleBar="True" ShowToolBar="False"
PopupHeight="500" PopupWidth="500"
Font-Bold="True" Font-Overline="False"
Font-Size="Large"
ToolTip="Code Project" Font-Underline="False"
FullScreen="False" PopupTarget="_blank"
>
Code Project</cc1:PopupHyperlink>
