扩展超链接控件以使用 JavaScript 创建弹出窗口

• 下载源代码 - 32.4 KB

引言

这篇文章将帮助你创建一个 Web 控件，它可以帮助你处理资源并覆盖现有控件。

背景

我有一个客户希望他的网站以弹出窗口的形式打开，并且在编写网站的过程中，我发现我可以创建一个新的控件来更快、更轻松地完成这项工作。

使用代码

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

我已经扩展了 Hyperlink 控制，以使用其中的功能，并嵌入了一个 JavaScript 文件，该文件将在控件渲染时包含。

让我们一步一步地来

对于那些没有见过这个属性的人来说，它是一个程序集级别的元数据属性，允许服务器控件开发人员将嵌入式资源标记为可通过 URL 访问的。 在此处了解更多。

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

这是我们在运行时包含脚本的方式

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

这是脚本文件

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(","));
}

主要工作发生在 AddAttributesToRender 事件中。

我在 ASP.NET 论坛上搜索了很久，希望能找到一种优雅的解决方案来在控件渲染之前更改属性“NavigationURL”，并且我发现 AddAttributesToRender 事件可以做到这一点。 NavigationURL 将被渲染到“href”属性，因此基本上，我将 JavaScript 弹出调用添加到超链接的 href 属性中。

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

让我们使用它。只需在你的页面中注册控件

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

并将控件添加到你的页面

<cc1:PopupHyperlink ID="PopupHyperlink1" runat="server" 
    PopupLocation="https://codeproject.org.cn" 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>