结合MS AJAX将js文件编译到动态链接库

为了使javascript代码不被窃取，我们可以将js文件编译成动态链接库(dll)文件。下面为了演示这一功能，创建了一个控件。

 程序代码：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目录。

三、从控件项目的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 "  
     " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< script runat = " server " >

</ script >

< html xmlns = " http://www.w3.org/1999/xhtml " >
< 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 >


             < Samples:UpdatePanelAnimationWithClientResource 
                     ID = " UpdatePanelAnimator1 "
                     BorderColor = " Green "
                     Animate = " true "
                     UpdatePanelID = " UpdatePanel1 "
                     runat = " server "   >
             </ Samples:UpdatePanelAnimationWithClientResource >
             < asp:UpdatePanel ID = " UpdatePanel1 "  
                               UpdateMode = " Conditional "
                               runat = " server " >
                 < ContentTemplate >
                     < asp:Calendar ID = " Calendar2 "  
                                  runat = " server " >
                     </ asp:Calendar >
                 </ ContentTemplate >
             </ asp:UpdatePanel >
         </ div >
     </ form >
</ body >
</ html >