結合MS AJAX將js文件編譯到動態鏈接庫

2019-11-18 16:41:10

字體：大中小

來源：轉載

供稿：網友

為了使javascript代碼不被竊取，我們可以將js文件編譯成動態鏈接庫(dll)文件。下面為了演示這一功能，創建了一個控件。

程序代碼：http://www.survivalescaperooms.com/Files/hblynn/SampleControlsCS.rar

一、創建一個類庫項目，命名為UpdateAnimate。

二、向項目中添加引用System.Web, System.Drawing, System.Web.Extensions

三、向項目中添加一個Jscript的文件UpdatePanelAnimation.js

四、向文件中添加如下代碼：

BorderAnimation = function(color)
{
this._color = color;
}

BorderAnimation.PRototype =
{
    animate: function(panelElement)
    {
        var s = panelElement.style;
        s.borderWidth = '2px';
        s.borderColor = this._color;
        s.borderStyle = 'solid';

        window.setTimeout(
            function()
            {
            {
                s.borderWidth = 0;
            }
            },
            500);
    }
}

這段代碼中，包含一段臨時改變UpdatePanel控件樣式的方法

五、解決方案資源管理器中，右鍵查看UpdatePanelAnimation.js的屬性，把高級中的“生成操作”屬性設置成“嵌入的資源”。

六、向項目中添加一個類CustomControl

七、替換類中的代碼：

using System;
using System.Drawing;
using System.Web.UI;
using System.Web;
using System.Globalization;

namespace UpdateAnimate
{
    public class UpdatePanelAnimationWithClientResource : Control
    {
        private string _updatePanelID;
        private Color _borderColor;
        private Boolean _animate;
        public Color BorderColor
        {
            get
            {
                return _borderColor;
            }
            set
            {
                _borderColor = value;
            }
        }

        public string UpdatePanelID
        {
            get
            {
                return _updatePanelID;
            }
            set
            {
                _updatePanelID = value;
            }
        }

        public Boolean Animate
        {
            get
            {
                return _animate;
            }
            set
            {
                _animate = value;
            }
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            if (Animate)
            {

UpdatePanel updatePanel = (UpdatePanel)FindControl(UpdatePanelID);

                string script = String.Format(
                   CultureInfo.InvariantCulture,
                   @"
Sys.application.add_load(function(sender, args) {{
var {0}_borderAnimation = new BorderAnimation('{1}');
var panelElement = document.getElementById('{0}');
     if (args.get_isPartialLoad()) {{
        {0}_borderAnimation.animate(panelElement);
    }}
}})
",
                   updatePanel.ClientID,
                   ColorTranslator.ToHtml(BorderColor));

                ScriptManager.RegisterStartupScript(
                    this,
                    typeof(UpdatePanelAnimationWithClientResource),
                    ClientID,
                    script,
                    true);
            }
        }
    }
}

八、向AssemblyInfo.cs文件中添加如下行：

[assembly: System.Web.UI.WebResource("UpdateAnimate.UpdatePanelAnimation.js", "application/x-Javascript")]

九、生成項目。

控件演示：

一、創建一個Ajax-enabled類型的網站項目。

三、從控件項目的bin/Debug或 bin/Release目錄拷貝UpdateAnimate.dll到網站bin目錄里。

四、替換Default.aspx的內容并運行程序：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="Samples" Namespace="UpdateAnimate" Assembly="UpdateAnimate" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"

</script>

<html xmlns="<head id="Head1" runat="server">
    <title>ScriptReference</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1"
                                 EnablePartialRendering="True"
                                 runat="server">
             <Scripts>
                <asp:ScriptReference Assembly="UpdateAnimate" Name="UpdateAnimate.UpdatePanelAnimation.js" />
             </Scripts>
            </asp:ScriptManager>