Click here to Skip to main content
15,867,851 members
Articles / Web Development / XHTML

Extending the Hyperlink control to use JavaScript to create a popup

Rate me:
Please Sign up or sign in to vote.
3.83/5 (6 votes)
2 Nov 2008CPOL1 min read 32.1K   138   21   4
Make your Hyperlink control use JavaScript to create a popup window.

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

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

VB
<Assembly: System.Web.ui.WebResource("Ala.UI.Controls.PopupScript.js", "text/javascript")>

This is how we include the script at run time:

VB
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:

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

VB
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:

ASP.NET
<%@ Register Assembly="Ala.UI.Controls" 
      Namespace="Ala.UI.Controls" TagPrefix="cc1" %>

and add the control to your page:

ASP.NET
<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>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) LexisNexis
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralDouble href Pin
Todd Smith3-Nov-08 9:44
Todd Smith3-Nov-08 9:44 
GeneralRe: Double href Pin
Ala Hamad4-Nov-08 21:12
Ala Hamad4-Nov-08 21:12 
GeneralRe: Double href Pin
Nitin S17-Aug-09 6:44
professionalNitin S17-Aug-09 6:44 
GeneralRe: Double href Pin
Ala Hamad17-Aug-09 10:36
Ala Hamad17-Aug-09 10:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.