Extending the Hyperlink control to use JavaScript to create a popup

• Download source code - 32.4 KB

Introduction

The article will help you in making a web control which can help you deal with resources and override existing controls.

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

''' <summary>
''' Javascript Popup Control
''' </summary>
''' <remarks></remarks>
<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>