现在的位置: 首页 > 综合 > 正文

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

2012年07月20日 ⁄ 综合 ⁄ 共 4510字 ⁄ 字号 评论关闭

为了使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>

 

抱歉!评论已关闭.